Umsetzung

• 

  Grafischen Bedienelementen Alternativtexte geben

  Alternativen für Bedienelemente kann man auf verschiedene Arten und Weisen geben, je nachdem, was man als Bedienelement einsetzt. 

  1. Wenn man das Bedienelement als einfaches Bild einbindet, kann man das Alt-Attribut verwenden
  2. Wenn man die Grafik als SVG einbindet, muss man dem SVG oder dem Button drumherum ein aria-label geben. Beispiel: aria-label=”Zurück”
  3. Man kann auch aria-labelledby verwenden und einen Namen aus mehreren „IDs“ zusammenbauen. 
  4. Wenn man die Grafik über einen Icon-Font einbinde, braucht diese auch aria-label oder ein aria-labelledby

  WCAG-Technik(en) in Englisch:

  • Technik ARIA6: Objekte mit aria-label beschriften
  • Technik ARIA10: Objekte mit aria-labelledby beschriften
  • Technik ARIA 9: Mehrere Texte mit aria-labelledby verbinden
  • Technik H37: Verwendung von alt-Attributen bei img-Elementen

• 

  Image-Maps Alternativtexte geben

  Sind bei einem Bild mehrere Bildbereiche (area-Elemente) klickbar? Dann muss die gesamte Image-Map einen Alternativtext haben, der sie beschreibt, und jedes klickbare Bild in der Map einen Alternativtext haben, der das Bild und/oder das Linkziel beschreibt.

  Hier ist ein Beispiel einer Image-Map mit Alternativ-Texten

  WCAG-Technik(en) in Englisch:

  • Technik H24: Bereitstellung von Textalternativen für Image Maps

• 

  Beschriftungen für Inputfelder hinzufügen

  Inputfelder haben von sich aus keinen Namen. Darum wird einem Screenreader-User nur »Eingabefeld« vorgelesen, wenn das Input keine Beschriftung hat.

  Um dem Input einen Namen zu geben, empfehlen wir, ein Label zu nutzen und das Label per for-Attribut mit dem Feld zu verknüpfen. Das hilft auch bei dem Kriterium: 1.3.1 Info und Beziehungen (Beschriftungen von Formularelementen)

  WCAG-Technik(en) in Englisch:

  • Technik H44: Nutze Labels, um Inputfeldern eine Beschriftung zu geben

Anmerkungen

• 

  Hinweis: Alternativtexte für Logos als Bedienelemente

  Verlinkt das Logo zur Startseite? Dann empfehlen wir, dass im Logo sowohl die Firma genannt wird als auch das Ziel des Links. Beispiel: „Logo Gehirngerecht, verlinkt zur Startseite.“

  Es wird allerdings auch argumentieren, dass es bekannt ist, dass Logos zur Startseite verlinken und man deswegen auch nur „Gehirngerecht“ schreiben kann.

• 

  Hinweis: Richtiger Umgang mit SVGs

  Einem SVG, das als Bedienelement eingebunden ist, kann man auch mit einem title-Tag einen Namen geben.

  Aufgrund von teilweise schlechtem Screenreader-Support des title-Tag, sollte der Titel aber zusätzlich noch mit aria-labelledby mit dem SCG verbunden sein. Außerdem sollte das SVG noch das Attribut role=”img” haben.