HTML5 & WAI-ARIA - Happy Families

HTML 5 & WAI ARIA Steve Faulkner TPG [email_address] Accessibility 2.0, September 22, 2009

HTML 5 - the Future
It’s the next version of HTML
Many new features are not yet implemented or decided upon.
Many new features that will make it easier for developers to provide accessible and inaccessible content
Its huge! 808 pages

WAI-ARIA NOW
Allows the adding of name, role, state and property information to any element using attributes
<div role=“slider” >
<input aria-required=“true” >
<img role=“presentation” >
<input type=“text” aria-haspopup=“true” >
Its still in development, but many features are stable and implemented in browsers and AT
It can be used with HTML, XHTML, SVG, XUL and others.

Future Potential
Semantic elements
<nav> <article> <footer> etc.
Will provide semantic structure
Not implemented in browsers
Not supported by AT

Future Potential
Old Way HTML 4
New Way HTML5

Future NOW
Landmark roles
Banner, mainNavigation etc.
Chunk pages into large perceivable regions
Navigation of page in a few keystrokes
Implemented in browsers
Supported by AT (JAWS, NVDA, ORCA)
Compatible with HTML 4,5 & XHTML
Do not serve the same function as the new HTML5 semantic elements
Landmarks demo

ARIA NOW
HTML 4 + ARIA
HTML5 + ARIA

datalist
Implemented in Opera 9.5+
Keyboard accessibility 
Not exposed to AT X
Form control demo
Potential - HTML5 Form controls

Input type="number"
Not exposed to AT X

Input type="date"
Keyboard accessibility X
Not exposed to AT X

Input type="range"
Implemented in Opera 9.5+ & Safari 4+
Keyboard accessibility  partial
Not exposed to AT X

Slider demo
Combobox demo
Date picker demo
Spin box demo
name, role, properties and states exposed to AT 
ARIA enabled Form controls

required
<input type="text" required >
Implemented in Opera 9.5+ & Safari 4+
Not exposed to AT X
aria-required
<input type="text" aria-required=“true” >
Implemented in Firefox 3+ and IE 8
Exposed to AT 
Potential - HTML5 Form controls ARIA - NOW

HTML 5 Audio & Video
Native accessible controls
Implemented in Firefox 3.5
Captioning and annotations
Fallback
“ It has been decided that the first version of HTML5 <video>
(and <audio>) will not have an in-built solution for captions, audio
annotations and the like, because it is possible to do such with
javascript and external files.“
Silvia Pfeiffer
Video Demo

HTML 5 Audio & Video
<video src="movie.ogg"> Your browser is not video-enabled ; <a href="movie.ogg">download the video</a> and <a href="movie.txt">transcript</a>. </video>
<audio src="horse.wav"> Your browser does not support the audio element.
<a href=“horse.txt">transcript</a> </audio>
If you want users to access content, don’t put it inside the video or audio elements

Potential shit fight
Canvas
Is being used to produce UI’s e.g. Bespin
Only way to make accessible is to create a duplicate of what’s created using canvas i.e. big dirty bolt on accessibility

HTML5 Canvas element It’s a black hole <canvas> </canvas> On browsers that support canvas – you can’t access to the fallback content

HTML5 Canvas element “ When authors use the canvas element, they must also provide content that, when presented to the user, conveys essentially the same function or purpose as the bitmap canvas. This content may be placed as content of the canvas element. The contents of the canvas element, if any, are the element's fallback content.” Source: http://dev.w3.org/html5/spec/the-canvas-element.html#the-canvas-element BAD advice – don’t do it. Make fallback available outside of the canvas element!

HTML5 Canvas element Canvas based graph depicting amount of emails, issues and bugs to be processed over time.

HTML5 Canvas element The data is provided in tabular format inside the <canvas> element. BUT nobody using a canvas supporting browser can access it unless they ‘view source’

HTML5 Canvas element Maybe we will have better luck viewing it in IE , a browser that does not support canvas...

Potential
Drag & Drop
native keyboard support - not mentioned in HTML 5
Pretty much maps on to ARIA drag & drop except for providing state info about item being dragged.
Limited support for ARIA drag and drop in JAWS and NVDA

ARIA & HTML 5 Potential
Integration of ARIA started
Integration is about defining what bits of ARIA can be used with what bits of HTML
ARIA is a separate spec – not dependent
Does not really matter
Validation checking is available
Support in AT and Browsers is good

ARIA & HTML 5
ARIA validates in HTML5
Validator.nu & W3C validator have HTML5+ARIA checking

ARIA NOW

References
HTML5
HTML 5 Specification
HTML 5: The Markup Language
Form controls
HTML 5 Specification: 4.10 Forms
HTML5 Forms Demo Bruce Lawson
Video
First experiments with itext Silvia Pfeiffer
The most pressing Accessibility issue in HTML5 today? <video> John Foliot
Accessibility of HTML 5 video bruce lawson
Keyboard control of html5 video elements David Bolter
Canvas
HTML 5 Specification:4.8.11 The canvas element
Canvas, accessibility and SVG Bruce Lawson

References
WAI ARIA
Accessible Rich Internet Applications (WAI-ARIA) (internal editor's draft)
WAI-ARIA Best Practices (internal editor's draft)
WAI-ARIA Primer (internal editor's draft)
Accessible drag and drop using WAI-ARIA Gez lemon
WAI-ARIA Implementation in JavaScript UI Libraries
Using WAI ARIA Landmark Roles

HTML5 & WAI-ARIA - Happy Families

by stevefaulkner

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 11

Statistics

HTML5 & WAI-ARIA - Happy Families Presentation Transcript

http://www.slideshare.net	10
http://static.slidesharecdn.com	1