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.

2. Accessibility
Enabling Others to
Use your Apps
AARON CONRAN
DARRELL MEYER
SENCHA

3. Checklist
App Idea
Developme
nt
Testing
Accessibilit

4. Why implement
Accessibility?

5. Further Reach

6. Further Reach
Enable more users
Comply with Section 508
Sell to Government

7. What makes an App
Accessible?

8. Section 508

9. 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

10. 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.

11. 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

12. Navigable

13. Navigable
Application should be navigable without a
mouse
Keyboard support and focus management

14. Color Choice

15. Color Choice
Sufficient contrast
Support high contrast mode
Supply high contrast theme

16. Color Choice

17. Color Choice
Sufficient contrast
Support high contrast mode
Supply high contrast theme

18. Screen Reader
Compatibility

19. Screen Reader
Compatibility
Additional ARIA
Attributes
• Role - type of widget
• Name - description
• State - current state
Allow screen readers to
understand widgets
instead of markup

20. ARIA Roles
alert tree
button treeitem
dialog tabpanel
grid tab
gridcell
listbox progressbar
slider menu
http://www.w3.org/TR/wai-aria/

21. Tools Available

22. Tools Available
Tools
MSAA - Microsoft Active
Accessibility
Inspect32
Screen Readers
JAWS
NVDA - Non Visual Desktop

23. How?

24. 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

25. 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

26. Component Overview

27. 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

28. 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

29. 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

30. 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

31. DatePicker
Standalone or as dropdown in form /
menu
Shortcuts allow quick navigation by month
or year
Marked up as ARIA grid

32. ListView & DualListField
ListView
Can be single or multi selectable
Hold Shift for contiguous, Ctrl for
discontiguous selection
DualListField
Combines two ListView’s and buttons

33. 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

34. 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

35. 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

36. 3rd Party Verification

37. 3rd Party Verification
TPG - The Pacilleo Group

38. 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

39. Questions?