Einführung in WAI-ARIA

5,784 views
5,690 views

Published on

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,784
On SlideShare
0
From Embeds
0
Number of Embeds
233
Actions
Shares
0
Downloads
28
Comments
0
Likes
7
Embeds 0
No embeds

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, …
  • Einführung in WAI-ARIA

    1. 1. WAI-ARIA (…was ist das denn nun schon wieder?)
    2. 2. W A I A R I A
    3. 3. Web Accessbility Initiative Accessible Rich Internet Applications
    4. 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. 5. Dynamic Content http://www.flickr.com/photos/nickwheeleroz/2166114756/
    6. 6. Dynamischer Content
    7. 7. Dynamischer Content Für Screenreader „unsichtbare“ Updates
    8. 8. Dynamischer Content Für Screenreader „unsichtbare“ Updates …nur Teile der Seite werden per AJAX aktualisiert
    9. 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. 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. 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. 12. „aria-live“-Beispiel Beispiel von Martin Kliehm (@kliehm)
    13. 13. „aria-live“-Beispiel Beispiel von Martin Kliehm (@kliehm)
    14. 14. Advanced UI controls
    15. 15. HTML-Formulare Relativ limitiertes Set an interaktiven Elementen.
    16. 16. …was man eigentlich will:
    17. 17. …was man eigentlich will: Tree
    18. 18. …was man eigentlich will: Slider Tree
    19. 19. …was man eigentlich will: Slider Tabs Tree
    20. 20. …was man eigentlich will: Slider Tabs mehr Tree Zustände
    21. 21. …was man eigentlich will: Slider Tabs mehr Accordeon Tree Zustände
    22. 22. …was man eigentlich will: Slider Tabs mehr Accordeon Tree Zustände …und noch einiges mehr :)
    23. 23. …was man gemacht hat:
    24. 24. …was man gemacht hat: bestehende HTML-Elemente genommen…
    25. 25. …was man gemacht hat: bestehende HTML-Elemente genommen… …ihnen per JavaScript „Leben eingehaucht“
    26. 26. …was man gemacht hat: bestehende HTML-Elemente genommen… …ihnen per JavaScript „Leben eingehaucht“ …und so andere UI-Controls imitiert („Widgets“)
    27. 27. Accessibility-Probleme
    28. 28. Accessibility-Probleme Die Rolle/Aufgabe ist assistiven Technologien nicht ersichtlich
    29. 29. Accessibility-Probleme Die Rolle/Aufgabe ist assistiven Technologien nicht ersichtlich Status und Eigenschaften sind assistiven Technologien nicht zugänglich
    30. 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. 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. 32. http://www.flickr.com/photos/gemmataylor/2907113624/ WAI-ARIA to the rescue…
    33. 33. Tabindex für alle http://www.flickr.com/photos/alykat/40078437/
    34. 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. 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. 36. Rollen-Attribute
    37. 37. Rollen-Attribute ARIA führt das „role“-Attribut ein
    38. 38. Rollen-Attribute ARIA führt das „role“-Attribut ein bestehende HTML-Elemente…
    39. 39. Rollen-Attribute ARIA führt das „role“-Attribut ein bestehende HTML-Elemente… …erweitert mit neuen Eigenschaften („Rollen“)
    40. 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. 41. Slider
    42. 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. 43. Slider – Beispiel Beispiel von Martin Kliehm (@kliehm)
    44. 44. Slider – Beispiel Beispiel von Martin Kliehm (@kliehm)
    45. 45. Tabs
    46. 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. 47. Tabs – Beispiel Beispiel von Martin Kliehm (@kliehm)
    48. 48. Tabs – Beispiel Beispiel von Martin Kliehm (@kliehm)
    49. 49. Tree
    50. 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. 51. Tree – Beispiel Beispiel von Martin Kliehm (@kliehm)
    52. 52. Tree – Beispiel Beispiel von Martin Kliehm (@kliehm)
    53. 53. Required Fields
    54. 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. 55. Required – Beispiel Beispiel von Martin Kliehm (@kliehm)
    56. 56. Required – Beispiel Beispiel von Martin Kliehm (@kliehm)
    57. 57. http://www.flickr.com/photos/tomsen/2899175607/ Document Landmarks
    58. 58. Dokument-Landmarken
    59. 59. Dokument-Landmarken fungieren als „Wegweiser“ im Dokument
    60. 60. Dokument-Landmarken fungieren als „Wegweiser“ im Dokument beschreiben die „Rollen“ der Sektionen
    61. 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. 62. Beispiel
    63. 63. Beispiel <div role="banner"> ... </div> <div role="navigation"> ... </div> <div role="main"> ... </div>
    64. 64. Beispiel
    65. 65. Beispiel
    66. 66. Fragen? Fragen!
    67. 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

    ×