1 / 31

Accessible Rich Internet Applications (ARIA) ‏

Accessible Rich Internet Applications (ARIA) ‏. A-Tag, Wien, 21. November 2008 Martin Kliehm, Senior Frontend Engineer. http://www.flickr.com/photos/950/2116094803/. Accessible Rich Internet Applications. ARIA ist ein W3C-Entwurf für barrierefreies Web 2.0 . Es fügt hinzu :

xannon
Download Presentation

Accessible Rich Internet Applications (ARIA) ‏

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Accessible Rich Internet Applications (ARIA)‏ A-Tag, Wien, 21. November 2008 Martin Kliehm, Senior Frontend Engineer http://www.flickr.com/photos/950/2116094803/

  2. Accessible Rich Internet Applications. ARIA istein W3C-Entwurf fürbarrierefreies Web 2.0. Es fügthinzu: • Fokusierbarkeit • Semantik • den aktuellerZustand • BeziehungenzwischenElementen • informiertüberdynamischeAktualisierungen

  3. Accessible Rich Internet Applications. • Februar 2005: Jesse James Garrett prägt den Begriff„Ajax“ (Asynchronous JavaScript and XML)‏ • März 2005: Richard Schwerdtfeger und Becky Gibson stellen ARIA auf CSUN vor • August 2005: IBM spendet eine große Menge Quellcode für den Mozilla Browser • August 2005: Die ersten Standardentwürfe für ARIA werden veröffentlicht • Juli 2006: Das Role-Attribut wird als XHTML-Modul veröffentlicht • 2008: Opera, Apple und Microsoft unterstützen ARIA

  4. Wo bin ich? • Assistive Technologien (AT) müssen wissen, wo sie sich gerade befinden. • Problem: bisher konnten nur Links und Texteingabefelder den Tab-Fokus erhalten

  5. Die Lösung: tabindex <h1tabindex="0">Chris Heilmann</h1>

  6. tabindex revisited.

  7. Was ist das? • So kann man hintabben, aber was ist das?<h1tabindex="0">Chris Heilmann</h1>

  8. Semantischer Zuckerguss • Das role-Attribut fügt semantische Bedeutung hinzu:<h1role="textfield heading" tabindex="0">Chris Heilmann</h1>

  9. Semantischer Zuckerguss • Das role Attribut ermöglicht es, den Zweck eines Elements mit maschinenlesbarer, semantischer Information auszustatten. • Der User Agent mappt die Rolle in die Accessibility API des zugrundeliegenden Frameworks. Tool zur Überprüfung z.B. MsaaVerify • Assistive Technologien (z.B. Screenreader wie Window Eyes 5.5+, JAWS 7.0+, ZoomText, NVDA, Orca) können die Rolle dann verwenden.

  10. Überprüfung der Rolle in der MSAA

  11. Rollentypen • Es gibt Landmarkroles wiebanner, main, navigation, searchodersecondary • Document Structureroles wiedescription, directory, group, presentation, region, section, separator • User Input Controlroles wieinput,select,listbox, combobox, option, checkbox, radio, radiogroup, textbox, range, spinbutton • User Interface Elementroles wiebutton, link, menu, menubar, toolbar, menuitem, slider, tooltip, tabpanel, tablist, tab, tree, treeitem • Specializedroles wiealert, application, dialog, marquee, log, status, progressbar, timer

  12. Semantischer Zuckerguss <h1tabindex="0" role="textfield">Chris Heilmann</h1> <ulrole="navigation"> […] </ul> <imgsrc="checkbox-with-rounded-corners-and-dropshadow.gif" role="checkbox" />

  13. Semantischer Zuckerguss role="dialog"

  14. Semantischer Zuckerguss role="dialog"

  15. Welchen Zustand hat dieses Element? <imgsrc="checkbox-with-rounded-corners-and-dropshadow.gif" role="checkbox" />

  16. ARIA States and Properties. <imgsrc="checkbox-with-rounded-corners-and-dropshadow.gif" role="checkbox"aria-checked="true" /> <input type="text" name="email"aria-required="true" /> <divrole="wairole:button"aria-controls="price">Change sortorder</div> <h2id="price" aria-sort="descending">price</h2>

  17. ARIA labelled-by und described-by. <label for="shutdown-minutes" id="sd-label">Herunterfahrennach</label> <inputtype="text" name="shutdown“id="shutdown-minutes" value=""aria-labelled-by="sd-label sd-unit"aria-described-by="sd-description" /> <span id="sd-unit">Minuten</span>

  18. Live Regions: Ajax Support <divrole="status" aria-live="polite">Nachname ist erforderlich</div>

  19. Implementierung <?xmlversion="1.0"?> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML+ARIA 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-aria-1.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"> […] </html>

  20. Beispiele http://www.flickr.com/photos/adactio/89778576/

  21. Erforderliches Eingabefeld <input type="text" name="name-family"aria-required="true" value="" />

  22. Fehler im Eingabefeld <input type="text" name="email"aria-required="true" aria-invalid="true" value="foo bar" />

  23. Reiternavigation / Registerkarte <ulrole="tablist"> <lirole="tab" id="tab-1"aria-controls="panel-1">Aktuelles</li><lirole="tab">Projekte</li><lirole="tab">Ansprechpartner</li><lirole="tab">Institute</li> </ul> <divrole="tabpanel" id="panel-1">[…]</div>

  24. Reiternavigation / Registerkarte mit Link als Fallback ohne JavaScript <ulrole="tablist"> <lirole="presentation"> <ahref="#aktuelles" role="tab"id="tab-1"aria-controls="panel-1"> Aktuelles </a> </li> […] </ul>

  25. JavaScript für Reiternavigation / Registerkarte. • Dem aktiven Reitereinentabindex="0"zuweisen, den inkativentabindex="-1" • Event Listenerfüronclick, onkeydown, onkeypresssetzen, Event Delegation einsetzen • Tastaturbedienbarkeiteinarbeiten:Pfeiltasten, strg + Tab, strg + Shift + Tab • BeiKlick den aktiven Reiter per class="active" und tabindex="0"kennzeichnen, bei den inaktiven die Klasseentfernen und tabindex="-1"setzen, aktivesTabpaneleinblenden • DenScreenreaderbufferaktualisieren http://www.w3.org/TR/wai-aria-practices/#TabPanel

  26. JavaScript für Reiternavigation / Registerkarte. … odereinJavaScript-Frameworkverwenden: • dōjō • YUI • jQuery UI In jQuery UI ist ARIA nochsehrneu und derzeitnichtvollständigimplementiert.

  27. Fortschrittbalken <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="50" />

  28. Schieberegler

  29. Menübaum

  30. Links • WAI ARIA 1.0www.w3.org/TR/wai-aria/ • Introduction to WAI ARIAdev.opera.com/articles/view/introduction-to-wai-aria/ • WAI ARIA Best Practiceswww.w3.org/TR/wai-aria-practices/ • Mozilla ARIA FAQdeveloper.mozilla.org • Mein Bloglearningtheworld.eu

  31. Besten Dank für Ihre Aufmerksamkeit. martin.kliehm (at) namics.com http://www.flickr.com/photos/delay_tactics/207364039/

More Related