Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Einführung in WAI-ARIA

6.159 Aufrufe

Veröffentlicht am

Kurze Einführung in WAI-ARIA

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×