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

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.

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

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

Old Way HTML 4

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

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

HTML 4 + ARIA

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

datalist

Implemented in Opera 9.5+

Keyboard accessibility 

Not exposed to AT X

Form control demo

Input type=&quot;number&quot; Implemented in Opera 9.5+ Keyboard accessibility  Not exposed to AT X Potential - HTML5 Form controls

Input type=&quot;number&quot;

Implemented in Opera 9.5+

Keyboard accessibility 

Not exposed to AT X

Potential - HTML5 Form controls Input type=&quot;date&quot; Implemented in Opera 9.5+ Keyboard accessibility X Not exposed to AT X

Input type=&quot;date&quot;

Implemented in Opera 9.5+

Keyboard accessibility X

Not exposed to AT X

Input type=&quot;range&quot; Implemented in Opera 9.5+ & Safari 4+ Keyboard accessibility  partial Not exposed to AT X Potential - HTML5 Form controls

Input type=&quot;range&quot;

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 Keyboard accessibility  name, role, properties and states exposed to AT  ARIA enabled Form controls

Slider demo

Combobox demo

Date picker demo

Spin box demo

Keyboard accessibility 

name, role, properties and states exposed to AT 

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

required

<input type=&quot;text&quot; required >

Implemented in Opera 9.5+ & Safari 4+

Not exposed to AT X

aria-required

<input type=&quot;text&quot; aria-required=“true” >

Implemented in Firefox 3+ and IE 8

Exposed to AT 

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

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

<video src=&quot;movie.ogg&quot;> Your browser is not video-enabled ; <a href=&quot;movie.ogg&quot;>download the video</a> and <a href=&quot;movie.txt&quot;>transcript</a>. </video>

<audio src=&quot;horse.wav&quot;> Your browser does not support the audio element.

<a href=“horse.txt&quot;>transcript</a> </audio>

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

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

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

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 validates in HTML5

Validator.nu & W3C validator have HTML5+ARIA checking

ARIA NOW

ARIA NOW

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

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

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