SlideShare a Scribd company logo
Designing for Accessibility with ARIA
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


http://en.wikipedia.org/wiki/Section_508
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.
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
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 - current state
Allow screen readers to
understand widgets
instead of markup
ARIA Roles
alert          tree
button         treeitem
dialog         tabpanel
grid           tab
gridcell
listbox        progressbar
slider          menu


http://www.w3.org/TR/wai-aria/
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 out of the box
Supported technology
Browsers
Firefox 3
IE8 has partial support due to incomplete ARIA
Assistive Technology
JAWS 11
NVDA
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
Component Overview
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
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
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
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
DatePicker
Standalone or as dropdown in form /
menu
Shortcuts allow quick navigation by month
or year
Marked up as ARIA grid
ListView & DualListField
ListView
Can be single or multi selectable
Hold Shift for contiguous, Ctrl for
discontiguous selection
DualListField
Combines two ListView’s and buttons
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
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
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
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-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
Questions?

More Related Content

Viewers also liked (7)

PPTX
Jaws
linakolker
 
PDF
BEM It! for Brandwatch
Max Shirshin
 
PDF
Challenges with VPATs
Interactive Accessibility
 
PPTX
Mobile Accessibility on the Move
Interactive Accessibility
 
PDF
Accessible Responsive Web Design
Interactive Accessibility
 
PPTX
Accessibility in Responsive web design
Nexer Digital
 
PDF
The Legend of the Typical Screen Reader User
Jared Smith
 
BEM It! for Brandwatch
Max Shirshin
 
Challenges with VPATs
Interactive Accessibility
 
Mobile Accessibility on the Move
Interactive Accessibility
 
Accessible Responsive Web Design
Interactive Accessibility
 
Accessibility in Responsive web design
Nexer Digital
 
The Legend of the Typical Screen Reader User
Jared Smith
 

Similar to Designing for Accessibility with ARIA (20)

PDF
Html5 aria-css-ibm-csun-2016
Maureen (Moe) Kraft
 
PPTX
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Raj Lal
 
PPTX
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Raj Lal
 
PDF
Accessibility and JS: side-by-side
Felipe de Albuquerque
 
PDF
Making Chaos Accessible - Aaron Leventhal - Paris Web 2008
Association Paris-Web
 
PDF
Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
Rodrigo Castilho
 
PPTX
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Steven Faulkner
 
PPTX
SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...
Sencha
 
PPT
Software Accessibility Siddhesh
Siddhesh Bhobe
 
PDF
Developing an Accessible Web
greenideas
 
PDF
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
Patrick Lauke
 
PDF
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
Patrick Lauke
 
PDF
Next generation web accessibility: Improvement of usability for disabled users
Artur Ortega
 
PPTX
Accessibility And 508 Compliance In 2009
Emagination ®
 
PDF
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
Patrick Lauke
 
PDF
Intro to Web Accessibility: Koombea TechTalks
Koombea
 
PPTX
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Raj Lal
 
PPTX
Toolkit for the Digital Accessibility Space
3Play Media
 
PDF
A Toolkit for Digital Accessibility
3Play Media
 
PPTX
Accessibility and universal usability
Sarah Hudson
 
Html5 aria-css-ibm-csun-2016
Maureen (Moe) Kraft
 
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Raj Lal
 
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Raj Lal
 
Accessibility and JS: side-by-side
Felipe de Albuquerque
 
Making Chaos Accessible - Aaron Leventhal - Paris Web 2008
Association Paris-Web
 
Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
Rodrigo Castilho
 
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Steven Faulkner
 
SenchaCon 2016: Accessibility, Teamwork & Ext JS: A Customer Success Story - ...
Sencha
 
Software Accessibility Siddhesh
Siddhesh Bhobe
 
Developing an Accessible Web
greenideas
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
Patrick Lauke
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
Patrick Lauke
 
Next generation web accessibility: Improvement of usability for disabled users
Artur Ortega
 
Accessibility And 508 Compliance In 2009
Emagination ®
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
Patrick Lauke
 
Intro to Web Accessibility: Koombea TechTalks
Koombea
 
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Raj Lal
 
Toolkit for the Digital Accessibility Space
3Play Media
 
A Toolkit for Digital Accessibility
3Play Media
 
Accessibility and universal usability
Sarah Hudson
 
Ad

More from Sencha (20)

PDF
Breathe New Life into Your Existing JavaScript Applications with Web Components
Sencha
 
PDF
Ext JS 6.6 Highlights
Sencha
 
PDF
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha
 
PDF
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha
 
PDF
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha
 
PDF
Sencha Roadshow 2017: What's New in Sencha Test
Sencha
 
PDF
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha
 
PDF
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha
 
PDF
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha
 
PDF
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha
 
PDF
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha
 
PDF
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Sencha
 
PDF
Learn Key Insights from The State of Web Application Testing Research Report
Sencha
 
PPTX
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Sencha
 
PPTX
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
Sencha
 
PPT
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
Sencha
 
PPT
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
Sencha
 
PPT
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
Sencha
 
PPTX
Ext JS Architecture Best Practices - Mitchell Simeons
Sencha
 
PPTX
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
Sencha
 
Breathe New Life into Your Existing JavaScript Applications with Web Components
Sencha
 
Ext JS 6.6 Highlights
Sencha
 
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha
 
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha
 
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha
 
Sencha Roadshow 2017: What's New in Sencha Test
Sencha
 
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha
 
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha
 
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha
 
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha
 
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha
 
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Sencha
 
Learn Key Insights from The State of Web Application Testing Research Report
Sencha
 
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Sencha
 
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
Sencha
 
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
Sencha
 
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
Sencha
 
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
Sencha
 
Ext JS Architecture Best Practices - Mitchell Simeons
Sencha
 
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
Sencha
 
Ad

Recently uploaded (20)

PDF
Per Axbom: The spectacular lies of maps
Nexer Digital
 
PPTX
AVL ( audio, visuals or led ), technology.
Rajeshwri Panchal
 
PDF
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
PPTX
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
PPTX
Simple and concise overview about Quantum computing..pptx
mughal641
 
PDF
OFFOFFBOX™ – A New Era for African Film | Startup Presentation
ambaicciwalkerbrian
 
PPTX
Introduction to Flutter by Ayush Desai.pptx
ayushdesai204
 
PDF
GDG Cloud Munich - Intro - Luiz Carneiro - #BuildWithAI - July - Abdel.pdf
Luiz Carneiro
 
PDF
Peak of Data & AI Encore - Real-Time Insights & Scalable Editing with ArcGIS
Safe Software
 
PDF
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
PDF
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
PPTX
Agile Chennai 18-19 July 2025 Ideathon | AI Powered Microfinance Literacy Gui...
AgileNetwork
 
PPTX
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
PDF
NewMind AI Weekly Chronicles – July’25, Week III
NewMind AI
 
PDF
Economic Impact of Data Centres to the Malaysian Economy
flintglobalapac
 
PDF
introduction to computer hardware and sofeware
chauhanshraddha2007
 
PPTX
Agile Chennai 18-19 July 2025 | Emerging patterns in Agentic AI by Bharani Su...
AgileNetwork
 
PPTX
Agentic AI in Healthcare Driving the Next Wave of Digital Transformation
danielle hunter
 
PPTX
Agile Chennai 18-19 July 2025 | Workshop - Enhancing Agile Collaboration with...
AgileNetwork
 
PDF
Researching The Best Chat SDK Providers in 2025
Ray Fields
 
Per Axbom: The spectacular lies of maps
Nexer Digital
 
AVL ( audio, visuals or led ), technology.
Rajeshwri Panchal
 
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
Simple and concise overview about Quantum computing..pptx
mughal641
 
OFFOFFBOX™ – A New Era for African Film | Startup Presentation
ambaicciwalkerbrian
 
Introduction to Flutter by Ayush Desai.pptx
ayushdesai204
 
GDG Cloud Munich - Intro - Luiz Carneiro - #BuildWithAI - July - Abdel.pdf
Luiz Carneiro
 
Peak of Data & AI Encore - Real-Time Insights & Scalable Editing with ArcGIS
Safe Software
 
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
Agile Chennai 18-19 July 2025 Ideathon | AI Powered Microfinance Literacy Gui...
AgileNetwork
 
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
NewMind AI Weekly Chronicles – July’25, Week III
NewMind AI
 
Economic Impact of Data Centres to the Malaysian Economy
flintglobalapac
 
introduction to computer hardware and sofeware
chauhanshraddha2007
 
Agile Chennai 18-19 July 2025 | Emerging patterns in Agentic AI by Bharani Su...
AgileNetwork
 
Agentic AI in Healthcare Driving the Next Wave of Digital Transformation
danielle hunter
 
Agile Chennai 18-19 July 2025 | Workshop - Enhancing Agile Collaboration with...
AgileNetwork
 
Researching The Best Chat SDK Providers in 2025
Ray Fields
 

Designing for Accessibility with ARIA

Editor's Notes

  • #17: a) navigable functionality c) focus management g) contrast i) ARIA
  • #18: a) navigable functionality c) focus management g) contrast i) ARIA
  • #19: Todo: Add screenshot of current active focus?
  • #20: Todo: Add screenshot of current active focus?
  • #21: Todo: Add screenshot of current active focus?
  • #29: Attributes enable compatibility with screen readers by instructing what the divs, tds, spans, etc are
  • #30: Attributes enable compatibility with screen readers by instructing what the divs, tds, spans, etc are
  • #31: Attributes enable compatibility with screen readers by instructing what the divs, tds, spans, etc are
  • #32: Attributes enable compatibility with screen readers by instructing what the divs, tds, spans, etc are
  • #33: Attributes enable compatibility with screen readers by instructing what the divs, tds, spans, etc are
  • #34: Attributes enable compatibility with screen readers by instructing what the divs, tds, spans, etc are
  • #35: Attributes enable compatibility with screen readers by instructing what the divs, tds, spans, etc are