4. „WAI-ARIA, the Accessible Rich Internet
Applications Suite, defines a way to make
Web content and Web applications more
accessible to people with disabilities. It
especially helps with dynamic content and
advanced user interface controls
developed with Ajax, HTML, JavaScript,
and related technologies.“
http://www.w3.org/WAI/intro/aria.php
9. Dynamischer Content
Für Screenreader „unsichtbare“ Updates
…nur Teile der Seite werden per AJAX
aktualisiert
User werden über Änderungen auf der Seite
nicht informiert
10. Dynamischer Content
Für Screenreader „unsichtbare“ Updates
…nur Teile der Seite werden per AJAX
aktualisiert
User werden über Änderungen auf der Seite
nicht informiert
AJAX ist in Web-Applikationen aber
mittlerweile Standard, also was tun?
11. „aria-live“
<p aria-live="polite">
Magic happens here!
</p>
Andere Werte der „aria-live“-Eigenschaft sind
„none“ und „assertive“. Quasi die Priorität,
mit der (AJAX-)Aktualisierungen dem User
mitgeteilt werden.
30. Accessibility-Probleme
Die Rolle/Aufgabe ist assistiven
Technologien nicht ersichtlich
Status und Eigenschaften sind assistiven
Technologien nicht zugänglich
Aktualisierungen werden nicht mitgeteilt
31. Accessibility-Probleme
Die Rolle/Aufgabe ist assistiven
Technologien nicht ersichtlich
Status und Eigenschaften sind assistiven
Technologien nicht zugänglich
Aktualisierungen werden nicht mitgeteilt
Probleme mit Tastaturnavigation
34. Tabindex für alle
bisher konnten nur
http://www.flickr.com/photos/alykat/40078437/
manche HTML-Elemente
per Tastatur den Fokus
bekommen
(„durchtabben“)
35. Tabindex für alle
bisher konnten nur
http://www.flickr.com/photos/alykat/40078437/
manche HTML-Elemente
per Tastatur den Fokus
bekommen
(„durchtabben“)
mit WAI-ARIA wird das
tabindex-Attribut auf alle
sichtbaren Elemente
erweitert
40. Rollen-Attribute
ARIA führt das „role“-Attribut ein
bestehende HTML-Elemente…
…erweitert mit neuen Eigenschaften („Rollen“)
Verhalten von „Widgets“ wird weiterhin per
JavaScript gesteuert
61. Dokument-Landmarken
fungieren als „Wegweiser“ im Dokument
beschreiben die „Rollen“ der Sektionen
helfen Nutzern assistiver Technologien die
Struktur eines Dokuments schneller zu
erfassen
67. Danke für die
Aufmerksamkeit
Stefan Walter
Diese Präsentation steht unter der
stefan@hessendscher.de
Attribution-Share Alike 3.0
twitter.com/hessendscher
Notas del editor
- Definition von der W3-Site
- abstraktes mit Leben f&#xFC;llen
- Aufbau in der Pr&#xE4;sentation: Beispiel aus der ARIA-Spezifikation, Codebeispiel, Beispiel von Screenreadern vorgelesen
- Gegen&#xFC;berstellung: Formular -> Absenden -> Neue Seite mit Ergebnis
- Klick auf Link -> Request -> neue Seite
- mit AJAX: Interaktion -> &#x201E;stiller&#x201C; Request -> Update eines Bereichs der Seite
- Bsp. Chat-Applikation, Nutzer kann &#xFC;ber Updates informiert werden, ohne dass er das Eingabefeld verl&#xE4;sst (&#x201E;fokussiert&#x201C;)
- Stichwort &#x201E;Desktop-like Experience&#x201C;, Komfort von Desktop-Anwendungen ohne st&#xE4;ndiges Neuladen
- Bsp. Chat-Applikation, Nutzer kann &#xFC;ber Updates informiert werden, ohne dass er das Eingabefeld verl&#xE4;sst (&#x201E;fokussiert&#x201C;)
- Stichwort &#x201E;Desktop-like Experience&#x201C;, Komfort von Desktop-Anwendungen ohne st&#xE4;ndiges Neuladen
- Bsp. Chat-Applikation, Nutzer kann &#xFC;ber Updates informiert werden, ohne dass er das Eingabefeld verl&#xE4;sst (&#x201E;fokussiert&#x201C;)
- Stichwort &#x201E;Desktop-like Experience&#x201C;, Komfort von Desktop-Anwendungen ohne st&#xE4;ndiges Neuladen
- Bsp. Chat-Applikation, Nutzer kann &#xFC;ber Updates informiert werden, ohne dass er das Eingabefeld verl&#xE4;sst (&#x201E;fokussiert&#x201C;)
- Stichwort &#x201E;Desktop-like Experience&#x201C;, Komfort von Desktop-Anwendungen ohne st&#xE4;ndiges Neuladen
Gibt noch einige weitere Eigenschaften im Zusammenhang mit Live-Regionen: aria-atomic, aria-busy, aria-relevant
- in HTML4: Links u. Formularelemente (a, area, button, input, object, select und textarea)
- in JS-Widgets aber bspw. <img>-Elemente als &#x201E;Ausl&#xF6;ser&#x201C; (Stichwort: Slider)
- WAI-ARIA macht nun alle sichtbaren Elemente f&#xFC;r die Tastatur erreichbar
- in HTML4: Links u. Formularelemente (a, area, button, input, object, select und textarea)
- in JS-Widgets aber bspw. <img>-Elemente als &#x201E;Ausl&#xF6;ser&#x201C; (Stichwort: Slider)
- WAI-ARIA macht nun alle sichtbaren Elemente f&#xFC;r die Tastatur erreichbar
- bisher schon m&#xF6;glich: durch &#xDC;berschriften springen
- h&#xF6;rt sich erstmal komisch an, aber entspricht menschlichen Gewohnheiten -> &#x201E;Scannen&#x201C; von Text
- jetzt deutlich bessere Granularit&#xE4;t und Information &#xFC;ber Struktur m&#xF6;glich
- bisher schon m&#xF6;glich: durch &#xDC;berschriften springen
- h&#xF6;rt sich erstmal komisch an, aber entspricht menschlichen Gewohnheiten -> &#x201E;Scannen&#x201C; von Text
- jetzt deutlich bessere Granularit&#xE4;t und Information &#xFC;ber Struktur m&#xF6;glich
- bisher schon m&#xF6;glich: durch &#xDC;berschriften springen
- h&#xF6;rt sich erstmal komisch an, aber entspricht menschlichen Gewohnheiten -> &#x201E;Scannen&#x201C; von Text
- jetzt deutlich bessere Granularit&#xE4;t und Information &#xFC;ber Struktur m&#xF6;glich
Weitere Rollen: banner, article, complementary, contentinfo, search, &#x2026;
Weitere Rollen: banner, article, complementary, contentinfo, search, &#x2026;