Rich internet application accessibility - a quick overview


Published on

Presentation to be given at future meeting of the University of Dundee Web Group - an overview of rich internet application accessibility and WAI-ARIA.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Rich internet application accessibility - a quick overview

  1. 1. Emerging trends in Web Accessibility: a quick overview David Sloan UoD Web Group Wednesday 27 February 2013 Image Credit: Flickr user @NathanaelB
  2. 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
  4. 4. The old days• W3C WCAG 1.0 and dynamic content accessibility: UoD Web Group, 27 Feb 2013 4
  5. 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. 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. 7. Not a shining exampleof best practice inaccessible RIA design! UoD Web Group, 27 Feb 2013 7
  8. 8. 2 WAI-ARIA UoD Web Group, 27 Feb 2013 8
  9. 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. 10. WAI-ARIA Landmark rolesIllustration from UoD Web Group, 27 Feb 2013 10
  11. 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. 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. 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. 14. UoD Web Group, 27 Feb 2013 14
  15. 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: UoD Web Group, 27 Feb 2013 15
  16. 16. Using WAI-ARIA: caveats• Standardisation issues with new interaction styles (particularly new keyboard behaviours) – DHTML Style Guide trying to address this (• 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. 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. 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. 19. Resources: ARIA• W3C WAI ARIA resources (inc the current spec):• Opera WSC intro to ARIA:• IBM intro to ARIA:• Microsoft intro to ARIA:• A List Apart ARIA Accessibility issue (Nov 30, 2010): UoD Web Group, 27 Feb 2013 19