WAI-ARIA steht für Web Accessibility Initiative - Accessible Rich Internet Applications. WAI-ARIA ist eine Technologie die eine Anreicherung von HTML-Tags mit fehlenden semantischen Informationen zum Erfassen der Inhalte, ihrer Abhängigkeiten, ihres Zusammenspiels und ihres aktuellen Zustands ermöglicht. WAI-ARIA dient vor allem der Erhöhung der Zugänglichkeit für dynamischen Content und UI Komponenten, die mit JavaScript/AJAX umgesetzt worden sind. WAI-ARIA wird insbesondere von Assistive Technologienwie Screen Reader unterstützt und erleichtert ebenso die Tastatur-Navigation für Menschen mit Behinderung.

1. WAI-ARIA
Barrierefreies Internet für ALLE
Berlin, 25. April 2016, vonAykut Sensoy

2. WAI-ARIA
2
Einstieg
Quelle: Peter Morville's Honeycomb for UX

3. WAI-ARIA
¾ Was ist ARIA?
¾ ARIA Roles
¾ ARIA Attributes
§ ARIA States
§ ARIA Properties
¾ Default Implicit ARIA Semantics
¾ ARIA bad practices
¾ ARIA good practices
§ Semantische Anreicherung von bedeutungslosen Tags
§ Semantische Transformation
§ Tastatur-Navigation
3
Agenda

4. WAI-ARIA
¾ Web Accessibility Initiative - Accessible Rich Internet Applications 1)
¾ WAI-ARIA 1.0 ist seit 20. März 2014 eine W3C Recommendation
¾ Erhöhung der Zugänglichkeit für dynamischen Content und UI Komponenten,
die mit JavaScript/AJAX umgesetzt worden sind
¾ Anreicherung von HTML-Tags mit fehlenden semantischen Informationen
zum Erfassen der Inhalte, ihrer Abhängigkeiten,
ihres Zusammenspiels und ihres aktuellen Zustands
¾ Unterstützung für Assistive Technologien
¾ Unterstützung bei der Tastatur-Navigation
¾ ARIA hat 2 Bestandteile: ARIA roles und ARIA attributes
¾ ARIA attributes werden unterteilt in properties und states
4
Was ist ARIA?
1) https://en.wikipedia.org/wiki/WAI-ARIA
https://www.w3.org/WAI/intro/aria
https://developer.mozilla.org/de/docs/Web/Barrierefreiheit/ARIA

5. WAI-ARIA
¾ARIA roles werden dem HTML Markup durch "role" Attribute hinzugefügt
¾ARIA roles beschreiben ...
... den Typ der Komponente à tab, banner, application,etc.
... die Struktur der Komponente à menu, menubar, menuitem
¾Umfangreiche Taxonomie Baumstruktur1)
¾Beispiel für Rollen:
§ presentation
§ spinbutton
§ tree, treeitem
§ Codebeispiel: <div role="tooltip">
5
ARIA Roles
1) https://www.w3.org/TR/wai-aria/rdf_model.svg

6. WAI-ARIA
6
ARIA Roles
Quelle: http://dylanb.github.io/periodic-aria-roles.html

7. WAI-ARIA
¾ARIA Properties beschreiben Charakteristiken von Komponenten
Beispiele für Eigenschaften:
§ aria-label
§ aria-sort
§ Code-Beispiel: <div role="scrollbar" aria-orientation="vertical">
¾ARIA States beschreibenden aktuellen Interaktionsstatus einesElements
Beispiele für Zustandsänderungen:
§ aria-checked
§ aria-grabbed
§ Code-Beispiel: <div role="menuitem" aria-hidden="true">
7
ARIAAttributes

8. WAI-ARIA
8
ARIAAttributes
Quelle: http://dylanb.github.io/periodic-aria-attributes.html

9. WAI-ARIA
¾Mythos: Redundanz 1)
<main role="main">
¾Wo immer es geht sollten semantischeHTML-Tags und -Attribute
verwendetwerden
¾Die ARIA Eigenschaften werden implizit vom Browser gesetzt
¾ARIA role mapping für HTML-Elemente 2)
<aside> à role="complementary"
¾Bei HTML-Tags,die keine ARIA role Zuordnung haben,kann eine
semantische Anreicherung mit ARIA stattfinden 3)
9
Default Implicit ARIA Semantics
1) https://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/
2) http://rawgit.com/w3c/aria/master/html-aam/html-aam.html#html-element-role-mappings
3) https://www.w3.org/TR/html-aria/#rules-wd

10. WAI-ARIA
¾ Definiere keine ARIA roles an semantische Tags
schlecht: <article role="article">
besser: <article> à first aria rule 1)
¾ Verändere nicht die native Semantik
schlecht: <a role="button">
besser: <button> à second aria rule 1)
¾ Mißbrauche keine HTML-Tags
schlecht: <div role="navigation">
besser: <nav>
¾ Ein HTML-Element kann nur eine ARIA role haben
schlecht: <div role="menu toolbar">
besser: <div role="toolbar">
10
ARIA Bad Practices
1) https://www.w3.org/TR/aria-in-html/#notes-on-aria-use-in-html

11. WAI-ARIA
¾ Definiere kein ARIA role="presentation" oder aria-hidden="true" auf sichtbare
fokussierbare Elemente
schlecht: <button role=presentation>
schlecht: <button aria-hidden="true">
besser: button {display: none;}
<button aria-hidden="true"> à fourth aria rule 1)
¾ Interaktive HTML-Elemente sollten eine zugängliche Bezeichnung haben
schlecht: <label>user name</label>
<input type="text" />
besser: <label for="username">user name</label>
<input type="text" id="username" /> à fifth aria rule 1)
11
ARIA Bad Practices
1) https://www.w3.org/TR/aria-in-html/#notes-on-aria-use-in-html

12. WAI-ARIA
¾ Ohne semantische Anreicherung
<div class="tb">
<ul class="tbl">
<li class="active">
<a href="#">Nachrichten</a>
</li>
<li>
<a href="#">Unterhaltung</a>
</li>
<ul>
<div class="tbp">
Hier stehen die Nachrichten
</div>
<div class="tbp">
Hier stehen Unterhaltungsthemen
</div>
</div>
12
ARIA good practices - Semantische Anreicherung von bedeutungslosen Tags

13. WAI-ARIA
¾ Mit semantischer Anreicherung
<div class="tb">
<ul class="tbl" role="tablist">
<li class="active">
<a href="#" id="tab1" role="tab" aria-controls="news"
aria-selected="true">Nachrichten</a>
</li>
<li>
<a href="#" id="tab2" role="tab"
aria-controls="gossip">Unterhaltung</a>
</li>
<ul>
<div class="tbp" id="news" role="tabpanel" aria-labelledby="tab1">
Hier stehen die Nachrichten</div>
<div class="tbp" id="gossip" role="tabpanel" aria-labelledby="tab2"
aria-hidden="true">Hier stehen Unterhaltungsthemen</div>
</div>
13
ARIA good practices - Semantische Anreicherung von bedeutungslosen Tags

14. WAI-ARIA
Das sind die technischen Anforderungen an das Formular:
14
ARIA good practices - Semantische Transformation

15. WAI-ARIA
Das sind die technischen Einschränkungen des Formulars:
15
ARIA good practices - Semantische Transformation

16. WAI-ARIA
¾ Ohne semantischer Transformation
<form class="comment">
<label for="text">Schreibe ein Kommentar:</label>
<input name="text" id="text" list="dropdown"></input>
<datalist id="dropdown">
<option value="Stefan">asv</option>
<option value="Steffen">movebox</option>
<option value="Stephanie">bild</option>
</datalist>
</form>
16
ARIA good practices - Semantische Transformation

17. WAI-ARIA
¾ Mit semantischer Transformation
<div class="comment">
<div id="label">Schreibe ein Kommentar:</div>
<div contenteditable="true" role="textbox" aria-multiline="true"
aria-labelledby="label" aria-autocomplete="list" aria-owns="dropdown"
aria-expanded="false">
<a role="presentation" href="#">@<span>movebox</span></a> Don't ignore
Accessibility! </div>
<div id="dropdown" role="listbox">
<ul role="presentation">
<li>Stefan</li><li>Steffen</li><li>Stephanie</li>
</ul>
</div></div>
17
ARIA good practices - Semantische Transformation

18. WAI-ARIA
¾ Interaktive HTML-Elemente sollten mit einer
Tastatur navigierbar sein à third aria rule
¾ tabindex für alle HTML-Tags einsetzbar
¾ tabindex="0"
Navigation nach der Reihenfolge im DOM
¾ tabindex="1"
Navigation nach der Reihenfolge der Indizes
¾ tabindex="-1"
Interaktive HTML-Elemente werden
von der Tastatur-Navigation ausgeblendet
18
ARIA good practices - Tastatur-Navigation