When to use aria-label
Elements with no text content: If an element (like an icon button) doesn't have visible text, aria-label provides the necessary description.
aria-label=“Merken”HTML
<oc-icon-button-v3 variant="secondary" size="100" icon="wishlist" oc-aria-label="Merken"></oc-icon-button-v3><code style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;line-height:1.6;color:#f0056e;background:none;padding:0">aria-label=“Merken”</code></div>Ambiguous elements: If the purpose of an element is unclear from its appearance or context (e.g. "Mehr dazu"), aria-label clarifies its function.
aria-label=
“Mehr zu nachhaltigen Verpackungen”Nachhaltige Verpackungen
OTTO setzt auf recyclingfähige Materialien und reduziert kontinuierlich den Einsatz von Plastik in Versandverpackungen.
Digitale Bildung
OTTO unterstützt Schulprojekte in Hamburg, die Kindern den sicheren und kreativen Umgang mit digitalen Medien vermitteln.
aria-label=
“Mehr zu digitaler Bildung”HTML
<div style="display:flex;align-items:stretch;gap:16px;width:100%"><div style="flex:0 0 96px;align-self:center;font-size:0.75rem"><code style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.75rem;line-height:1.6;color:#f0056e;background:none;padding:0">aria-label=<br>“Mehr zu nachhaltigen Verpackungen”</code></div><div style="flex:1 1 0;min-width:0;border:1px solid var(--oc-semantic-color-stroke-divider);border-radius:4px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px"><p class="oc-headline-100" style="margin:0">Nachhaltige Verpackungen</p><p class="oc-copy-100" style="margin:0 0 4px">OTTO setzt auf recyclingfähige Materialien und reduziert kontinuierlich den Einsatz von Plastik in Versandverpackungen.</p><oc-button-v1 variant="secondary" fit-content style="margin-top:auto" oc-aria-label="Mehr zu nachhaltigen Verpackungen">Mehr dazu</oc-button-v1></div><div style="flex:1 1 0;min-width:0;border:1px solid var(--oc-semantic-color-stroke-divider);border-radius:4px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px"><p class="oc-headline-100" style="margin:0">Digitale Bildung</p><p class="oc-copy-100" style="margin:0 0 4px">OTTO unterstützt Schulprojekte in Hamburg, die Kindern den sicheren und kreativen Umgang mit digitalen Medien vermitteln.</p><oc-button-v1 variant="secondary" fit-content style="margin-top:auto" oc-aria-label="Mehr zu digitaler Bildung">Mehr dazu</oc-button-v1></div><div style="flex:0 0 96px;align-self:center;font-size:0.75rem"><code style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.75rem;line-height:1.6;color:#f0056e;background:none;padding:0">aria-label=<br>“Mehr zu digitaler Bildung”</code></div></div>Overriding Existing Labels: In some cases, you might want to override the existing text of an element with a more descriptive label.
aria-label=
“Rechnung drucken”HTML
<oc-button-v1 variant="secondary" fit-content icon-type-left="print" oc-aria-label="Rechnung drucken">Drucken</oc-button-v1><code style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;line-height:1.6;color:#f0056e;background:none;padding:0">aria-label=<br>“Rechnung drucken”</code></div>Best practices
Try using texts, that work for seeing people.
If they don't work for blind people, proceed with aria-labels.
Focus on purpose/function:
Describe what the element does or what it represents, not just what it is. Instead of aria-label="Image", use aria-label="View larger version of image" (if that's the button's function).
Don't repeat existing text:
If the element already has a visible label (e.g., a form field with a label element), don't duplicate that information in the aria-label. In fact, in this case, you generally shouldn't use aria-label at all.
When NOT to use aria-label
When HTML semantics suffice: If you can use standard HTML elements or OTTO Components with appropriate attributes (e.g., an <oc-button> with text content), always prefer that approach. Don't use aria-label to reinvent the wheel.
On elements with visible and descriptive text: If an element already has clear and understandable text content, adding an aria-label is redundant and can even be confusing.
To provide essential information: If information is of interest for all users, it should be visible on the screen, not "hidden" in an aria-label.
Interactive actions: visible text is key.
Prioritize clear, visible text for interactive elements. If "(Button:)* Mehr Informationen" (*automatically read by screen reader) isn't clear enough for blind users, improve the visible text first. Use aria-labels only when visible text can't be modified.