Your SlideShare is downloading. ×
0
Accessibility
Enabling Others to
  Use your Apps


   AARON CONRAN
   DARRELL MEYER
      SENCHA
Checklist
     App Idea
     Developme
nt
     Testing
     Accessibilit
Why implement
 Accessibility?
Further Reach
Further Reach
Enable more users
Comply with Section 508
Sell to Government
What makes an App
   Accessible?
Section 508
Section 508
Amendment to Rehabilitation Act of 1973
         Last revised in 1998
   Very lengthy and lots of legalese


h...
Section 508
Few Key Bullet Points
(a) When software is designed to run on a system that has a keyboard,   product function...
Section 508
Few Key Bullet Points
(a)   Navigable


(c)   Focus Management


(g)   Color Contrast


(i)   Screen Reader Su...
Navigable
Navigable
Application should be navigable without a
mouse
Keyboard support and focus management
Color Choice
Color Choice
Sufficient contrast
Support high contrast mode
Supply high contrast theme
Color Choice
Color Choice
Sufficient contrast
Support high contrast mode
Supply high contrast theme
Screen Reader
Compatibility
Screen Reader
             Compatibility
Additional ARIA
Attributes
• Role - type of widget
• Name - description
• State -...
ARIA Roles
alert          tree
button         treeitem
dialog         tabpanel
grid           tab
gridcell
listbox        ...
Tools Available
Tools Available
Tools
MSAA - Microsoft Active
Accessibility
Inspect32

Screen Readers
JAWS
NVDA - Non Visual Desktop
How?
Ext GWT 2 & Ext JS 4
Goal: built-in accessibility
Take work out of hands of the developer
Provide accessible experience ou...
ARIA
Stop treating application as one big linear tab order
Allow user to “drill down” focus to a container’s children, or
...
Component Overview
Containers
Use panels / sub panels to structure
interface
Makes UI easier to navigate with focus
manager
Panel titles are ...
Windows & Dialogs
Marked up with ARIA dialog markup
Dialog title & text automatically
announced
Can be moved / resized by ...
Form Components
Checkbox group, radio buttons
Screen reader will combine group name
with individual names (e.g. “Music:
Cl...
Buttons & ToolBars
Regular Buttons
Can have text and / or icon labels
Toggle Buttons
Act like checkboxes
Menu / Split Butt...
DatePicker
Standalone or as dropdown in form /
menu
Shortcuts allow quick navigation by month
or year
Marked up as ARIA gr...
ListView & DualListField
ListView
Can be single or multi selectable
Hold Shift for contiguous, Ctrl for
discontiguous sele...
Grids
Can be navigated in two ways:
Row navigation: Entire row is focused,
use up & down arrow keys to navigate
Cell navig...
Info & ToolTip
Info
Message temporarily appears at the
bottom right corner
Marked up as ARIA alert
Screen reader will anno...
Menu & MenuBar
Menu items can be checkable
Checkbox menu items
Radio menu items
Items can contain editable controls
Press ...
3rd Party Verification
3rd Party Verification
TPG - The Pacilleo Group
Further Resources
Demos
http://dev.sencha.com/playpen/gxt/aria2/test.html

http://dev.sencha.com/deploy/dev/examples/key-f...
Questions?
Designing for Accessibility with ARIA
Upcoming SlideShare
Loading in...5
×

Designing for Accessibility with ARIA

4,114

Published on

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.

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

No Downloads
Views
Total Views
4,114
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
71
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide















  • a) navigable functionality
    c) focus management
    g) contrast
    i) ARIA
  • a) navigable functionality
    c) focus management
    g) contrast
    i) ARIA
  • Todo: Add screenshot of current active focus?
  • Todo: Add screenshot of current active focus?
  • Todo: Add screenshot of current active focus?







  • Attributes enable compatibility with screen readers by instructing what the divs, tds, spans, etc are
  • Attributes enable compatibility with screen readers by instructing what the divs, tds, spans, etc are
  • Attributes enable compatibility with screen readers by instructing what the divs, tds, spans, etc are
  • Attributes enable compatibility with screen readers by instructing what the divs, tds, spans, etc are
  • Attributes enable compatibility with screen readers by instructing what the divs, tds, spans, etc are
  • Attributes enable compatibility with screen readers by instructing what the divs, tds, spans, etc are
  • Attributes enable compatibility with screen readers by instructing what the divs, tds, spans, etc are



























  • Transcript of "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?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×