Your SlideShare is downloading. ×
0
Emerging trends                                                        in Web                                             ...
Outline• A quick overview of the potential of accessible  and inclusive rich Web Applications:• A look at WAI-ARIA and how...
1 RICH INTERNET APPLICATIONSAND 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           ...
Now• Client-side scripting can enhance user  experience for disabled people• There is no evidence that a specific disabili...
Key challenges for RIA accessibility• Can I activate the control?• Can I anticipate what will happen when I  activate it?•...
Not a shining exampleof best practice inaccessible RIA design!     UoD Web Group, 27 Feb 2013   7
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  (W...
WAI-ARIA Landmark rolesIllustration 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 foc...
Roles, states and properties• Providing information on widgets to browsers/ATs   – What does it do? (e.g. role=“slider”)  ...
Roles, states and properties<ul role=“menubar”>  <li role=“menuitem” aria-haspopup=“true” aria-  expanded=“false”><a href=...
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  ...
Using WAI-ARIA: caveats• Standardisation issues with new interaction styles  (particularly new keyboard behaviours)   – DH...
WAI-ARIA and HTML5 – the future• Still need to deal with the past (i.e. non-  support in legacy browsers/ATs)• HTML 5 – ma...
Resources: Accessible RIAs• Bruce Lawson and Remy Sharp: Introducing  HTML5 (2011) New Riders. ISBN  9780321687296• Joshue...
Resources: ARIA• W3C WAI ARIA resources (inc the current  spec): http://www.w3.org/WAI/intro/aria• Opera WSC intro to ARIA...
Upcoming SlideShare
Loading in...5
×

Rich internet application accessibility - a quick overview

828

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
828
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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 2013http://www.flickr.com/photos/purecaffeine/5399530443/ 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
  3. 3. 1 RICH INTERNET APPLICATIONSAND ACCESSIBILITY UoD Web Group, 27 Feb 2013 3
  4. 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. 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 http://www-03.ibm.com/able/resources/wai_aria_intro.html 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. http://hanshillen.github.com/jqtest/ 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: http://goo.gl/h2Aak 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 (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. 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): 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×