Zweiter Blick: HTML 5

BarrierefreiheitDarstellungsoptionen



HTML5 und Barrierefreiheit

HTML5

Bedeutung von HTML5

Die aktuelle Kernsprache zur Kennzeichnung von Webelementen auf neuen Webseiten ist HTML5. Ältere Varianten, wie HTML 4.01 oder XHTML 1.0 sind obsolet.

Für das Barrierefreie Webdesign bietet HTML5 eine erweiterte Semantik für Seitenbereiche. Das bedeutet, dass etwa für Screen Reader implizite visuelle Bedeutungen von Seitenbereichen technisch vermittelt werden können.

HTML5

HTML5 Regionen und ARIA Landmark Roles

Die Funktionalitäten von Seitenbereichen am oberen, unteren, linken und rechten Bildschirmrand sind visuell spontan verständlich, ebenso wie Linklisten, also Navigationsbereiche. Dies gilt zumindest für Webauftritte mit einem verständlichem visuellen Design. Damit solche Seitenbereiche mit einer intuitiven visuellen Verständlichkeit ihre Bedeutsamkeit auch für Screen Reader offenbaren können mit HTML5 einzelne Funktionalitäten semantisch gekennzeichnet werden.

Die HTML5-Elemente zur Kennzeichnung von seitenbereichen korrelieren mit Landmark Roles , wenn deren Bezeichnungen unglücklicherweise auch nicht übereinstimmen. Wo ein HTML5 Element für einen Seitenbereich zur Verfügung steht, braucht es in der Regel keines ergänzenden Einsatzes des korrelierenden ARIA-Attributs.



Ein wenig über den Daumen gepeilt können und sollen HTML5 Sections in folgender Weise in Kombination mit WAI-ARIA Landmark Roles verwendet werden:

HTML5 Element Typische Landmark Role Landmark Role Erfordernis
<address> keine keines
<article> keine keines
<aside> complementary möglich
<footer> contentinfo empfohlen
<header> banner empfohlen
<nav> navigation möglich
<section> keine keines
HTML5

Vorteile von HTML5

Die HTML5 Spezifikation bietet im Vergleich zu älteren HTML-Versionen eine erweiterte semantische Kennzeichnung von Seitenbereichen und Funktionalitäten im Markup. Der HTML-Code wird damit übersichtlicher. Die verbesserte semantische Übersichtlichkeit kann aber auch von Assistierenden Technologien genütz werden.

Moderne Screenreader interpretieren diese Kennzeichnungen immer besser und bieten Funktionalitäten zur gezielteren Navigation zu diesen Sektionen.

HTML5

Nachteile von HTML5

Der W3C HTML-Validator bewertet die Verwendung von HTML5 noch als experimentell (Stand August 2015). Die Unterstützung durch ältere Browser oder Assistierende Technologien kann ein Problem darstellen. Technologien zur Rückwärtskompatibilität sollten also entsprechend der jeweiligen Zielgruppe eingesetzt werden.

HTML5

Screen Readerunterstützung fürHTML5

Ich habe eine Testdatei für die Unterstützung von HTML5 – Sektionen durch Screenreader erstellt und mit der aktuellen Version des Screenreaders Jaws 16.0 im Internet Explorer 11 getestet (Stand August 2015). Hier meine Ergebnisse:

Legende zur folgenden Tabelle

  • Eine Sektion ist für den Screenreader wahrnehmbar, wenn die semantische Funktion vorgelesen wird.
  • Eine Sektion ist für den Screenreader bedienbar, wenn sie für Navigationsfunktionalitäten zugänglich ist.

Jaws 16 und HTML5-Bereiche

HTML5 Bereich Wahrnehmung Bedienbarkeit
<address> keine keine
<article> Artikel navigierbar
<aside> Ergänzung navigierbar
<footer> keine keine
<header> keine keine
<nav> Navigation Region navigierbar
<section> keine keine

Mitmachen

Sie können mir gerne Ihre Testergebnisse mit anderen Screenreadern oder Jaws-Versionen oder Browsern zusenden. Ich veröffentliche auf Wunsch Ihre Testergebnisse, sofern sie plausibel erscheinen. Ihre Testergebnisse erscheinen unter Angabe von Namen und E-Mail Adresse. Fügen Sie diese daher bitte Ihrem Testprotokoll bei.

HTML5 und WAI ARIA Landmark Roles

Die semantischen Informationen, die ein Screenreader aus HTML5-Elementen und WAI-ARIA Landmark Roles generiert, überschneiden sich teilweise. Nach unserem derzeitigen Wissensstand empfiehlt es sich, sicherheitshalber trotzdem beide Varianten zur semantischen Kennzeichnung in Kombination zu verwenden. Ältere Browser, die HTML5 noch nicht unterstützen, geben dadurch unserer Erfahrung nach schon WAI-ARIA Anweisungen an Screenreader weiter, auch wenn diese nicht aktuell sind.

Folgende HTML5-Sections können für aktuelle Screenreadern ohne zusätzliche WAI-ARIA-Attribute eingesetzt werden:

  • <article>
  • <aside>
  • <nav>

Alle anderen HTML5-Sektionen müssen mit einer entsprechenden ARIA-Landmark-Role versehen werden, damit sie für Screenreader semantisch wahrnehmbar werden.

Anmerkung

Wenn HTML5-Sections zusätzlich mit passenden ARIA-Landmark Roles versehen sind, kommt bei der W3C HTML-Validator die Warnung, dass dis nicht notwendig ist (Stand August 2015). Wir verwenden die Landmark Roles trotzdem vorerst experimentell, weil eventuell die Unterstützung von ARIA-Landmark Roles durch Screenreader besser ist als die Unterstützung von HTML5-SECTIONS.