The document discusses emerging trends in web accessibility, including the potential of accessible rich internet applications using WAI-ARIA and HTML5. It provides an overview of WAI-ARIA and how it defines new attributes to describe roles, states, and properties to make applications more accessible to assistive technologies. The document also notes some challenges in accessibility with rich applications and the relationship between WAI-ARIA and HTML5.

1. Emerging trends
in Web
Accessibility: a
quick overview
David Sloan
UoD Web Group
Wednesday 27 February 2013
http://www.flickr.com/photos/purecaffeine/5399530443/
Image Credit: Flickr user @NathanaelB

2. Outline
• A quick overview of the potential of accessible
and inclusive rich Web Applications:
• A look at WAI-ARIA and how it can help
• HTML5 and accessibility
UoD Web Group, 27 Feb 2013 2

3. 1 RICH INTERNET APPLICATIONS
AND ACCESSIBILITY
UoD Web Group, 27 Feb 2013 3

4. The old days
• W3C WCAG 1.0 and dynamic content accessibility:
http://www.w3.org/TR/WCAG10/#gl-new-technologies
UoD Web Group, 27 Feb 2013 4

5. Now
• Client-side scripting can enhance user
experience for disabled people
• There is no evidence that a specific disability
group will be disadvantaged by client-side
scripting per se
– Though it is still a technology accessibility issue
• But – scripting must support accessible
interactivity
UoD Web Group, 27 Feb 2013 5

6. Key challenges for RIA accessibility
• Can I activate the control?
• Can I anticipate what will happen when I
activate it?
• Can I understand page layout?
• If something changes, will I know about it?
UoD Web Group, 27 Feb 2013 6

7. Not a shining example
of best practice in
accessible RIA design!
UoD Web Group, 27 Feb 2013 7

8. 2 WAI-ARIA
UoD Web Group, 27 Feb 2013 8

9. WAI-ARIA: Overview
• Accessible Rich Internet Applications – a draft
framework by the W3C Web Accessibility Initiative
(WAI)
• Provides a bridge between web apps, browser, OS
Accessibility APIs and assistive technologies
– Complements other WAI guidelines
– Wide support amongst browsers and Ats - so worth using
now
• Defines new HTML attributes and values to describe
content Roles, States and Properties
UoD Web Group, 27 Feb 2013 9

10. WAI-ARIA Landmark roles
Illustration from http://www-03.ibm.com/able/resources/wai_aria_intro.html
UoD Web Group, 27 Feb 2013 10

11. WAI-ARIA enhancing keyboard access
• ARIA provides more value to the existing HTML
tabindex attribute
• Allows keyboard focus to be given to elements that
don’t natively support it
• tabindex=“{0 |n | -1}” – defines where in
tab order element receives focus (0 < n < 32768)
• tabindex=“-1” – element not in tab focus, but
can be given focus with JavaScript; accessed via an
arrow key or other button
UoD Web Group, 27 Feb 2013 11

12. Roles, states and properties
• Providing information on widgets to browsers/ATs
– What does it do? (e.g. role=“slider”)
– State (e.g. aria-required=“true”, aria-
checked=“false”, aria-
disabled=“true”)
• State can be changed through use of scripting
• aria-labelledby and aria-describedby
complement <label> by associating
labels/descriptions to elements
UoD Web Group, 27 Feb 2013 12

13. Roles, states and properties
<ul role=“menubar”>
<li role=“menuitem” aria-haspopup=“true” aria-
expanded=“false”><a href=“about.htm”
tabindex=“0”>About</a>
<ul role=“menu”>
<li role=“menuitem”><a href=“history.htm”>Our
History</a></li>
<li role=“menuitem”><a
href=“staff.htm”>Staff</a></li>
...
</ul>
ARIA-enhanced drop-down nav menu example based on
Chisholm and May (2008), p114
UoD Web Group, 27 Feb 2013 13

14. http://hanshillen.github.com/jqtest/
UoD Web Group, 27 Feb 2013 14

15. Live regions
• Supporting notification of and access to content
updates
• Allow you to define assertiveness and extent of
notifications
– Based on importance of the update to user understanding
– Used by ATs in handling notifications - aria-live=“off
| polite | assertive”
– To specify extent of update to be presented by AT, use
aria-atomic
• Video of example: http://goo.gl/h2Aak
UoD Web Group, 27 Feb 2013 15

16. Using WAI-ARIA: caveats
• Standardisation issues with new interaction styles
(particularly new keyboard behaviours)
– DHTML Style Guide trying to address this
(http://dev.aol.com/dhtml_style_guide)
• Stilll need to consider people with scripting
disabled/unsupported
• “Paves the cowpath” - i.e. ARIA helps you use current
HTML specs to develop more accessible RIAs
• Not an excuse to fix inappropriately written HTML
UoD Web Group, 27 Feb 2013 16

17. WAI-ARIA and HTML5 – the future
• Still need to deal with the past (i.e. non-
support in legacy browsers/ATs)
• HTML 5 – many new elements and attributes
will enhance accessibility
– But accessibility support in the spec is a significant
ongoing issue for debate: canvas, video, longdesc
• A wider question - should HTML 5 render WAI-
ARIA obsolete?
UoD Web Group, 27 Feb 2013 17

18. Resources: Accessible RIAs
• Bruce Lawson and Remy Sharp: Introducing
HTML5 (2011) New Riders. ISBN
9780321687296
• Joshue O’Connor: Pro HTML 5 Accessibility
(2012) Apress. ISBN 9781430241942
• Wendy Chisholm and Matt May: Universal
Design for Web Applications (2008) O’Reilly.
ISBN 9780596518738
UoD Web Group, 27 Feb 2013 18

19. Resources: ARIA
• W3C WAI ARIA resources (inc the current
spec): http://www.w3.org/WAI/intro/aria
• Opera WSC intro to ARIA: http://goo.gl/Hg05V
• IBM intro to ARIA: http://goo.gl/lr3NK
• Microsoft intro to ARIA: http://goo.gl/UCCil
• A List Apart ARIA Accessibility issue (Nov
30, 2010):
http://www.alistapart.com/issues/319
UoD Web Group, 27 Feb 2013 19