Real World Accessibility

Becky GibsonDojo Accessibility LeadIBM Web Accessibility Architect

2

Top 3 Reasons People Don’t Implement Accessibility

3

3. My site IS accessible - it’s up 24x7!

4

2. People with Disabilities don’t use my site

5

1. Adding A11y is too hard and will ruin my design

is doing it

is doing it

UI is doing it

6

All these companies are doing it

7

ARIA - Accessible Rich Internet Applications

8

ARIA - What is it?

• Accessible Rich Internet Applications• W3C Specification, like HTML, CSS, XML etc.• Within Protocols & Formats Working Group which is

part of WAI - Web Accessibility Initiative• In Last Call Status• Implemented in Firefox, IE8 with Opera and Safari

under development• Gaining increasing support by browsers, Web toolkits

and assistive technologies

9

ARIA Overview

• Add role semantics to scripted UI elements• Update state information dynamically• Make items focusable via tabindex attribute• Add keyboard event handling

–Mimic the keyboard behavior of the rich client UI–Minimize tab key navigation

• Add live region info and notification to support Ajax

10

ARIA Example - Tree

Role = tree(on outer container)

Role = treeitemexpanded=true(on open Africa node)

Role = treeitemexpanded=false(on closed Australia node)

Role = treeitemselected=true(on highlighted Egypt child node with no children)

11

ARIA Roles• link• combobox, option• checkbox• radio, radiogroup• button• progressbar• slider• spinbutton• tree, treeitem• alert

• application• presentation• group• grid, gridcell• tab, tabcontainer,

tablist, tabpanel• list, listitem• menubar, menu• toolbar• more……

12

ARIA- States

State Valueschecked true | false | mixeddisabled true | falsereadonly true | falseexpanded true | falsevaluemin, valuemax, valuenow

CDATA

owns, haspopup IDREFdescribedby. labelledby IDREFMany more …….

13

ARIA Landmark Roles

• Makes finding and navigating to sections of the page easier– Application– Banner– Complementary– Contentinfo– Main– Navigation– search

14

Landmarks Example

banner

Navigation

Main

contentinfo

15

Landmark Example<div dojoType="dijit.layout.ContentPane" region="top"

class="banner" role="banner"> <span class="logo">WebA11y</span>

</div><!-- end of top --> <div id="left" dojoType="dijit.layout.ContentPane" region="left" role="navigation">

<!-- Tree goes here --> </div><!-- end of left --> <div id="content" dojoType="dijit.layout.ContentPane" title="Content"

role="main" aria-live="assertive" aria-atomic="true" > Info from selected tree item is loaded here

</div><!-- end of center --> <div dojoType="dijit.layout.ContentPane" region="bottom"

role="contentinfo" > <!-- footer goes here -->

</div><!-- end of bottom -->

16

ARIA Live Regions

• Perceivable sections are identified with region role• Live indicates region is updated

– Values of: Off, Polite, Assertive, Rude• Atomic identifies the extent of updates

– True – entire region is updated and relevant– False – only changed element needs to be presented to

user

17

Live Region Example

18

Live Region Example

<!-- message preview pane -->

<div id="message" dojoType="dijit.layout.ContentPane" region="center" minSize="20"role="region" aria-live="assertive" aria-atomic="true" >

Message Contents loaded here

</div>

<!-- end of "message" -->

19

Summary• JS Toolkits are implementing ARIA - use them!

– Dojo dijits are all fully accessible• ARIA makes Ajax accessible• Make your websites dynamic AND accessible!