Umsetzung

• 

  Sichtbarer Text ist Teil vom zugänglichen Namen

  Manchmal möchte man Links oder Buttons für Screenreader-User verständlicher machen und den sogenannten zugänglichen Namen erweitern.

  Beispiel: Produkt-Cards mit Buttons, die »Zum Produkt« heißen. Ein Screenreader-User kann sich eine Liste von Bedienelementen ausgeben lassen. In dieser Listenansicht wäre dann nicht ersichtlich, zu welchem Produkt genau der Button führt, wenn alle nur »Zum Produkt« heißen.

  Eine Lösung: Den zugänglichen Namen per aria-label erweitern, ohne den sichtbaren Text zu ändern. <a aria-label="Zum Produkt E-Learning fürs Design">Zum Produkt</a>

  Der Screenreader liest nun: »Zum Produkt E-Learning fürs Design«, während der sichtbare Text »Zum Produkt« bleibt.

  Wichtig ist: Der sichtbare Text muss vollständig im zugänglichen Namen enthalten sein. Sonst können Personen, die Sprachsteuerung nutzen, den Button nicht über den Namen bedienen. Die Sprachsteuerung reagiert auf den zugänglichen Namen, nicht auf den sichtbaren Text.

  WCAG-Technik(en) in Englisch:

  • G208: Einbeziehung des Textes der sichtbaren Beschriftung als Teil des zugänglichen Namens

• 

  Sichtbare und unsichtbarer Name sind gleich

  Empfehlung!

  Die einfachste Technik: Sorge dafür, dass der sichtbare und der unsichtbare Text immer identisch sind. In den meisten Fällen (ca. 90 %) empfiehlt es sich, den gesamten Text direkt in den Link zu schreiben:

  <a href="...">Mehr erfahren über Barrierefreiheit</a>

  Damit umgehst du das Problem komplett und sparst dir zukünftig auch noch Pflegeaufwand. Zudem reduzierst du Fehlerquellen und machst den Link sofort für alle User verständlich.

  WCAG-Technik(en) in Englisch:

  • G211: Der zugängliche Name entspricht der sichtbaren Beschriftung

Anmerkungen

• 

  Hinweis: Versteckte Texte

  Anstatt den Text per aria-label zu erweitern, kann man auch Teile von Texten per CSS verstecken:

  <a href="produkt.html">Mehr erfahren <span class="visually-hidden">über das Produkt E-Learning fürs Design</span></a>

  Die Klasse .visually-hidden versteckt den Text visuell. Der Code dafür:

  .visually-hidden {
position: absolute !important;
inline-size: 1px !important;
block-size: 1px !important;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

  Das ist aus folgenden Gründen besser:

  • Text liegt im HTML vor und wird von Übersetzungs-Tools erfasst.
  • Wiederholungen (wie „Mehr erfahren“) am Anfang jedes aria-label werden vermieden.
  • Leichtere Pflege, weil alle Texte an einer Stelle (im Markup) liegen.