Zugänglicher Name

Ein zugänglicher Name ist der Name eines Benutzeroberflächenelements; es ist der Text, der einem HTML-Element zugeordnet ist und Benutzern von unterstützenden Technologien ein Etikett für das Element bietet.

Zugängliche Namen vermitteln den Zweck oder die Absicht des Elements. Dies hilft den Benutzern zu verstehen, wofür das Element gedacht ist und wie sie damit interagieren können. Im Allgemeinen sollten zugängliche Namen für Elemente auf einer Seite eindeutig sein. Dies hilft Benutzern, ein Element von anderen zu unterscheiden und das Element zu identifizieren, mit dem sie interagieren möchten.

Je nach Element und HTML-Markup kann der Wert des zugänglichen Namens aus sichtbarem (z. B. dem Text innerhalb von <figcaption>) oder unsichtbarem (z. B. dem auf ein Element gesetzten aria-label-Attribut) Inhalt oder einer Kombination aus beidem abgeleitet werden. Wie der zugängliche Name eines Elements ermittelt wird, basiert auf der Berechnung des zugänglichen Namens, die für verschiedene Elemente unterschiedlich ist.

Es ist am besten, sichtbaren Text als zugänglichen Namen zu verwenden. Viele Elemente, einschließlich <a>, <td> und <button>, können ihren zugänglichen Namen aus ihrem Inhalt beziehen. Zum Beispiel hat der Hyperlink <a href="foo.html">Bar</a> den zugänglichen Namen "Bar".

Andere Elemente erhalten ihren zugänglichen Namen aus dem Inhalt der zugehörigen Elemente. Zum Beispiel, wenn ein <fieldset>- oder <table>-Element ein Nachfahrelement <legend> oder <caption> enthält, erfolgt die Zuordnung des verschachtelten Elements, das einen zugänglichen Namen für das übergeordnete Element bietet, automatisch. Bei Formularelementen wie <textarea> und <input> stammt der zugängliche Name vom zugehörigen <label>-Element. Die Zuordnung muss explizit definiert werden, indem das for-Attribut im <label>-Element auf die id des Formularelements festgelegt wird. Alternativ wird eine implizite Zuordnung erstellt, wenn das Steuerungselement direkt im <label>-Element verschachtelt ist.

Für einige Elemente stammt der zugängliche Name aus den Attributen des Elements; zum Beispiel dem alt-Attribut im Fall von <img>. Bei <img src="grape.jpg" alt="banana"/> ist der zugängliche Name des Bildes "banana".

Um eine Zuordnung zwischen sichtbarem Inhalt und einem Element oder mehreren Textknoten und einem Element zu erstellen, kann das aria-labelledby-Attribut verwendet werden. Wenn kein sichtbarer Text vorhanden ist, um ihn einem UI-Element, das einen zugänglichen Namen benötigt, zuzuordnen, kann das aria-label-Attribut verwendet werden. Namen sollten nicht zu Elementen hinzugefügt werden, die Inline-Text auszeichnen, wie <code>, <del> und <mark>.

Viele Elemente, wie Abschnitte von Textinhalt, benötigen keinen zugänglichen Namen. Alle Steuerelemente sollten einen zugänglichen Namen haben. Auch alle Bilder, die Informationen vermitteln und nicht rein gestalterisch sind.

Unterstützende Technologien bieten Benutzern die Eigenschaft des Zugänglichkeitsnamens, die den zugänglichen Namen zusammen mit der Rolle des Elements umfasst. Während viele Elemente keinen zugänglichen Namen benötigen, ist es notwendig, einen zugänglichen Namen bereitzustellen, um den Inhalt von Elementen mit festgelegten Rollen zu überschreiben oder zu ergänzen. Beispielsweise ist ein tabpanel ein Inhaltsabschnitt, der nach der Aktivierung des zugehörigen Elements mit einer tab-Rolle angezeigt wird. Diese Rolle kann auf ein Element ohne benötigten Namen, wie das <div>-Element, gesetzt werden. Die tab ist die Steuerung und muss einen zugänglichen Namen haben. Das tabpanel ist das untergeordnete (Inhaltsabschnitt) des tab. Das Hinzufügen von aria-labelledby zum tabpanel ist eine bewährte Methode.