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

Einführung in WAI-ARIA

on

  • 7,659 views

Kurze Einführung in WAI-ARIA

Kurze Einführung in WAI-ARIA

Statistics

Views

Total Views
7,659
Views on SlideShare
7,440
Embed Views
219

Actions

Likes
7
Downloads
26
Comments
0

4 Embeds 219

http://blog.hessendscher.de 205
http://www.slideshare.net 12
http://74.125.153.132 1
http://pinterest.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

Einführung in WAI-ARIA Einführung in WAI-ARIA Presentation Transcript

  • 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 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
  • 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 werden über Änderungen auf der Seite nicht informiert
  • 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?
  • „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.
  • „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 Accordeon Tree Zustände …und noch einiges mehr :)
  • …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-Controls imitiert („Widgets“)
  • 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 assistiven Technologien nicht zugänglich
  • Accessibility-Probleme Die Rolle/Aufgabe ist assistiven Technologien nicht ersichtlich Status und Eigenschaften sind assistiven Technologien nicht zugänglich Aktualisierungen werden nicht mitgeteilt
  • 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
  • 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 HTML-Elemente per Tastatur den Fokus bekommen („durchtabben“)
  • 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
  • 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 („Rollen“)
  • 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
  • Slider
  • 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">
  • 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="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>
  • 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-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>
  • 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="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>
  • 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 assistiver Technologien die Struktur eines Dokuments schneller zu erfassen
  • 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 unter der stefan@hessendscher.de Attribution-Share Alike 3.0 twitter.com/hessendscher