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