1 / 19

Real World Accessibility

Real World Accessibility. Becky Gibson Dojo Accessibility Lead IBM Web Accessibility Architect. Top 3 Reasons People Don’t Implement Accessibility. 3. My site IS accessible - it’s up 24x7!. 2. People with Disabilities don’t use my site. is doing it. is doing it. UI is doing it.

sawyer
Download Presentation

Real World Accessibility

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. Real World Accessibility Becky Gibson Dojo Accessibility Lead IBM Web Accessibility Architect

  2. Top 3 Reasons People Don’t Implement Accessibility

  3. 3. My site IS accessible - it’s up 24x7!

  4. 2. People with Disabilities don’t use my site

  5. is doing it is doing it UI is doing it 1. Adding A11y is too hard and will ruin my design

  6. All these companies are doing it

  7. ARIA - Accessible Rich Internet Applications

  8. ARIA - What is it? • Accessible Rich Internet Applications • W3C Specification, like HTML, CSS, XML etc. • Within Protocols & Formats Working Group which is part of WAI - Web Accessibility Initiative • In Last Call Status • Implemented in Firefox, IE8 with Opera and Safari under development • Gaining increasing support by browsers, Web toolkits and assistive technologies

  9. ARIA Overview • Add role semantics to scripted UI elements • Update state information dynamically • Make items focusable via tabindex attribute • Add keyboard event handling • Mimic the keyboard behavior of the rich client UI • Minimize tab key navigation • Add live region info and notification to support Ajax

  10. ARIA Example - Tree Role = tree(on outer container) Role = treeitemexpanded=true(on open Africa node) Role = treeitemselected=true(on highlighted Egypt child node with no children) Role = treeitemexpanded=false (on closed Australia node)

  11. link combobox, option checkbox radio, radiogroup button progressbar slider spinbutton tree, treeitem alert application presentation group grid, gridcell tab, tabcontainer, tablist, tabpanel list, listitem menubar, menu toolbar more…… ARIA Roles

  12. ARIA- States

  13. ARIA Landmark Roles • Makes finding and navigating to sections of the page easier • Application • Banner • Complementary • Contentinfo • Main • Navigation • search

  14. banner Navigation Main contentinfo Landmarks Example

  15. Landmark Example <div dojoType="dijit.layout.ContentPane" region="top" class="banner" role="banner"> <span class="logo">WebA11y</span> </div><!-- end of top --> <div id="left" dojoType="dijit.layout.ContentPane" region="left" role="navigation"> <!-- Tree goes here --> </div><!-- end of left --> <div id="content" dojoType="dijit.layout.ContentPane" title="Content" role="main" aria-live="assertive" aria-atomic="true" > Info from selected tree item is loaded here </div><!-- end of center --> <div dojoType="dijit.layout.ContentPane" region="bottom" role="contentinfo" > <!-- footer goes here --> </div><!-- end of bottom -->

  16. ARIA Live Regions • Perceivable sections are identified with region role • Live indicates region is updated • Values of: Off, Polite, Assertive, Rude • Atomic identifies the extent of updates • True – entire region is updated and relevant • False – only changed element needs to be presented to user

  17. Live Region Example

  18. Live Region Example <!-- message preview pane --> <div id="message" dojoType="dijit.layout.ContentPane" region="center" minSize="20" role="region" aria-live="assertive" aria-atomic="true" > Message Contents loaded here </div> <!-- end of "message" -->

  19. Summary • JS Toolkits are implementing ARIA - use them! • Dojo dijits are all fully accessible • ARIA makes Ajax accessible • Make your websites dynamic AND accessible!

More Related