rich internet application accessibility - a quick overview
DESCRIPTION
Presentation to be given at future meeting of the University of Dundee Web Group - an overview of rich internet application accessibility and WAI-ARIA.TRANSCRIPT
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
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
1 RICH INTERNET APPLICATIONS AND ACCESSIBILITY
UoD Web Group, 27 Feb 2013 3
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
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
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
UoD Web Group, 27 Feb 2013 7
Not a shining example of best practice in accessible RIA design!
2 WAI-ARIA
UoD Web Group, 27 Feb 2013 8
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
WAI-ARIA Landmark roles
UoD Web Group, 27 Feb 2013 10
Illustration from http://www-03.ibm.com/able/resources/wai_aria_intro.html
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
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
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
http://hanshillen.github.com/jqtest/UoD Web Group, 27 Feb 2013 14
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
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
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
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
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