Accessible name

Ein accessible name (zugänglicher Name) ist der Name eines Benutzeroberflächenelements; er ist der Text, der einem HTML-Element zugeordnet ist und den Benutzern von unterstützenden Technologien ein Label für das Element bereitstellt.

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 eindeutig auf einer Seite sein. Dies hilft den Benutzern, ein Element von anderen Elementen zu unterscheiden und das gewünschte 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. der Text innerhalb des <figcaption>) oder unsichtbarem Inhalt (z.B. das aria-label-Attribut, das auf einem Element gesetzt ist) oder einer Kombination aus beidem abgeleitet werden. Wie der zugängliche Name eines Elements bestimmt wird, basiert auf der accessible name calculation, 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 <a href="foo.html">Bar</a> den zugänglichen Namen "Bar" für diesen Hyperlink.

Andere Elemente erhalten ihren zugänglichen Namen aus dem Inhalt assoziierter Elemente. Zum Beispiel, wenn ein <fieldset> oder <table>-Element ein <legend> oder <caption>-Element als Nachfahre enthält, erfolgt die Zuordnung des verschachtelten Elements, das einen zugänglichen Namen für das Elternteil bereitstellt, automatisch. Für Formularelemente wie <textarea> und <input> kommt der zugängliche Name aus dem zugeordneten <label>-Element. Die Zuordnung muss explizit durch Festlegen des for-Attributs im <label>-Element definiert werden, um mit der id des Formularelements übereinzustimmen. Alternativ wird eine implizite Zuordnung erstellt, wenn das Formularsteuerelement direkt im <label>-Element verschachtelt ist.

Für einige Elemente stammt der zugängliche Name aus den Attributen des Elements; zum Beispiel das 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, den man mit einem UI-Element, das einen zugänglichen Namen benötigt, assoziieren kann, 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 Textinhalten, benötigen keinen zugänglichen Namen. Alle Steuerelemente sollten jedoch einen zugänglichen Namen haben. Alle Bilder, die Informationen vermitteln und nicht rein präsent sind, ebenfalls.

Unterstützungstechnologien stellen Benutzern die Accessibility-Name-Eigenschaft zur Verfügung, 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. Zum Beispiel ist ein tabpanel ein Abschnitt von Inhalten, der nach der Aktivierung des zugehörigen Elements mit einer tab-Rolle durch den Benutzer erscheint. Diese Rolle kann auf einem Element gesetzt werden, das keinen benötigten Namen hat, wie das <div>-Element. Die tab ist das Steuerelement und muss einen zugänglichen Namen haben. Das tabpanel ist das Kind (Inhaltsabschnitt) des tab. Das Hinzufügen von aria-labelledby zum tabpanel ist eine bewährte Praktik.