Tastaturbedienung mit <span> und onclick veröffentlicht in 2013

Semantik mit role

Wie einführend bereits erwähnt, verfügen Screenreader über andere Bedienkonzepte als der Browser. Zum Bedienkonzept gehören etwa die strukturelle Navigation oder das Durchreichen bestimmter Befehle an den Browser. Beispielsweise kann ein Screenreader-Nutzer einen "virtuellen" Fokus auf den unechten Linktext setzen und die Eingabetaste drücken und die dahinterliegende Funktion würde ausgelöst werden, weil der Screenreader das Drücken der Eingabetaste als "klick" an den Browser durchreicht. Allerdings müsste der Screenreader-Nutzer vorher wissen, dass es sich bei dem Text um einen Link handeln soll.

Ohne eine passende Semantik für das umschliessende SPAN-Element kann der Screenreader den Text nicht als Link identifizieren:

Der "Linktext" im Beispiel wird in einem Screenreader wie ein normaler Text behandelt; eventuell erfährt der Nutzer, dass das Element einen onclick-Event-Handler besitzt, und er könnte dann die Funktion mit der Eingabe- oder Leertaste auszulösen versuchen. Es ist aber eher davon auszugehen, dass der "Link" unerkannt bleibt und vom Nutzer als ganz normalen Text wahrgenommen wird.

Eine mögliche Lösung für die fehlende Semantik ist die Vergabe eines role-Attributs. Die role-Attribute stammen ursprünglich aus der WAI-ARIA-Spezifikation und dienen u.a. dazu, Webseiten mit mehr Semantik auszuzeichnen, da die Möglichkeiten mit HTML nur eingeschränkt gegeben sind.

Für das obige Beispiel ist der Wert link für das role-Attribut passend:

Jetzt ist der einfache, mit SPAN emulierter Link auch im Screenreader als Link identifizierbar.