Your SlideShare is downloading. ×
0
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

World Usability Day 2012 ARIA

529

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
529
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Today we’re going to experience an introduction to the ARIA (accessible rich internet for web applications) which is a powerful and contemporary way to provide an accessible experience for your end users. First we’re going to illustrate the problem and need for techniques beyond the familiar alt text and heading techniques you already know. Then we’re going to cover 2 techniques, landmark roles and aria labels. These 2 are already supported by browsers, and assistive technology. If I can pull it off live I will fire up JAWS screen reader and we can listen to the way it reads a couple of code samples. Finally we’ll talk about where you can find components with built in aria support. And I’ll point you to some tools you can use to inspect your code.
  • Operating systems and other platforms provide a set of interfaces that expose information about objects and events to assistive technologies . Assistive technologies use these interfaces to get information about and interact with those widgets . Examples of accessibility APIs are the Microsoft Active Accessibility [MSAA], the Microsoft User Interface Automation [UIA-ARIA], the Mac OS X Accessibility Protocol [AXAPI], the Linux/Unix Accessibility Toolkit [ ATK ] and Assistive Technology Service Provider Interface [ AT-SPI ], and IAccessible2 [IA2]. Accessibility Subtree
  • Components particularly pose an accessibility challenge because in addition to a role there is state information such as selected or not, menus that can open or close. There are widgets that are traditionally not HTML controls such as sliders, tabs, accordions, trees. Without the required accessibility these will not be read by assistive technology and will not provide an equivalent experience.
  • Components particularly pose an accessibility challenge because in addition to a role there is state information such as selected or not, menus that can open or close. There are widgets that are traditionally not HTML controls such as sliders, tabs, accordions, trees. Without the required accessibility these will not be read by assistive technology and will not provide an equivalent experience.
  • Do you want JAWS to announce your tabs as list of 5 items, link What’s New. Or “ Tab Inbox, selected” The UI elements of your application must be programmatically accessible to assistive technology products. All UI elements must have labels, they must expose all property values, and they must raise all appropriate events. For the standard Windows controls, most of this work is already done through the Microsoft UI Automation and Microsoft Active Accessibility proxy objects. Custom controls, however, require additional work to ensure that they are fully exposed so that assistive technology vendors can identify and manipulate elements of your application UI. Following this best practice allows assistive technology vendors to identify and manipulate elements of your product's UI.
  • HTML 5 is fallback content. If browsers don’t support canvas tags, then there is fallback content, almost like your alternative if you don’t have a browser that doesn’t support frames. Will developers adopt HTML5 controls? Or stick with the custom controls. Styling of HTML5 controls is limited. Some of the controls will not be properly represented in the DOM – a challenge HTML5 gaps to support with ARIA: Mid-summer: alternative for longdesc, attribute for a poster description, new disclosure and figure roles. Apple needs a switch role like a checkbox Device independent events: mainstream tech and accessibility. Open/Close/Zoom in/Zoom out. Make it easier move concepts across platforms. Spec slow, but want to get IBM DOJO team to start working on it.
  • HTML 5 is fallback content. If browsers don’t support canvas tags, then there is fallback content, almost like your alternative if you don’t have a browser that doesn’t support frames. Will developers adopt HTML5 controls? Or stick with the custom controls. Styling of HTML5 controls is limited. Some of the controls will not be properly represented in the DOM – a challenge HTML5 gaps to support with ARIA: Mid-summer: alternative for longdesc, attribute for a poster description, new disclosure and figure roles. Apple needs a switch role like a checkbox Device independent events: mainstream tech and accessibility. Open/Close/Zoom in/Zoom out. Make it easier move concepts across platforms. Spec slow, but want to get IBM DOJO team to start working on it.
  • Someone in the pre-session survey mentioned Accessibility was treated as a “filtered requirement”, which I think relates to the idea that we can prioritize the most important aspects of accessibility and make a huge impact without releasing 100% perfect, HTML strict that validates. There are low-hanging fruit when it comes to accessibility. Providing structure, text equivalents for controls, and keyboard operability are all simple and don’t require lots of code. Making sure that you have text equivalents and captioning for all of your content is more expensive, but makes a huge impact on accessibility. The prioritization of items in the table really depend upon the type of individual and type of impairment. If someone has a hand tremor or trouble using a mouse, the skip navigation is going to be very helpful in reducing repetitive tabbing to get to a link or button further down the page. The label tags will also be very helpful in making little radio buttons and chekboxes easier to click.
  • As an exercise I want one person from each location to volunteer to describe the composition of this webpage. How were you able to identify the different areas on the screen? There are groupings, boxes and panes if you will that are visual groupings to help you figure out where to find information.
  • So, what does this page look like to someone using a screen reader? Where are the boxes and panes to help orient them to where the different boxes and groups of information is? Looking at the screen reader output for this page we see: Nine frames, twenty-one headings, and 288 links. How long will it take me to find what I am looking for on this site if I can’t scan the page visually? Much less, how long will it take me to figure out what are the main areas if I have to listen to 21 headings and 288 links? So, how can we add structure to help folks jump around within a long web page? You can download Fangs screen reader emulator from here: http://www.standards-schmandards.com/projects/fangs/
  • So to help users understand the structure and content of a webpage, and navigate a page assistive tech has built in features. JAWS to help navigate and orient on a web page – listing the Landmarks
  • Screen shot shows apple voice over screen reader by choosing landmarks in the web rotor. Overview of ARIA landmark roles http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/ ARIA landmarks are supported in HTML5 and are used by Google, BBC, and Yahoo. ARIA landmark Roles http://www.w3.org/TR/wai-aria/roles#landmark_roles
  • There are other roles beside landmark roles. There are role=“button”, role=“presentation”, etc. don’t worry about that for now. Start simple with Landmark roles to describe your page layout semantically. HTML 5 is fallback content. If browsers don’t support canvas tags, then there is fallback content, almost like your alternative if you don’t have a browser that doesn’t support frames. Will developers adopt HTML5 controls? Or stick with the custom controls. Styling of HTML5 controls is limited. Some of the controls will not be properly represented in the DOM – a challenge HTML5 gaps to support with ARIA: Mid-summer: alternative for longdesc, attribute for a poster description, new disclosure and figure roles. Apple needs a switch role like a checkbox Device independent events: mainstream tech and accessibility. Open/Close/Zoom in/Zoom out. Make it easier move concepts across platforms. Spec slow, but want to get IBM DOJO team to start working on it.
  • HTML 5 is fallback content. If browsers don’t support canvas tags, then there is fallback content, almost like your alternative if you don’t have a browser that doesn’t support frames. Will developers adopt HTML5 controls? Or stick with the custom controls. Styling of HTML5 controls is limited. Some of the controls will not be properly represented in the DOM – a challenge HTML5 gaps to support with ARIA: Mid-summer: alternative for longdesc, attribute for a poster description, new disclosure and figure roles. Apple needs a switch role like a checkbox Device independent events: mainstream tech and accessibility. Open/Close/Zoom in/Zoom out. Make it easier move concepts across platforms. Spec slow, but want to get IBM DOJO team to start working on it.
  • I just wanted to show a screen shot demonstrating how we document things in our UI specifications and best practices. This is a screen shot on the left of the article redesign. Each functional area on the page is circled and numbered. Then we include a table that specifies the type of ARIA landmark and label for each container.
  • I just wanted to show a screen shot demonstrating how we document things in our UI specifications and best practices. This is a screen shot on the left of the article redesign. Each functional area on the page is circled and numbered. Then we include a table that specifies the type of ARIA landmark and label for each container.
  • Traditionally you would have to put in some CSS hidden text or use a custom alt to have See more titles read See more titles for Adult and Steamy
  • I just wanted to show a screen shot demonstrating how we document things in our UI specifications and best practices. This is a screen shot on the left of the article redesign. Each functional area on the page is circled and numbered. Then we include a table that specifies the type of ARIA landmark and label for each container.
  • A lot of work to build your own components that utilize roles and aria attributes correctly and create the JS functions to manipulate those items so that when you open a tree it’s aria-expanded attribute changes to true.
  • A lot of work to build your own components that utilize roles and aria attributes correctly and create the JS functions to manipulate those items so that when you open a tree it’s aria-expanded attribute changes to true.
  • HTML 5 is fallback content. If browsers don’t support canvas tags, then there is fallback content, almost like your alternative if you don’t have a browser that doesn’t support frames. Will developers adopt HTML5 controls? Or stick with the custom controls. Styling of HTML5 controls is limited. Some of the controls will not be properly represented in the DOM – a challenge HTML5 gaps to support with ARIA: Mid-summer: alternative for longdesc, attribute for a poster description, new disclosure and figure roles. Apple needs a switch role like a checkbox Device independent events: mainstream tech and accessibility. Open/Close/Zoom in/Zoom out. Make it easier move concepts across platforms. Spec slow, but want to get IBM DOJO team to start working on it.
  • HTML 5 is fallback content. If browsers don’t support canvas tags, then there is fallback content, almost like your alternative if you don’t have a browser that doesn’t support frames. Will developers adopt HTML5 controls? Or stick with the custom controls. Styling of HTML5 controls is limited. Some of the controls will not be properly represented in the DOM – a challenge HTML5 gaps to support with ARIA: Mid-summer: alternative for longdesc, attribute for a poster description, new disclosure and figure roles. Apple needs a switch role like a checkbox Device independent events: mainstream tech and accessibility. Open/Close/Zoom in/Zoom out. Make it easier move concepts across platforms. Spec slow, but want to get IBM DOJO team to start working on it.
  • Transcript

    • 1. Modern AccessibilityIntroduction to WAI - ARIAAccessibility of Rich Internet Applications Presented by: Ted Gies Principal User Experience Specialist Elsevier User Centered Design Group t.gies@elsevier.com World Usability Day 2012 This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited.
    • 2. Download this Presentation at:WWW.LINKEDIN.COM/IN/TEDGIES This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 2
    • 3. A Poll – What’s your role?  Web Developer  UX Specialist  Tech Writer  Visual Designer  QA  Product Manager  Accessibility Specialist This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 3
    • 4. Overview Need for ARIA What is ARIA? ARIA Landmark Roles  The Problem  Code Example  How to put it in your UI spec ARIA labels  The Problem  Code Example  Technique Where to Find Accessible Components with ARIA This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 4
    • 5. Introduction to ARIAWHY DO WE NEED ADDITIONALACCESSIBILITY TECHNIQUES? This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 5
    • 6. Proliferation of RIA components in user interfaces Tabs, Data Grids, Menus Accordions Trees This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 6
    • 7. Web components should sound and behave like desktop components Yahoo Mail - Web Component Tabs Outlook – MS Application Tabs This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 7
    • 8. Better techniques for meeting existing A11y guidelines IOS Voiceover landmarks navigation JAWS landmarks listSection 508 (o)A method shall be provided that permits users to skip repetitive navigation links. This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 8
    • 9. Better techniques for meeting existing A11y guidelines <label for="firstname">First Name</label> <input type="text" id="firstname" aria-required="true" />Section 508 (c)Web pages shall be designed so that all information conveyed with color is alsoavailable without color, for example from context or markup. This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 9
    • 10. What is WAI - ARIA? ARIA = Accessibility of Rich Internet Applications W3C Web Accessibility Initiative Candidate Recommendation Standard Techniques to allow your AT/screen reader to announce rich descriptions of modern web components such as: This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 10
    • 11. What is ARIA Not? Not a catch-all technique Not a replacement of familiar WCAG 1.0 best practices Not part of HTML 4 (is standard HTML5) Not a functional feature by itself Not going to affect the visual user experience Not a technique to make something keyboard operable Accessibility benefit comes about from the combo of:1. ARIA markup2. Browser Support3. AT Support4. correct JS management of ARIA attributes (in some cases) This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 11
    • 12. Example of how ARIA worksUser Agent – Internet Explorer The “code” in the DOM is interpreted by a browser and passed to the Os via Accessibility API like MS UI Automation<a role="tab" aria-selected="true“>INBOX (10050)</a> The middle man/translator sends the ARIA info to the AT The AT/ screen reader speaks or provides feature “Inbox tab - selected” This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 12
    • 13. ARIA and Browser Support ARIA is Supported by many up to date browsers: Firefox 3+, IE8+, Opera 9.5+, Safari 4+, Chrome 3+ AT and Browsers are still playing catch up with many ARIA roles and properties  Paciello Group Blog HTML5 accessibility chops  http://www.paciellogroup.com/blog/archive/  Use this page to check support for your specific ARIA role and browser: http://html5accessibility.com/ This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 13
    • 14. ARIA FAQ How do ARIA and HTML5 attributes line up?  Overlap in some cases (e.g. <nav> interpreted as role=“navigation”  ARIA is more widely supported than HTML5 accessibility elements What’s a good way to test for proper ARIA?  Good inspection tools to test for the presence, but not for correct implementation Which sites are using ARIA?  Yahoo  GMAIL  ScienceDirect ARIA and mobile?  Some support, e.g. IOS rotor to navigate Landmarks  For touch screen devices, Apple is working on device independent events This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 14
    • 15. Introduction to ARIAARIA LANDMARK ROLES This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 15
    • 16. ARIA Landmark Roles are Low Hanging Fruit Perfectly validated HTML Higher dev cost Captioning for audio and video content Higher dev cost Meaningful Text equivalents for figures Comprehensive Site Search HTML equivalents for supplementary files Replacing table based site with DIVs (e.g. ENA Skills Matrix PDF) •Perfectly validated HTML Unambiguous Text equivalents for all controls, •Perfectly validated CSS buttons, and use of color for meaning Keyboard operability of all controls and scripts •Form fieldset and legend Proper use of structure (ordered lists) •Keyboard shortcuts Proper use of headings <h1>, <h2> •Link to download software/player ARIA landmarks •Row and column headings for tables Descriptive page titles Skip Navigation Links Flash workaround for keyboard trap Site map lower accessibility impact Higher accessibility impact Higher accessibility impact This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 16
    • 17. Lack of semantic roles to describe the page elements This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 17
    • 18. Screen reader output of IMBD.com This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 18
    • 19. Lack of semantic roles to describe the page elements Site Search Login NAVIGATION NAVIGATION Menu MAIN CONTENT MOVIE THEATER SEARCH Featured Movies Navigation SOCIAL MEDIA NAVIGATION SUMMER MOVIE GUIDE Navigation TOP MOVIES NAVIGATION NEWS Navigation Its contents are proprietary and confidential to Elsevier. This document is the property of Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 19
    • 20. JAWS – List Landmarks (CTRL + INS + SEMICOLON) This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 20
    • 21. JAWS – List Landmarks (CTRL + INS + SEMICOLON) <div role=“search” aria-label=Quick Search”> This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 21
    • 22. Apple VoiceOver Rotor Supports Landmark Roles This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 22
    • 23. Summary of ARIA Landmark Roles banner - usually the main header of your site; the area with logo complementary - supporting section of page, separate from the main content, like a sidebar. contentinfo - area that contains information about the site such as copyright lines and links to privacy notices (i.e. page footer). main - the main content; area with central topic of the web page. navigation - a section for navigating the site. search - a section with a any type of search tool. application – an area of the screen where you want AT to give keyboard control to that area (up and down arrow keys go straight to the application and not through JAWS). DO NOT USE! This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 23
    • 24. ARIA Landmark Best Practices1. Every piece of content on the page should be contained within a landmark2. Put landmark role within a <DIV> element3. Landmarks can be nested. You can have search landmarks within a main4. You should only have 1 each of Main, Banner, and Contentinfo landmarks5. Do not use the Application landmark.6. In addition to the role attribute, you should use an aria-labeledby or aria-label e.g. <div role=search, aria-label=“documents”> This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 24
    • 25. Example of UI Specification – ARIA Landmarks DIV Description HTML/ARIA role 1 Global navigation <div aria- with SciVerse links label="SciVerse" role="navigation"> 2 ScienceDirect <div aria- global navigation label="ScienceDirect" role=”navigation ”> 3 Results navigation <div aria- label="Results" role="navigation"> 4 Download options <div aria-label="Download options" role="navigation"> 5 Quick search <div class="singlesearch js_searchform" aria-label="Quick search" role="search“ 6 Extended Search <div aria- labelledby="extendedSearch" role="search"> 7 Left side pane <div class="toc" aria-label="table of contents" role="navigation"> 8 Article/middle pane <div class="content" aria- label="Article" role="article"> 9 Right side pane <div id="sidebar" aria-label=”Related content” role="complementary"> 10 Footer <div class="content" aria- This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. label=”product support” Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. role="contentinfo"> 25
    • 26. JAWS ARIA Landmarks Example This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 26
    • 27. Introduction to ARIAARIA LABELS This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 27
    • 28. Need for better labeling techniques No one told me that I was clicking on See more adult titles, I thought I was clicking on See more opening this week titles This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 28
    • 29. JAWS aria-labeledby Example<span id=“myLabel”>Acta Biomateriala</span>………<a href=“” aria-labeledby=“myLabel”>Create RSS feed</a><a href=“” aria-labeledby=“myLabel”>Add to Favorites</a><a href=“” aria-labeledby=“myLabel”>Set alert</a> This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 29
    • 30. ARIA Labels Use aria-label when 1. You need to label a graphical item or control (it’s like Alt text) 2. You don’t want your label to be visible 3. You are implementing landmarks (e.g. role=“search” aria-label=“site”) Use aria-labeledby when 1. There is already a text label created and you want to use it as a label for another element. E.g. use a heading to label another link. 2. When you have multiple labels to reference (e.g. form instructions) 3. When you want to provide more context to a repetitive element, e.g. 1. More 2. Click Here 3. About Use aria-describedby when  You want a longer description and potentially a shorter label This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 30
    • 31. Introduction to ARIACOMPONENT LIBRARIESWITH ARIA This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 31
    • 32. 12 General Steps for Building an Accessible Widgetswith WAI-ARIA1. Pick the widget type (role) from the WAI-ARIA taxonomy2. From the role, get the list of supported states and properties3. Establish the widget structure in the markup (parent/child)4. Repeat steps 1-3 for the children of the parent5. Establish keyboard navigation of the widget and plan for how it will be navigated to within the document6. Apply and manage needed WAI-ARIA states in response to user input events7. Synchronize the visual UI with accessibility states and properties for supporting user agents8. Showing and Hiding Sections in a Widget9. Support basic accessibility, such as alternative text on images10. Establish WAI-ARIA relationships between this widget and others11. Review widget to ensure that you have not hard coded sizes12. Test with User agent, Assistive Technology, and People with disabilities This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 32
    • 33. KISS: Just use components with built-in ARIAHans Hillen’s Accessible jQuery UI Components <h2 role="tab" aria-controls="ui-accordion-sampleAccordion-panel-1“ aria-selected="false" tabindex="-1"></h2> This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 33
    • 34. Use components with built-in ARIAOpenAjax Alliance Accessibility Examples (44) This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 34
    • 35. Where to Find components with built-in ARIA Hans Hillen’s Accessible jQuery UI Components IBM DOJO Accessibility Open AJAX Alliance Accessibility Examples Terrill Thompson’s Accessible Drop Down Navigation Menu http://www.html5accessibility.com/ Look at Google.com This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 35
    • 36. Introduction to ARIATOOLS FOR CHECKING ARIA This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 36
    • 37. There are no perfect tools for testing ARIA implementation HUGE opportunity for a developer to come up with a validation of legitimate or valid use of ARIA Test for free using JAWS or NVDA for windows, VoiceOver on Mac Stick to the basics and test with real users of Assistive Technologies Keyboard operability needs to always be considered with ARIA This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 37
    • 38. Accessibility Inspector for Firebug http://code.google.com/p/ainspector/ This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 38
    • 39. WAVE http://wave.webaim.org/ This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 39
    • 40. W3C HTML 5 Nu Markup Validator http://validator.w3.org/nu/ This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 40
    • 41. ARIA Learning Resources  W3C ARIA Design Patterns  TPG Blog – ARIA Chops  TPG Blog – Using ARIA Landmark Roles  HTML5accessibility.com This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 41
    • 42. Topics We Didn’t Cover ARIA live regions  Don’t use unless you are able to test implementation with people with assistive technologies! HTML 5 attributes vs. ARIA This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 42
    • 43. Thank You We hope this was educational!  Ted Gies (Dayton, OH U.S.) ElsevierUCD t.gies@elsevier.com Specialthanks to Dr. Jon Gunderson and Hadi Rangin (Univ of Illinois Urbana Champaign) for commitment to developing accessible tools and standards This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 43
    • 44. Introduction to ARIAEXTRAS This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 44
    • 45. ARIA Diagram This document is the property of Elsevier. Its contents are proprietary and confidential to Elsevier. Reproduction in any form by any one of the material contained herein without the permission of Elsevier is prohibited. 45

    ×