1 / 18

WAI-ARIA

WAI-ARIA. Web Accessibility Initiative – Accessible Rich Internet Applications . Abbie Carliner HCC 729 Spring 2014. http://www.youtube.com/watch?v=o_mvO6EQ0tM. Screen readers. HOW Is the web accessed by the blind and those who cannot use a mouse.

tomas
Télécharger la présentation

WAI-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. WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications Abbie Carliner HCC 729 Spring 2014

  2. http://www.youtube.com/watch?v=o_mvO6EQ0tM Screen readers

  3. HOW Is the web accessed by the blind and those who cannot use a mouse Image from http://www.w3.org/WAI/intro/components.php

  4. A contract between the authors/authoring tools, through the browser and media players to provide information to the assistive technology to allow the assistive technology to describe the contents of the web page. Aria Is

  5. More and more resources are available on the web • The introduction of AJAX, DHTML, Javascriptand SVG add an additional level of complexity for screen readers and other assistive technologies. • Whole segments of the population were in danger of being left behind as the web evolved Why ARIA?

  6. 1993 HTML Specification published • 1996 Css1, Javascript and HTML3 • 1999 HTML 4 • 2000 XHTML V1 • 2004-2007 HTML5 development • Sept 2006: W3C's Web Accessibility Initiative -Accessible Rich Internet Application (WAI-ARIA)suiteintroduced as a public working draft • Jan 2011: WAI-ARIA1.0 published as a W3C Candidate Recommendation • Mar 20, 2014: (WAI-ARIA) 1.0 and the WAI-ARIA 1.0 User Agent Implementation Guide published as W3C Recommendations timeline

  7. Making content keyboard accessible • Landmarks • Semantics to allow content to be restructured for different audiences • Making content audio accessible • Roles allow content to be read in context ARIAfacilitates

  8. An example of Aria Code

  9. Roles • Include, among others • Widgets for input and display (alert, button, menuitem, slider) • Document structure/Landmarks (banner, contentinfo, complementary, main, navigation, search) • Contain States – XML attributes that are likely to change due to user interaction • Managed states controlled by user agent (e.g. focus and selection) • Unmanaged states controlled by the author • Contain Properties – XML attributes “essential to the nature of” an object ARIA

  10. Live Region Attributes • aria-atomic • aria-busy (state) • aria-live • aria-relevant • Drag-and-Drop Attributes • aria-dropeffect • aria-grabbed (state) • Global • aria-atomic • aria-busy (state) • aria-controls • aria-describedby • aria-disabled (state) • aria-dropeffect • aria-flowto • aria-grabbed (state) • aria-haspopup • aria-hidden (state) • aria-invalid (state) • aria-label • aria-labelledby • aria-live • aria-owns • aria-relevant Some States and Properties

  11. ARIA Class Diagram For Role Model

  12. intended to replace native HTML or SVG features, it was developed to augment them. • It is better to use a native feature of HTML e.g. an <h1> tag rather than an ARIA role e.g. <p role=“heading”> • intended to be static • It is hoped that in the future languages like HTML and SVG will incorporate the concepts of ARIA natively and the use of some ARIA features will be phased out . • ARIA provides a way to make newly developed user interfaces accessible until the native language catches up. Aria is not

  13. Aria –browser compatibility Table from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ

  14. Chart from http://trends.builtwith.com/docinfo/WAI-ARIA

  15. Making Background Images Accessible Demo http://www.youtube.com/watch?v=v1gsOG5IEhs Screen reader ARIA DEMOs • ARIA Live Update Demo http://www.youtube.com/watch?v=9nZnTdSAkH0

  16. ARIA has been in existence for approximately 8 year, but was just published last month • ARIA adds roles which contain states and properties to HTML to add semantics to web pages • HTML5 has incorporated some of the ARIA concepts • Most modern browsers support ARIA • ARIA usage is still very limited Some final notes

  17. Screen Reader Demos • Jaws demo for Handbook for Educators and Museums http://www.youtube.com/watch?v=IK97XMibEws walks thru a pretty accessible web page. 1:21 total • Demo of aria-live aria-atomic http://www.youtube.com/watch?v=9nZnTdSAkH0 watch how a scheduled javascript update to a page is read using different values for aria-live and aria-atomic • Heading demo http://www.youtube.com/watch?v=AmUPhEVWu_E • 1:43 demo h key goes from heading to heading until 4:17 reads an article • 5:17 google (Aug 2008) demo • 6:53 youTube (aug 2008) demo • 8:41 total • Intro to Screen Readers http://www.youtube.com/watch?v=o_mvO6EQ0tM • 4 mins in reads a page and talks about links 1 min in length • 7:05 total • WebAnywhere Screen Reader http://videos.disabled-world.com/video/182/webanywhere-screen-reader-demonstration • Aria landmark roles demo http://www.youtube.com/watch?v=IhWMou12_Vk (JAWS) with voice over • http://www.youtube.com/watch?v=M8ld7AzCnXk reads a yahoo page • JAWS 13 in IE9 with HTML5 and ARIA http://www.youtube.com/watch?v=jiA9RJBwXvw straight reading of page • NVDA landmark role demo http://www.youtube.com/watch?v=-Ze9IdfB-dY Annotated References (1 of 2)

  18. Annotated References (2 of 2) • Pages that use ARIA • http://en.wikipedia.org/wiki/Main_Page • http://www.freedomscientific.com/downloads/jaws/JAWS-whats-new.asp • Other references: • http://www.w3.org/WAI/ The source for WAI ARIA documentation • http://www.slideshare.net/tedgies/world-usability-day-2012-aria slide 14/45 sites that use ARIA Yahoo, GMAIL, ScienceDirect • Mozilla Developer network https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA Has links to video’s of screen readers • http://dev.opera.com/articles/view/introduction-to-wai-aria/ good overview of ARIA and how it works • Checklists for browsers http://html5accessibility.com/ • https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ • http://blog.paciellogroup.com/ good resource for information about web accessibility • Yahoo talk about accessiblityhttp://www.slideshare.net/ArturOrtega/next-generation-web-accessibility-improvement-of-usability-for-disabled-users-7311170 • Accessible Javascript with and without WAI ARIA - slide presentation http://www.slideshare.net/ginader/accessible-javascript-with-and-without-wai-aria • Statistics on ARIA usage http://trends.builtwith.com/docinfo/WAI-ARIA

More Related