Textbeschriftungen und Namen

Geben Sie in Bildkarten jedem <area>-Element ein alt-Attribut mit einem Namen, der beschreibt, worauf die Bereiche verlinken. Wenn dies unterlassen wird, wird eine Bildkarte für Benutzer assistiver Technologien schwer nutzbar – sie benötigen Alternativtext, um den Zweck eines Bildes verstehen zu können.

Das folgende Beispiel zeigt eine Bildkarte (entnommen von H24: Bereitstellen von Textalternativen für die Bereichselemente von Bildkarten):

<img
  src="welcome.gif"
  usemap="#map1"
  alt="Areas in the library. Select an area for
more information on that area." />
<map id="map1" name="map1">
  <area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference" />
  <area
    shape="rect"
    coords="34,34,100,100"
    href="media.html"
    alt="Audio visual lab" />
</map>

Sehen Sie sich die Referenzseite des <area>-Elements für ein interaktives Live-Beispiel an.

• <area>
• H24: Bereitstellen von Textalternativen für die Bereichselemente von Bildkarten

Für jeden Container, dessen Inhalt als Dialogfeld fungiert (zum Beispiel ein modales Dialogfeld, das den Benutzer auffordert, eine Auswahl zu treffen oder auf eine durchgeführte Aktion zu reagieren), geben Sie ihm ein beschreibendes Etikett oder einen Namen, damit Benutzer assistiver Technologien leicht herausfinden können, was dessen Zweck ist.

Ein Dialogfeld wird im Allgemeinen durch eine ARIA role="dialog" oder role="alertdialog" gekennzeichnet; Sie können die Attribute aria-label oder aria-labelledby verwenden, um ein Etikett bereitzustellen.

Das folgende Beispiel zeigt ein Dialogfeld, das mit role="dialog" definiert und mit aria-labelledby gekennzeichnet ist.

<div
  role="dialog"
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">Your personal details were successfully updated</h2>
  <p id="dialog1Desc">
    You can change your details at any time in the user account section.
  </p>
  <button>Close</button>
</div>

Wenn das Dialogfeld keine Überschrift hat, können Sie stattdessen aria-label verwenden, um den Etikettentext zu enthalten:

<div role="dialog" aria-label="Personal details updated confirmation">
  <p>
    Your personal details were successfully updated. You can change your details
    at any time in the user account section.
  </p>
  <button>Close</button>
</div>

• role="dialog"
• role="alertdialog"
• aria-label
• aria-labelledby
• WAI-ARIA: dialog role
• Dialog-Erstellungspraktiken

Es ist wichtig, jedem HTML-Dokument einen <title> hinzuzufügen, der den Zweck der Seite beschreibt. Eine gängige Navigationstechnik für Benutzer assistiver Technologien besteht darin, den Inhalt einer Seite zu erschließen, indem sie den Titel lesen. Wenn der Titel nicht verfügbar ist, müssen sie die Seite durchforsten, um deren Inhalt zu bestimmen, was ein zeitaufwändiger und potenziell verwirrender Prozess sein kann.

Der Titel für den Referenzartikel über das <title>-Element lautet wie folgt:

<title>
  &lt;title&gt;: The Document Title element - HTML: Hypertext Markup Language |
  MDN
</title>

Ein weiteres Beispiel könnte wie folgt aussehen:

<title>Fill in your details to register — myGov services</title>

Um dem Benutzer zu helfen, können Sie den Titelwert der Seite aktualisieren, um wesentliche Zustandsänderungen der Seite widerzuspiegeln (wie z. B. Probleme bei der Formularvalidierung):

<title>2 errors — Fill in your details to register — myGov services</title>

• <title>

Stellen Sie sicher, dass Elemente, die Inhalte einbetten, ein title-Attribut haben, das die eingebetteten Inhalte beschreibt. Dies schließt die <embed>- und <object>-Elemente ein. Diese Elemente werden häufig für grafische Inhalte verwendet, ähnlich wie das <img>-Element. Ein beschreibender Titel hilft Benutzern assistiver Technologien, zu verstehen, was das Element anzeigt.

Für beste Zugänglichkeit fügen Sie ein <figcaption> innerhalb eines <figure>-Elements hinzu, auch wenn dies technisch optional ist. Die Bildunterschrift ergänzt jeden Alternativtext zu Bildern innerhalb der Abbildung. Die Bildunterschrift beschreibt den Zweck der Abbildung im Dokument, der sich von einer Beschreibung eines visuellen Elements, wie sie der Alternativtext liefert, unterscheiden kann.

Das folgende Beispiel zeigt den Code für eine Abbildung mit einer Bildunterschrift. Das alt-Attribut des <img> beschreibt das Aussehen des Bildes; das <figcaption> beschreibt es aus einer funktionalen Perspektive (in diesem Fall der lateinische Name der Blume im Bild).

<figure>
  <img
    src="milkweed.jpg"
    alt="Black and white close-up photo of milkweed flowers" />
  <figcaption>Asclepias verticillata</figcaption>
</figure>

Fieldset-Elemente müssen eine Textbeschreibung haben, ähnlich wie andere Formular-Elemente. Verwenden Sie das <legend>-Element, um den Zweck eines Fieldsets zu beschreiben.

Wenn eine Gruppe von Formularelementen mit einem <fieldset>-Element gruppiert wird, sollte ein verschachteltes <legend>-Element darin enthalten sein, das eine klare Beschreibung der Gruppe enthält.

Benutzer assistiver Technologien finden diese Beschreibung hilfreich, um den Gesamtnutzen der Gruppe zu erkennen. Ohne die Legende müssten sie um die einzelnen Formularelemente der Gruppe navigieren, um eine Vorstellung vom Gesamtnutzen zu erhalten, was zu Verwirrung führen könnte.

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster" value="K" />
    <label for="kraken">Kraken</label><br />

    <input type="radio" id="sasquatch" name="monster" value="S" />
    <label for="sasquatch">Sasquatch</label><br />

    <input type="radio" id="mothman" name="monster" value="M" />
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

Sie können eine Live-Version dieses Beispiels auf der <fieldset>-Referenzseite sehen.

• <fieldset>
• <legend>

Alle Elemente innerhalb eines Formulars müssen ein <label> haben, das ihren Zweck identifiziert. Dies gilt für alle Arten von <input>-Elementen sowie <button>, <output>, <select>, <textarea>, <progress> und <meter>-Elementen sowie für jedes Element mit der switch ARIA role.

Das Formularelement kann innerhalb des <label> platziert werden, wobei die Zuordnung zwischen dem Formularelement und dem Label aus der Struktur ersichtlich ist. Alternativ können Sie eine Zuordnung zwischen einem <label> und einem Formularelement erstellen, indem Sie den id-Wert des Formularelements als Wert des for-Attributs des Labels angeben.

Neben einem <label> für jedes Formularelement sollten diese Etiketten sichtbar und nicht versteckt sein. Sichtbare Etiketten helfen allen Benutzern, den Zweck eines Formularelements zu verstehen. Vertrauen Sie nicht auf Platzhaltertext, da dieser verschwindet, sobald der Benutzer zu schreiben beginnt.

Frame-Elemente, sowohl <iframe> als auch das ältere, veraltete <frame>, müssen einen Titel haben, um den Inhalt des Frames zu beschreiben. Verwenden Sie das title-Attribut, um ein Frame-Element zu beschriften. Ohne einen Titel müssen Benutzer assistiver Technologien in den Frame navigieren, um zu verstehen, was er enthält, was schwierig und verwirrend sein kann.

Das <frame>-Element ist nicht mehr Teil der HTML-Spezifikation. Unterstützung dafür könnte in Zukunft von Browsern entfernt werden. Außerdem ist es für Screenreader schwierig, durch Seiten mit <frame>-Elementen zu navigieren. Für beste Zugänglichkeit und zukünftige Wartbarkeit sollten Seiten, die Frames verwenden, neu gestaltet werden, um mit CSS ein ähnliches Layout zu erreichen.

Als bewährte Praxis sollte auch ein <title> für das Dokument bereitgestellt werden, das im Frame eingeschlossen ist, mit einem Inhalt, der mit dem title-Attribut des Frames identisch ist. (Dies setzt voraus, dass das eingeschlossene Dokument unter Ihrer Kontrolle steht; falls nicht, versuchen Sie, das title-Attribut des Frames an den Titel des Dokuments anzupassen.) Einige Screenreader ersetzen den Inhalt des title-Attributs durch den Inhalt des <title> des eingeschlossenen Dokuments. Es ist am sichersten und am zugänglichsten, denselben Titel an beiden Stellen bereitzustellen.

Stellen Sie sicher, dass Ihre Überschriften nicht leeren Textinhalt haben und nicht versteckt sind, z. B. mit CSS display:none oder aria-hidden=true. Benutzer von Screenreadern sind auf Überschriften angewiesen, um die Struktur und den Inhalt eines Dokuments zu verstehen.

Achten Sie auch darauf, die Überschriftselemente nur für tatsächliche Abschnittsüberschriften zu verwenden und nicht als Abkürzung, um Text hervorzuheben. Screenreader-Benutzer "überfliegen" typischerweise die Überschriften einer Seite, ähnlich wie sehende Benutzer; Text, der nicht als Überschrift gedacht ist, aber mit Überschriftselementen ausgezeichnet ist, kann Verwirrung stiften.

Stellen Sie sicher, dass Ihre Überschriften nicht leeren Textinhalt haben und nicht versteckt sind, wie etwa mit CSS display:none oder aria-hidden=true. Benutzer von Screenreadern sind auf Überschriften angewiesen, um die Struktur und den Inhalt eines Dokuments zu verstehen. Verwenden Sie Überschriftselemente nicht, um Bilder oder andere grafische Inhalte zu markieren.

Stellen Sie sicher, dass <iframe>-Elemente ein title-Attribut haben, um den Inhalt des Frames zu beschreiben. Ohne einen Titel müssen Benutzer assistiver Technologien in den Frame navigieren, um zu verstehen, was er enthält, was schwierig und verwirrend sein kann.

Als bewährte Praxis sollte auch ein <title> für das Dokument bereitgestellt werden, das im Frame eingeschlossen ist, mit einem Inhalt, der mit dem title-Attribut des Frames identisch ist. (Dies setzt voraus, dass das eingeschlossene Dokument unter Ihrer Kontrolle steht; falls nicht, versuchen Sie, das title-Attribut des Frames an den Titel des Dokuments anzupassen.) Einige Screenreader ersetzen den Inhalt des title-Attributs durch den Inhalt des <title> des eingeschlossenen Dokuments. Es ist am sichersten und am zugänglichsten, denselben Titel an beiden Stellen bereitzustellen.

Stellen Sie für alle inhaltlichen (also nicht dekorativen) Bilder und bildähnlichen Elemente beschreibenden Text bereit. Dies schließt SVG-Bilder, <img>, <canvas>, <map> und <area>-Elemente ein sowie <input>-Elemente, bei denen type=image und <object>-Elemente, bei denen type mit image/ beginnt. Der typische Weg, dies zu tun, ist mit dem alt-Attribut. Stellen Sie sicher, dass die Beschreibung wiedergibt, was im Bild zu sehen ist.

Wenn ein Element für die Interaktion durch Benutzer vorgesehen ist, sollte es ein Etikett haben. Interaktive Elemente umfassen Links (<a>), Formularelemente, Buttons und jedes Element, das einen Handler für Maus- oder Tastaturereignisse hat. Die Art und Weise, wie ein Element beschriftet werden sollte, hängt von seinem Typ ab: Für Formularelemente verwenden Sie ein <label>; für Links, Buttons und klickbare Elemente liefert der Textinhalt des Elements typischerweise das Etikett. Wenn keine andere Option zur Beschriftung eines Elements existiert, verwenden Sie das aria-label-Attribut.

Verwenden Sie im <optgroup>-Element das label-Attribut, um die Gruppe zu beschreiben, damit assistive Technologien darauf zugreifen können.

In diesem Beispiel gibt das label-Attribut in den <optgroup>-Elementen einen Kategorienamen für die Gruppe von Optionen an.

<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
  <optgroup label="Theropods">
    <option>Tyrannosaurus</option>
    <option>Velociraptor</option>
    <option>Deinonychus</option>
  </optgroup>
  <optgroup label="Sauropods">
    <option>Diplodocus</option>
    <option>Saltasaurus</option>
    <option>Apatosaurus</option>
  </optgroup>
</select>

Wenn Sie mehr als eine Symbolleiste in einer Webanwendung mit der ARIA toolbar-Rolle definieren, müssen Sie das aria-label-Attribut verwenden, um jede zu beschriften, damit sie von assistiver Technologie beschrieben werden kann. Es ist eine gute Praxis, eine Symbolleiste zu beschriften, auch wenn es nur eine pro Seite gibt.

• W3C ARIA toolbar example

1.1.1 Nicht-textueller Inhalt (A)

Alle nicht-textuellen Inhalte, die dem Benutzer präsentiert werden, haben eine Textalternative, die den gleichen Zweck erfüllt, mit Ausnahme der im obigen Link aufgelisteten Situationen.

2.4.4 Zweck des Links (im Kontext) (A)

Der Zweck jedes Links kann allein aus dem Linktext oder aus dem Linktext zusammen mit dem programmgesteuerten Linkkontext bestimmt werden, außer in Fällen, in denen der Zweck des Links für Benutzer im Allgemeinen mehrdeutig wäre.

2.4.9 Zweck des Links (nur Link) (AAA)

Es ist ein Mechanismus verfügbar, der es ermöglicht, den Zweck jedes Links allein aus dem Linktext zu identifizieren, mit Ausnahme von Fällen, in denen der Zweck des Links für Benutzer im Allgemeinen mehrdeutig wäre.