• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,153
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
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