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