11.5 Providing unique names to controls that share the same label

Konsistente Identifikation

Buttons, die exakt dasselbe tun, oder Links, die auf exakt dasselbe Ziel verweisen, müssen den gleichen accName haben: SC 3.2.4 Consistent Identification.
Buttons, die nicht genau dasselbe tun, sollten idealerweise auch nicht dasselbe Label haben. Praktisches Beispiel: "In den Warenkorb" – viele Buttons auf einer Shopseite haben den gleichen Namen, tun aber nicht dasselbe, weil sie sich immer auf das jeweilige Produkt beziehen. Daher müsste das Label eigentlich heißen: "Gelbe Tasse in den Warenkorb" oder "Roten Teller in den Warenkorb". Oder: "Weiterlesen"-Links in Blogs oder bei aktuellen Meldungen beziehen sich immer auf einen bestimmten Beitrag und haben auch jeweils ein individuelles Ziel.

Relevante Success Criteria

SC 3.2.4 Consistent Identification (Level AA): Components that have the same functionality within a set of Web pages are identified consistently.

❌ visually-hidden Text für individuelle, barrierefreie Button-Namen

Man könnte jetzt natürlich einen visually-hidden Text mit dem Namen des Produkts in den accName packen. Das würde die Benutzererfahrung für Screenreaderuser deutlich erhöhen, allerdings hat diese Lösung einen Nachteil: Benutzer von Spracherkennung haben dann ein Problem, weil das sichtbare Label nicht mehr mit dem accName aus dem accTree übereinstimmt. Benutzer von Spracherkennungssoftware brauchen sichtbare Text-Labels. Wenn diese versteckt oder verschleiert sind, können sie nicht erkannt werden.

Die Nutzung einer Spracherkennungssoftware spiegelt ganz gut die Nutzung des Keyboards wieder. Spracherkennung ist über alle Betriebssysteme und Plattformen verfügbar, es gibt aber auch Third-Party-Software wie z.B. Dragon Naturally Speaking.

<!-- Adding the product's name to the button that adds the product to cart would make the buttons' accessible names unique -->
<button>
  Add <span class="visually-hidden">[ PRODUCT_NAME ]</span> to Cart
</button>
<!-- P.S. Don't do this -->

Alle interaktiven Elemente auf einer Seite sollten also sichtbare Text-Labels haben! Wenn der Benutzer ein Label einer Schaltfläche spricht, sucht die Spracherkennungssoftware nach einem accName, der dem gesprochenen Text entspricht und die Aktion ausführen.
Wenn es mehrere Elemente mit demselben accName gibt, hebt die Spracherkennungssoftware diese hervor und nummeriert sie. Der User nennt dann die Nummer und die Software führt wieder den Befehl aus.

Wenn visually-hidden Text mitten in ein Label eingefügt wird, kann die Spracherkennungssoftware das Label mit dem accName nicht matchen.

Label in name

Relevante Success Criteria

SC 2.5.3 Label in Name (Level A): For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
Der accName beinhaltet das Text-Label des Elements.

Best practice: Der Label-Text sollte am Anfang des accNames stehen. Wenn dem Namen eines Elements visually-hidden Text hinzugefügt wird, sollte dieser am Ende angehängt werden.

<!-- Instead of this ... -->
<button>
  Add <span class="visually-hidden">[ PRODUCT_NAME ]</span> to Cart
</button>

<!-- ... do this: -->
<button>
  Add to Cart <span class="visually-hidden">, [ PRODUCT_NAME ]</span> 
</button>

Markup für "Weiterlesen"-Links

<!-- Instead of this ... -->
<a href="/path/to/article-title/">Read more</a>

<!-- ... do this: -->
<a href="/path/to/article-title/">
  Read more <span class="visually-hidden">about [ ARTICLE_TITLE ]</span>
</a>

The Question and The Choice
The larger question ist why do we force people to do all this extra work? Partially visually hidden link text isn't necessarily a hard WCAG failure, but it is also not a good user experience.