11 Accessible names and descriptions

In Kapitel 05 haben wir gelernt, welche Informationen ein AccTree Objekt dem Screenreader liefert: Role, Name, Description und State. Name und Beschreibung schauen wir uns jetzt genauer an:

Was ist ein accessible name?

Der »Name« oder accName eines Elements ist ein Text, der programmatisch mit einem Element verbunden ist, und den der Browser über den accTree einer AT zur Verfügung stellt.

Dieser accName wird verwendet, um einem Element ein Label bzw. eine Beschriftung für AT-Benutzer zu geben.

Was ist der Unterschied zwischen label und accName?

Idealerweise sind diese beiden tatsächlich identisch. Die WCAG unterscheiden folgendermaßen:

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.
text that is presented visually = label
name = the string of text that is presented to ATs

Nur weil ein Element ein Label hat, ist noch nicht garantiert, dass es auch einen accName hat. Das muss sichergestellt werden!

Beispiel:

1. input und label
Eingabefelder haben ein sichtbares Label, aber nur, weil es hier steht und sichtbar ist, heißt das noch nicht, dass dieses Label für ATs auch als solches erkannt werden kann. Das label muss programmatisch mit dem input verbunden werden: und zwar mit den for und id-Attributen.

<label for="name">Your name</label>
<input id="name" type="text">

2. Icon-Button
Das Icon ist sozusagen ein grafisches Label. Aber es braucht auch einen accName. Der Name sollte die Aktion beschreiben, die der Button auslöst. Mehr dazu im Kapitel 11.3 Providing accNames to icon buttons.

3. Icon-only Links
Hier braucht das Icon einen Namen, der das Ziel des Links beschreibt.

<a href="https://bsky.app">
  <span class="visually-hidden">Bluesky</span>
  <svg ...>🦋</svg>
</a>

Wenn label und accName gleich sind, dann haben Screenreader-User und sehende Besucher dasselbe Benutzererlebnis – das wäre der Idealzustand. Wenn ein sehender Screenreader-User eine Kontrollschaltfläche fokussiert, sollte er dasselbe sehen wie hören. Das ist auch sehr wichtig für die Spracheingabe: wenn die Spracherkennungssoftware eine Spracheingabe verarbeitet, sucht sie nach einem accName, der zu dem Namen passt, den der User gesagt hat. Wenn die Software so einen Namen nicht findet, wird sie die Schaltfläche nicht aktivieren. SC 2.5.3 Label in name fordert, dass der Name das Label beinhaltet.

Welche Elemente benötigen einen accName?

Gewisse Elemente, insbesondere interaktive Elemente, müssen einen accName haben. Manche nicht-interaktiven Elemente profitieren von einem accName. Und manche Elemente dürfen gar keinen accName haben.

Relevante Success Criteria

SC 3.2.2 Labels or Instructions (Level A)

Labels or instructions are provided when content requires user input.
D.h., alle Formularfelder oder Widgets, die Benutzereingaben erwarten, müssen ein visuelles Label haben, und, wo benötigt, eine Beschreibung.

SC 1.3.1 Info and Relationships (Level A)

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Wenn visuell sichtbare Labels existieren, müssen diese programmatisch mit ihrem Element verbunden sein.

SC 4.1.2 Role, Name, Value (Level A)

For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined.
Alle diese Komponenten müssen einen accName haben.

Nicht-interaktive Elemente: Wenn mehrere Regionen einer Landmark auf der Seite vorkommen, profitieren diese von einem accName, die den Zweck dieser Region bezeichnen. Die User können dann effizienter durch die Seite navigieren. Bsp: <nav aria-label="Site"> und <nav aria-label="Social">
Weiters profitieren Tabellen, Dialoge und gruppierte Formularfelder <fieldset> und <legend> von accNames.

Nicht alle Elemente können einen accName haben

Manche ARIA-Rollen sind "name prohibited": § 5.2.8.6 Roles which cannot be named. Generic Elements wie <div> oder <span> sind generische Elemente, aria-label darf hier nicht verwendet werden. Die Rolle generic schafft einen namenlosen Container ohne semantische Bedeutung. Diese Container sind nicht dazu bestimmt, einen accName zu bekommen – außer sie bekommen eine entsprechende Rolle.

Was ist eine accessible description?

Eine accDesc ist ähnlich einem accName:

• Sie hilft dem Benutzer zu verstehen, wie die Komponente verwendet werden soll
• Der Browser macht sie über den AccTree den ATs sichtbar, wenn sie programmatisch mit einem Element verbunden sind.

Was ist der Unterschied zwischen accDesc und accName?

Ein accName ist meistens kurz und bündig.
Eine accDesc ist länger und gibt zusätzliche Hinweise zur Benutzung dieser Komponente. Bsp: Anforderungen an Formularfelder wie Passwörter, Fehlermeldungen, ...
Die programmatische Verknüpfung erfolgt mit dem aria-describedby-Attribut.
Die accDesc eines Elements wird als Textstring (ohne jede Struktur) dem Namen und der Rolle angehängt.

<label for="passw0rd">Password</label>

<input type="password" id="passw0rd" aria-describedby="passw0rd-description">

<p id="passw0rd-description">Your password should be at least 8 characters long and contain at least one special character.</p>

accNames werden immer vom Screenreader vorgelesen
accDescriptions können, müssen aber nicht vom Screenreader vorgelesen werden! Wie eine accDesc vorgelesen wird, hängt von der Kombination von Browser und Screenreader ab.

Links

• xxx