Your SlideShare is downloading. ×
0
WAI-ARIA
(…was ist das denn nun schon wieder?)
W
A
I

A
R
I
A
Web
Accessbility
Initiative

Accessible
Rich
Internet
Applications
„WAI-ARIA, the Accessible Rich Internet
Applications Suite, defines a way to make
Web content and Web applications more
ac...
Dynamic Content   http://www.flickr.com/photos/nickwheeleroz/2166114756/
Dynamischer Content
Dynamischer Content

Für Screenreader „unsichtbare“ Updates
Dynamischer Content

Für Screenreader „unsichtbare“ Updates

…nur Teile der Seite werden per AJAX
aktualisiert
Dynamischer Content

Für Screenreader „unsichtbare“ Updates

…nur Teile der Seite werden per AJAX
aktualisiert

User werde...
Dynamischer Content

Für Screenreader „unsichtbare“ Updates

…nur Teile der Seite werden per AJAX
aktualisiert

User werde...
„aria-live“

 <p aria-live="polite">
      Magic happens here!
 </p>

Andere Werte der „aria-live“-Eigenschaft sind
„none“...
„aria-live“-Beispiel




         Beispiel von Martin Kliehm (@kliehm)
„aria-live“-Beispiel




         Beispiel von Martin Kliehm (@kliehm)
Advanced UI
  controls
HTML-Formulare




Relativ limitiertes Set an interaktiven Elementen.
…was man eigentlich will:
…was man eigentlich will:




 Tree
…was man eigentlich will:

        Slider




 Tree
…was man eigentlich will:

        Slider
                   Tabs




 Tree
…was man eigentlich will:

         Slider
                   Tabs




         mehr
 Tree   Zustände
…was man eigentlich will:

         Slider
                     Tabs




         mehr      Accordeon
 Tree   Zustände
…was man eigentlich will:

              Slider
                                Tabs




              mehr            Acc...
…was man gemacht hat:
…was man gemacht hat:


bestehende HTML-Elemente genommen…
…was man gemacht hat:


bestehende HTML-Elemente genommen…

…ihnen per JavaScript „Leben eingehaucht“
…was man gemacht hat:


bestehende HTML-Elemente genommen…

…ihnen per JavaScript „Leben eingehaucht“

…und so andere UI-C...
Accessibility-Probleme
Accessibility-Probleme



Die Rolle/Aufgabe ist assistiven
Technologien nicht ersichtlich
Accessibility-Probleme



Die Rolle/Aufgabe ist assistiven
Technologien nicht ersichtlich
Status und Eigenschaften sind as...
Accessibility-Probleme



Die Rolle/Aufgabe ist assistiven
Technologien nicht ersichtlich
Status und Eigenschaften sind as...
Accessibility-Probleme



Die Rolle/Aufgabe ist assistiven
Technologien nicht ersichtlich
Status und Eigenschaften sind as...
http://www.flickr.com/photos/gemmataylor/2907113624/
WAI-ARIA to the rescue…
Tabindex für alle




http://www.flickr.com/photos/alykat/40078437/
Tabindex für alle

bisher konnten nur




                         http://www.flickr.com/photos/alykat/40078437/
manche HTM...
Tabindex für alle

bisher konnten nur




                             http://www.flickr.com/photos/alykat/40078437/
manche...
Rollen-Attribute
Rollen-Attribute

ARIA führt das „role“-Attribut ein
Rollen-Attribute

ARIA führt das „role“-Attribut ein

bestehende HTML-Elemente…
Rollen-Attribute

ARIA führt das „role“-Attribut ein

bestehende HTML-Elemente…

…erweitert mit neuen Eigenschaften („Roll...
Rollen-Attribute

ARIA führt das „role“-Attribut ein

bestehende HTML-Elemente…

…erweitert mit neuen Eigenschaften („Roll...
Slider
Slider


<input type="image"
src="thumb.gif"
alt="Effectiveness"
role="slider"
aria-valuemin="0"
aria-valuemax="100"
aria-...
Slider – Beispiel




           Beispiel von Martin Kliehm (@kliehm)
Slider – Beispiel




           Beispiel von Martin Kliehm (@kliehm)
Tabs
Tabs



<div id="tabpanel_1" class="tabpanel">
       <ul id="tablist_1" role="tablist">
           <li id="tab_1" role="t...
Tabs – Beispiel



          Beispiel von Martin Kliehm (@kliehm)
Tabs – Beispiel



          Beispiel von Martin Kliehm (@kliehm)
Tree
Tree

<div id="tree"role="tree" tabindex="-1" class="tree">
    <span tabindex="0" role="treeitem"
           aria-expande...
Tree – Beispiel




     Beispiel von Martin Kliehm (@kliehm)
Tree – Beispiel




     Beispiel von Martin Kliehm (@kliehm)
Required Fields
Required Fields



<form action="post">
    <label for="firstName">First name:</label>
    <input id="firstName" type="tex...
Required – Beispiel




         Beispiel von Martin Kliehm (@kliehm)
Required – Beispiel




         Beispiel von Martin Kliehm (@kliehm)
http://www.flickr.com/photos/tomsen/2899175607/




Document
Landmarks
Dokument-Landmarken
Dokument-Landmarken


fungieren als „Wegweiser“ im Dokument
Dokument-Landmarken


fungieren als „Wegweiser“ im Dokument

beschreiben die „Rollen“ der Sektionen
Dokument-Landmarken


fungieren als „Wegweiser“ im Dokument

beschreiben die „Rollen“ der Sektionen

helfen Nutzern assist...
Beispiel
Beispiel

  <div role="banner">
  ...
  </div>
  <div role="navigation">
  ...
  </div>
  <div role="main">
  ...
  </div>
Beispiel
Beispiel
Fragen? Fragen!
Danke für die
              Aufmerksamkeit

                                     Stefan Walter
Diese Präsentation steht un...
Upcoming SlideShare
Loading in...5
×

Einführung in WAI-ARIA

5,319

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,319
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
27
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • - Definition von der W3-Site
    - abstraktes mit Leben f&amp;#xFC;llen
    - Aufbau in der Pr&amp;#xE4;sentation: Beispiel aus der ARIA-Spezifikation, Codebeispiel, Beispiel von Screenreadern vorgelesen
  • - Gegen&amp;#xFC;berstellung: Formular -&gt; Absenden -&gt; Neue Seite mit Ergebnis
    - Klick auf Link -&gt; Request -&gt; neue Seite
    - mit AJAX: Interaktion -&gt; &amp;#x201E;stiller&amp;#x201C; Request -&gt; Update eines Bereichs der Seite
  • - Bsp. Chat-Applikation, Nutzer kann &amp;#xFC;ber Updates informiert werden, ohne dass er das Eingabefeld verl&amp;#xE4;sst (&amp;#x201E;fokussiert&amp;#x201C;)
    - Stichwort &amp;#x201E;Desktop-like Experience&amp;#x201C;, Komfort von Desktop-Anwendungen ohne st&amp;#xE4;ndiges Neuladen
  • - Bsp. Chat-Applikation, Nutzer kann &amp;#xFC;ber Updates informiert werden, ohne dass er das Eingabefeld verl&amp;#xE4;sst (&amp;#x201E;fokussiert&amp;#x201C;)
    - Stichwort &amp;#x201E;Desktop-like Experience&amp;#x201C;, Komfort von Desktop-Anwendungen ohne st&amp;#xE4;ndiges Neuladen
  • - Bsp. Chat-Applikation, Nutzer kann &amp;#xFC;ber Updates informiert werden, ohne dass er das Eingabefeld verl&amp;#xE4;sst (&amp;#x201E;fokussiert&amp;#x201C;)
    - Stichwort &amp;#x201E;Desktop-like Experience&amp;#x201C;, Komfort von Desktop-Anwendungen ohne st&amp;#xE4;ndiges Neuladen
  • - Bsp. Chat-Applikation, Nutzer kann &amp;#xFC;ber Updates informiert werden, ohne dass er das Eingabefeld verl&amp;#xE4;sst (&amp;#x201E;fokussiert&amp;#x201C;)
    - Stichwort &amp;#x201E;Desktop-like Experience&amp;#x201C;, Komfort von Desktop-Anwendungen ohne st&amp;#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. &lt;img&gt;-Elemente als &amp;#x201E;Ausl&amp;#xF6;ser&amp;#x201C; (Stichwort: Slider)
    - WAI-ARIA macht nun alle sichtbaren Elemente f&amp;#xFC;r die Tastatur erreichbar
  • - in HTML4: Links u. Formularelemente (a, area, button, input, object, select und textarea)
    - in JS-Widgets aber bspw. &lt;img&gt;-Elemente als &amp;#x201E;Ausl&amp;#xF6;ser&amp;#x201C; (Stichwort: Slider)
    - WAI-ARIA macht nun alle sichtbaren Elemente f&amp;#xFC;r die Tastatur erreichbar
  • - bisher schon m&amp;#xF6;glich: durch &amp;#xDC;berschriften springen
    - h&amp;#xF6;rt sich erstmal komisch an, aber entspricht menschlichen Gewohnheiten -&gt; &amp;#x201E;Scannen&amp;#x201C; von Text
    - jetzt deutlich bessere Granularit&amp;#xE4;t und Information &amp;#xFC;ber Struktur m&amp;#xF6;glich
  • - bisher schon m&amp;#xF6;glich: durch &amp;#xDC;berschriften springen
    - h&amp;#xF6;rt sich erstmal komisch an, aber entspricht menschlichen Gewohnheiten -&gt; &amp;#x201E;Scannen&amp;#x201C; von Text
    - jetzt deutlich bessere Granularit&amp;#xE4;t und Information &amp;#xFC;ber Struktur m&amp;#xF6;glich
  • - bisher schon m&amp;#xF6;glich: durch &amp;#xDC;berschriften springen
    - h&amp;#xF6;rt sich erstmal komisch an, aber entspricht menschlichen Gewohnheiten -&gt; &amp;#x201E;Scannen&amp;#x201C; von Text
    - jetzt deutlich bessere Granularit&amp;#xE4;t und Information &amp;#xFC;ber Struktur m&amp;#xF6;glich
  • Weitere Rollen: banner, article, complementary, contentinfo, search, &amp;#x2026;
  • Weitere Rollen: banner, article, complementary, contentinfo, search, &amp;#x2026;
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×