Your SlideShare is downloading. ×
Einführung in WAI-ARIA
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Einführung in WAI-ARIA

5,195
views

Published on

Kurze Einführung in WAI-ARIA

Kurze Einführung in WAI-ARIA

Published in: Technology

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,195
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
26
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • - Definition von der W3-Site
    - abstraktes mit Leben füllen
    - Aufbau in der Präsentation: Beispiel aus der ARIA-Spezifikation, Codebeispiel, Beispiel von Screenreadern vorgelesen
  • - Gegenüberstellung: Formular -> Absenden -> Neue Seite mit Ergebnis
    - Klick auf Link -> Request -> neue Seite
    - mit AJAX: Interaktion -> „stiller“ Request -> Update eines Bereichs der Seite
  • - Bsp. Chat-Applikation, Nutzer kann über Updates informiert werden, ohne dass er das Eingabefeld verlässt („fokussiert“)
    - Stichwort „Desktop-like Experience“, Komfort von Desktop-Anwendungen ohne ständiges Neuladen
  • - Bsp. Chat-Applikation, Nutzer kann über Updates informiert werden, ohne dass er das Eingabefeld verlässt („fokussiert“)
    - Stichwort „Desktop-like Experience“, Komfort von Desktop-Anwendungen ohne ständiges Neuladen
  • - Bsp. Chat-Applikation, Nutzer kann über Updates informiert werden, ohne dass er das Eingabefeld verlässt („fokussiert“)
    - Stichwort „Desktop-like Experience“, Komfort von Desktop-Anwendungen ohne ständiges Neuladen
  • - Bsp. Chat-Applikation, Nutzer kann über Updates informiert werden, ohne dass er das Eingabefeld verlässt („fokussiert“)
    - Stichwort „Desktop-like Experience“, Komfort von Desktop-Anwendungen ohne stä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 „Auslöser“ (Stichwort: Slider)
    - WAI-ARIA macht nun alle sichtbaren Elemente fü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 „Auslöser“ (Stichwort: Slider)
    - WAI-ARIA macht nun alle sichtbaren Elemente für die Tastatur erreichbar
  • - bisher schon möglich: durch Überschriften springen
    - hört sich erstmal komisch an, aber entspricht menschlichen Gewohnheiten -> „Scannen“ von Text
    - jetzt deutlich bessere Granularität und Information über Struktur möglich
  • - bisher schon möglich: durch Überschriften springen
    - hört sich erstmal komisch an, aber entspricht menschlichen Gewohnheiten -> „Scannen“ von Text
    - jetzt deutlich bessere Granularität und Information über Struktur möglich
  • - bisher schon möglich: durch Überschriften springen
    - hört sich erstmal komisch an, aber entspricht menschlichen Gewohnheiten -> „Scannen“ von Text
    - jetzt deutlich bessere Granularität und Information über Struktur möglich
  • Weitere Rollen: banner, article, complementary, contentinfo, search, …
  • Weitere Rollen: banner, article, complementary, contentinfo, search, …
  • Transcript

    • 1. WAI-ARIA (…was ist das denn nun schon wieder?)
    • 2. W A I A R I A
    • 3. Web Accessbility Initiative Accessible Rich Internet Applications
    • 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
    • 5. Dynamic Content http://www.flickr.com/photos/nickwheeleroz/2166114756/
    • 6. Dynamischer Content
    • 7. Dynamischer Content Für Screenreader „unsichtbare“ Updates
    • 8. Dynamischer Content Für Screenreader „unsichtbare“ Updates …nur Teile der Seite werden per AJAX aktualisiert
    • 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.
    • 12. „aria-live“-Beispiel Beispiel von Martin Kliehm (@kliehm)
    • 13. „aria-live“-Beispiel Beispiel von Martin Kliehm (@kliehm)
    • 14. Advanced UI controls
    • 15. HTML-Formulare Relativ limitiertes Set an interaktiven Elementen.
    • 16. …was man eigentlich will:
    • 17. …was man eigentlich will: Tree
    • 18. …was man eigentlich will: Slider Tree
    • 19. …was man eigentlich will: Slider Tabs Tree
    • 20. …was man eigentlich will: Slider Tabs mehr Tree Zustände
    • 21. …was man eigentlich will: Slider Tabs mehr Accordeon Tree Zustände
    • 22. …was man eigentlich will: Slider Tabs mehr Accordeon Tree Zustände …und noch einiges mehr :)
    • 23. …was man gemacht hat:
    • 24. …was man gemacht hat: bestehende HTML-Elemente genommen…
    • 25. …was man gemacht hat: bestehende HTML-Elemente genommen… …ihnen per JavaScript „Leben eingehaucht“
    • 26. …was man gemacht hat: bestehende HTML-Elemente genommen… …ihnen per JavaScript „Leben eingehaucht“ …und so andere UI-Controls imitiert („Widgets“)
    • 27. Accessibility-Probleme
    • 28. Accessibility-Probleme Die Rolle/Aufgabe ist assistiven Technologien nicht ersichtlich
    • 29. Accessibility-Probleme Die Rolle/Aufgabe ist assistiven Technologien nicht ersichtlich Status und Eigenschaften sind assistiven Technologien nicht zugänglich
    • 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
    • 32. http://www.flickr.com/photos/gemmataylor/2907113624/ WAI-ARIA to the rescue…
    • 33. Tabindex für alle http://www.flickr.com/photos/alykat/40078437/
    • 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
    • 36. Rollen-Attribute
    • 37. Rollen-Attribute ARIA führt das „role“-Attribut ein
    • 38. Rollen-Attribute ARIA führt das „role“-Attribut ein bestehende HTML-Elemente…
    • 39. Rollen-Attribute ARIA führt das „role“-Attribut ein bestehende HTML-Elemente… …erweitert mit neuen Eigenschaften („Rollen“)
    • 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
    • 41. Slider
    • 42. Slider <input type="image" src="thumb.gif" alt="Effectiveness" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42" aria-valuetext="42 percent" aria-labelledby="leffective">
    • 43. Slider – Beispiel Beispiel von Martin Kliehm (@kliehm)
    • 44. Slider – Beispiel Beispiel von Martin Kliehm (@kliehm)
    • 45. Tabs
    • 46. Tabs <div id="tabpanel_1" class="tabpanel"> <ul id="tablist_1" role="tablist"> <li id="tab_1" role="tab" tabindex="0">Crust</li> <li id="tab_2" role="tab" tabindex="-1">Veges</li> <li id="tab_3" role="tab" tabindex="-1">Carnivore</li> <li id="tab_4" role="tab" tabindex="-1">Delivery</li> </ul> <div id="panel_1" role="tabpanel" aria-labelledby="tab_1" aria-hidden="false" style="display: none">…</div> <div id="panel_2" role="tabpanel" aria-labelledby="tab_2" aria-hidden="true" style="display: none">…</div> [...] </div>
    • 47. Tabs – Beispiel Beispiel von Martin Kliehm (@kliehm)
    • 48. Tabs – Beispiel Beispiel von Martin Kliehm (@kliehm)
    • 49. Tree
    • 50. Tree <div id="tree"role="tree" tabindex="-1" class="tree"> <span tabindex="0" role="treeitem" aria-expanded="true" id="veggie">Veggies</span> <div role="group" class="group" id="veggieGroup"> <span tabindex="-1" role="treeitem" aria-expanded="true">Green</span> <div role="group" id="greenGroup"> <span tabindex="-1" role="treeitem" class="treeitem">Asparagus</span> <span tabindex="-1" role="treeitem" class="treeitem">Kale</span> [...] </div> [...] </div> [...] </div>
    • 51. Tree – Beispiel Beispiel von Martin Kliehm (@kliehm)
    • 52. Tree – Beispiel Beispiel von Martin Kliehm (@kliehm)
    • 53. Required Fields
    • 54. Required Fields <form action="post"> <label for="firstName">First name:</label> <input id="firstName" type="text" aria-required="true" /><br/> <label for="lastName">Last name:</label> <input id="lastName" type="text" aria-required="true" /><br/> <label for="streetAddress">Street address:</label> <input id="streetAddress" type="text" /> </form>
    • 55. Required – Beispiel Beispiel von Martin Kliehm (@kliehm)
    • 56. Required – Beispiel Beispiel von Martin Kliehm (@kliehm)
    • 57. http://www.flickr.com/photos/tomsen/2899175607/ Document Landmarks
    • 58. Dokument-Landmarken
    • 59. Dokument-Landmarken fungieren als „Wegweiser“ im Dokument
    • 60. Dokument-Landmarken fungieren als „Wegweiser“ im Dokument beschreiben die „Rollen“ der Sektionen
    • 61. Dokument-Landmarken fungieren als „Wegweiser“ im Dokument beschreiben die „Rollen“ der Sektionen helfen Nutzern assistiver Technologien die Struktur eines Dokuments schneller zu erfassen
    • 62. Beispiel
    • 63. Beispiel <div role="banner"> ... </div> <div role="navigation"> ... </div> <div role="main"> ... </div>
    • 64. Beispiel
    • 65. Beispiel
    • 66. Fragen? Fragen!
    • 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