HTML5 und Barrierefreiheit
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 Web Design 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 Regionen
Bedeutung von Regionen
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.
wfheader-Bereich
wf
HTML5 Regionen und ARIA Landmark Roles
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 |
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 Screen Reader interpretieren diese Kennzeichnungen immer besser und bieten Funktionalitäten zur gezielteren Navigation zu diesen Sektionen.
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.
Screen Readerunterstützung fürHTML5
Ich habe eine Testdatei für die Unterstützung von HTML5 – Sektionen durch Screen Reader erstellt und mit der aktuellen Version des Screen Readers Jaws 16.0 im Internet Explorer 11 getestet (Stand August 2015). Hier meine Ergebnisse:
Legende zur folgenden Tabelle
- Eine Sektion ist für den Screen Reader wahrnehmbar, wenn die semantische Funktion vorgelesen wird.
- Eine Sektion ist für den Screen Reader 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 Screen Readern 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 Screen Reader 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 Screen Reader weiter, auch wenn diese nicht aktuell sind.
Folgende HTML5-Sections können für aktuelle Screen Readern 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 Screen Reader 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 Screen Reader besser ist als die Unterstützung von HTML5-SECTIONS.