Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Designing for Accessibility with ARIA

5 429 vues

Publié le

ARIA is an accessibility standard that provides capabilities such as screen-reader access to application functionality. During this session, we'll take a tour of the latest accessibility enhancements to Ext JS and Ext GWT including improved keyboard navigation, ARIA and focus management. We'll also discuss how government standards like Section 508 may apply to your organization.

Publié dans : Technologie
  • Soyez le premier à commenter

Designing for Accessibility with ARIA

  1. 1. Accessibility Enabling Others to Use your Apps AARON CONRAN DARRELL MEYER SENCHA
  2. 2. Checklist App Idea Developme nt Testing Accessibilit
  3. 3. Why implement Accessibility?
  4. 4. Further Reach
  5. 5. Further Reach Enable more users Comply with Section 508 Sell to Government
  6. 6. What makes an App Accessible?
  7. 7. Section 508
  8. 8. Section 508 Amendment to Rehabilitation Act of 1973 Last revised in 1998 Very lengthy and lots of legalese http://en.wikipedia.org/wiki/Section_508
  9. 9. Section 508 Few Key Bullet Points (a) When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually. (c) A well-defined on-screen indication of the current focus shall be provided that moves among interactive interface elements as the input focus changes. The focus shall be programmatically exposed so that assistive technology can track focus and focus changes. (g) Applications shall not override user selected contrast and color selections and other individual display attributes. (i) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
  10. 10. Section 508 Few Key Bullet Points (a) Navigable (c) Focus Management (g) Color Contrast (i) Screen Reader Support through ARIA http://webaim.org/standards/508/checklist
  11. 11. Navigable
  12. 12. Navigable Application should be navigable without a mouse Keyboard support and focus management
  13. 13. Color Choice
  14. 14. Color Choice Sufficient contrast Support high contrast mode Supply high contrast theme
  15. 15. Color Choice
  16. 16. Color Choice Sufficient contrast Support high contrast mode Supply high contrast theme
  17. 17. Screen Reader Compatibility
  18. 18. Screen Reader Compatibility Additional ARIA Attributes • Role - type of widget • Name - description • State - current state Allow screen readers to understand widgets instead of markup
  19. 19. ARIA Roles alert tree button treeitem dialog tabpanel grid tab gridcell listbox progressbar slider menu http://www.w3.org/TR/wai-aria/
  20. 20. Tools Available
  21. 21. Tools Available Tools MSAA - Microsoft Active Accessibility Inspect32 Screen Readers JAWS NVDA - Non Visual Desktop
  22. 22. How?
  23. 23. Ext GWT 2 & Ext JS 4 Goal: built-in accessibility Take work out of hands of the developer Provide accessible experience out of the box Supported technology Browsers Firefox 3 IE8 has partial support due to incomplete ARIA Assistive Technology JAWS 11 NVDA
  24. 24. ARIA Stop treating application as one big linear tab order Allow user to “drill down” focus to a container’s children, or move focus up to the parent container Natural tab order is confined to the current “focus level” (e.g. a tab panel, dialog or window) All contents in a container can easily be skipped if desired This replaces the need for skip links If needed, the user can turn this feature off
  25. 25. Component Overview
  26. 26. Containers Use panels / sub panels to structure interface Makes UI easier to navigate with focus manager Panel titles are exposed to AT Tab panels Implemented with ARIA tablets markup Change selected tab with arrow keys
  27. 27. Windows & Dialogs Marked up with ARIA dialog markup Dialog title & text automatically announced Can be moved / resized by using the keyboard Can be modal / non modal F6 moves focus between open dialogs and the main app
  28. 28. Form Components Checkbox group, radio buttons Screen reader will combine group name with individual names (e.g. “Music: Classical)” Combobox Use arrow keys to select a value or type the value Slider Can have textual or numeric values
  29. 29. Buttons & ToolBars Regular Buttons Can have text and / or icon labels Toggle Buttons Act like checkboxes Menu / Split Buttons Have dropdown lists ToolBars Can have any combination of buttons Toolbars can be given an accessible name
  30. 30. DatePicker Standalone or as dropdown in form / menu Shortcuts allow quick navigation by month or year Marked up as ARIA grid
  31. 31. ListView & DualListField ListView Can be single or multi selectable Hold Shift for contiguous, Ctrl for discontiguous selection DualListField Combines two ListView’s and buttons
  32. 32. Grids Can be navigated in two ways: Row navigation: Entire row is focused, use up & down arrow keys to navigate Cell navigation: One cell is focused at a time, use up, down, left, right arrow keys to navigate Can be single or multi selectable Use same shortcuts as lists Can be editable Column headers Marked up with ARIA Sorting direction can be changed by keyboard
  33. 33. Info & ToolTip Info Message temporarily appears at the bottom right corner Marked up as ARIA alert Screen reader will announce the text without requiring focus ToolTip Shown as text balloon Programmatically associated using aria- describedby
  34. 34. Menu & MenuBar Menu items can be checkable Checkbox menu items Radio menu items Items can contain editable controls Press Enter to start editing value Press Escape to switch back to menu navigation MenuBar Navigated with arrow keys
  35. 35. 3rd Party Verification
  36. 36. 3rd Party Verification TPG - The Pacilleo Group
  37. 37. Further Resources Demos http://dev.sencha.com/playpen/gxt/aria2/test.html http://dev.sencha.com/deploy/dev/examples/key-feed- viewer/view.html Useful Links http://www.section508.gov/ http://www.w3.org/WAI/PF/aria/ http://wiki.codetalks.org/wiki/index.php/Main_Page
  38. 38. Questions?