Textbeschriftungen und Namen

Geben Sie in Bildkarten jedem <area>-Element ein alt-Attribut, das einen Namen enthält, der beschreibt, zu welchen Ressourcen die Bereiche verlinken. Ohne dies wird eine Bildkarte für Nutzer von unterstützenden Technologien schwer nutzbar - sie benötigen Alternativtext, um den Zweck eines Bildes zu verstehen.

Das folgende Beispiel zeigt eine Bildkarte (entnommen aus H24: Providing text alternatives for the area elements of image maps):

<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>

Siehe die <area>-Element-Referenzseite für ein interaktives Live-Beispiel.

• <area>
• H24: Providing text alternatives for the area elements of image maps

Geben Sie jedem Container, dessen Inhalte als Dialogfeld fungieren (zum Beispiel ein modales Dialogfeld, das den Nutzer bittet, eine Auswahl zu treffen oder auf eine Aktion zu reagieren), ein beschreibendes Label oder einen Namen, damit Nutzer von unterstützenden Technologien leicht entdecken können, wozu es dient.

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 Label bereitzustellen.

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

<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 Labeltext anzugeben:

<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
• Dialog authoring practices

Es ist wichtig, in jedem HTML-Dokument ein <title> zu inkludieren, das den Zweck der Seite beschreibt. Eine gängige Navigationstechnik für Nutzer von unterstützenden Technologien besteht darin, anhand des Titels zu ermitteln, welche Inhalte eine Seite enthält. Wenn der Titel nicht verfügbar ist, müssen sie die Seite durchblättern, um den Inhalt zu bestimmen, was ein zeitaufwändiger und potenziell verwirrender Prozess sein kann.

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

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

Ein anderes Beispiel könnte so aussehen:

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

Um dem Nutzer zu helfen, können Sie den Wert des Seitentitels aktualisieren, um signifikante Änderungen des Seitenzustands wiederzugeben (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 oft für grafische Inhalte verwendet, ähnlich wie das <img>-Element. Ein beschreibender Titel hilft Nutzern von unterstützenden Technologien, zu verstehen, was das Element zeigt.

Für eine bestmögliche Zugänglichkeit schließen Sie ein <figcaption> innerhalb eines <figure>-Elements ein, auch wenn dies technisch optional ist. Die Bildunterschrift ergänzt jeden Alternativtext bei Bildern innerhalb der Figur. Die Bildunterschrift beschreibt den Zweck der Figur im Dokument, der sich von einer Beschreibung eines visuellen Elements unterscheiden kann, wie es der Alternativtext bietet.

Das folgende Beispiel zeigt Code für eine Figur mit Bildunterschrift. Das alt-Attribut des <img> beschreibt das Erscheinungsbild 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 ähnlich wie andere Formularelemente eine Textbeschreibung haben. Verwenden Sie das <legend>-Element, um den Zweck eines Fieldsets zu beschreiben.

Wenn Sie eine Gruppe von Formularelementen mit einem <fieldset>-Element zusammenfassen, sollten Sie ein geschachteltes <legend>-Element darin einschließen, das eine klare Beschreibung der Gruppe enthält.

Nutzer von unterstützenden Technologien finden diese Beschreibung hilfreich, wenn sie versuchen, den Gesamtsinn der Gruppe zu verstehen. Ohne die Legende müssten sie um die einzelnen Formularsteuerelemente in der Gruppe navigieren, um eine Vorstellung vom Gesamtsinn zu bekommen, 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 für <button>, <output>, <select>, <textarea>, <progress> und <meter>-Elemente sowie für jedes Element mit der switch ARIA Rolle.

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

Zusätzlich zur Verwendung eines <label> für jedes Formularelement sollten diese Labels sichtbar, nicht versteckt, sein. Sichtbare Labels helfen allen Nutzern, den Zweck eines Formularelements zu verstehen. Verlassen Sie sich nicht auf Platzhaltertext, da dieser verschwindet, sobald der Nutzer mit der Eingabe beginnt.

Rahmen-Elemente, sowohl <iframe> als auch das ältere, veraltete <frame>, müssen einen Titel haben, der den Inhalt des Rahmens beschreibt. Verwenden Sie das title-Attribut, um ein Rahmen-Element zu beschriften. Ohne einen Titel müssen Nutzer von unterstützenden Technologien den Rahmen betreten, um zu verstehen, was er enthält, was schwierig und verwirrend sein kann.

Das <frame>-Element ist nicht mehr Teil der HTML-Spezifikation. Die Unterstützung hierfür könnte von Browsern in Zukunft entfernt werden. Außerdem ist es für Bildschirmlesegeräte schwierig, Seiten mit <frame>-Elementen zu navigieren. Für beste Zugänglichkeit und zukünftige Wartbarkeit sollten Sie alle Seiten, die Frames verwenden, so umgestalten, dass CSS für ein ähnliches Layout verwendet wird.

Als Best Practice sollten Sie auch ein <title> für das im Rahmen eingeschlossene Dokument bereitstellen, dessen Inhalt mit dem title-Attribut des Rahmens identisch ist. (Dies setzt voraus, dass das eingeschlossene Dokument unter Ihrer Kontrolle steht; falls nicht, versuchen Sie, das title-Attribut des Rahmens mit dem Titel des Dokuments abzustimmen.) Einige Bildschirmlesegeräte ersetzen den Inhalt des title-Attributs durch den Inhalt des beiliegenden <title>. Es ist am sichersten und zugänglichsten, den gleichen Titel an beiden Stellen bereitzustellen.

Stellen Sie sicher, dass Ihre Überschriften nicht leeren Textinhalt haben und nicht versteckt sind, etwa durch CSS display:none oder aria-hidden=true. Nutzer von Bildschirmlesegeräten verlassen sich auf Überschriften, um die Struktur und den Inhalt eines Dokuments zu verstehen.

Stellen Sie außerdem sicher, dass Sie Überschriftselemente nur für echte Abschnittsüberschriften verwenden und nicht als Abkürzung, um Text hervorzuheben. Nutzer von Bildschirmlesegeräten "überfliegen" in der Regel die Überschriften einer Seite, ähnlich wie sehende Nutzer; nicht-Überschriftstext, der mit Überschriftselementen ausgezeichnet ist, kann Verwirrung stiften.

Stellen Sie sicher, dass Ihre Überschriften nicht leeren Textinhalt haben und nicht versteckt sind, etwa durch CSS display:none oder aria-hidden=true. Nutzer von Bildschirmlesegeräten verlassen sich auf Überschriften, um die Struktur und den Inhalt eines Dokuments zu verstehen. Verwenden Sie keine Überschriftselemente, um Bilder oder andere grafische Inhalte auszuzeichnen.

Stellen Sie sicher, dass <iframe>-Elemente ein title-Attribut haben, um den Inhalt des Rahmens zu beschreiben. Ohne einen Titel müssen Nutzer von unterstützenden Technologien den Rahmen betreten, um zu verstehen, was er enthält, was schwierig und verwirrend sein kann.

Als Best Practice sollten Sie auch ein <title> für das im Rahmen eingeschlossene Dokument bereitstellen, dessen Inhalt mit dem title-Attribut des Rahmens identisch ist. (Dies setzt voraus, dass das eingeschlossene Dokument unter Ihrer Kontrolle steht; falls nicht, versuchen Sie, das title-Attribut des Rahmens mit dem Titel des Dokuments abzustimmen.) Einige Bildschirmlesegeräte ersetzen den Inhalt des title-Attributs durch den Inhalt des beiliegenden <title>. Es ist am sichersten und zugänglichsten, den gleichen Titel an beiden Stellen bereitzustellen.

Stellen Sie beschreibenden Text für alle inhaltsreichen (d.h. nicht dekorativen) Bilder und bildähnlichen Elemente bereit. Dazu gehören SVG-Bilder, <img>, <canvas>, <map> und <area>-Elemente sowie <input>-Elemente, bei denen type=image und <object>-Elemente, bei denen der type mit image/ beginnt. Der übliche Weg, dies zu tun, ist mit dem alt-Attribut. Achten Sie darauf, dass die Beschreibung vermittelt, was auf dem Bild zu sehen ist.

Wenn ein Element für Nutzer zur Interaktion gedacht ist, sollte es ein Label haben. Zu den interaktiven Elementen gehören Links (<a>), Formularelemente, Schaltflächen und jedes Element, das über einen Maus- oder Tastatur-Handler verfügt. Die Art, ein Element zu beschriften, hängt von seinem Typ ab: Für Formularelemente verwenden Sie ein <label>; für Links, Schaltflächen und klickbare Elemente bietet der Textinhalt des Elements typischerweise das Label. Wenn keine andere Option existiert, um ein Element zu beschriften, verwenden Sie das aria-label-Attribut.

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

In diesem Beispiel gibt das label-Attribut der <optgroup>-Elemente 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 Werkzeugleiste in einer Webanwendung unter Verwendung der ARIA toolbar-Rolle definieren, müssen Sie das aria-label-Attribut verwenden, um jede zu beschriften, sodass sie von unterstützenden Technologien beschrieben werden kann. Es ist eine gute Praxis, eine Werkzeugleiste auch dann zu beschriften, wenn es pro Seite nur eine gibt.

• W3C ARIA toolbar example

1.1.1 Nicht-Text-Inhalt (A)

Alle nicht-textlichen Inhalte, die dem Nutzer präsentiert werden, haben eine Textalternative, die denselben Zweck erfüllt, außer in den im obigen Link aufgeführten Situationen.

2.4.4 Link-Zweck (Im Kontext) (A)

Der Zweck jedes Links kann allein aus dem Linktext oder aus dem Linktext zusammen mit seinem programmgesteuert ermittelten Linkkontext bestimmt werden, außer wenn der Zweck des Links allgemein für die Nutzer unklar wäre.

2.4.9 Link-Zweck (Nur Link) (AAA)

Ein Mechanismus ist verfügbar, um den Zweck jedes Links allein aus dem Linktext erkennbar zu machen, außer wenn der Zweck des Links allgemein für die Nutzer unklar wäre.