Wai Aaria

WAI-ARIA

Barrierefreies Internet für ALLE

Berlin, 25. April 2016, von Aykut Sensoy

WAI-ARIA

2

Einstieg

Quelle: Peter Morville's Honeycomb for UX

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

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-ARIAhttps://www.w3.org/WAI/intro/ariahttps://developer.mozilla.org/de/docs/Web/Barrierefreiheit/ARIA

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 Baumstruktur 1)

¾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

WAI-ARIA

6

ARIA Roles

Quelle: http://dylanb.github.io/periodic-aria-roles.html

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 beschreiben den aktuellen Interaktionsstatus eines Elements

Beispiele für Zustandsänderungen:§ aria-checked

§ aria-grabbed

§ Code-Beispiel: <div role="menuitem" aria-hidden="true">

7

ARIA Attributes

WAI-ARIA

8

ARIA Attributes

Quelle: http://dylanb.github.io/periodic-aria-attributes.html

WAI-ARIA

¾Mythos: Redundanz 1)

<main role="main">

¾Wo immer es geht sollten semantische HTML-Tags und -Attribute

verwendet werden

¾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-mappings3) https://www.w3.org/TR/html-aria/#rules-wd

WAI-ARIA

¾Definiere keine ARIA roles an semantische Tagsschlecht: <article role="article">

besser: <article> à first aria rule 1)

¾Verändere nicht die native Semantikschlecht: <a role="button">

besser: <button> à second aria rule 1)

¾Mißbrauche keine HTML-Tagsschlecht: <div role="navigation">

besser: <nav>

¾Ein HTML-Element kann nur eine ARIA role habenschlecht: <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

WAI-ARIA

¾Definiere kein ARIA role="presentation" oder aria-hidden="true" auf sichtbare

fokussierbare Elementeschlecht: <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 habenschlecht: <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

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

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

WAI-ARIA

Das sind die technischen Anforderungen an das Formular:

14

ARIA good practices - Semantische Transformation

WAI-ARIA

Das sind die technischen Einschränkungen des Formulars:

15


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


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


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

Wai Aaria

Internet

Transcript of Wai Aaria