HTML 5 Accessibility

uglyveinInternet και Εφαρμογές Web

24 Ιουν 2012 (πριν από 4 χρόνια και 9 μήνες)

345 εμφανίσεις

Why is HTML5 Accessibility important?
Because this child may never know HTML 4.

HTML 5 & WAI ARIA



Steve Faulkner

TPG

sfaulkner@paciellogroup.com


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"





Implemented in Opera 9.5+


Keyboard accessibility



Not exposed to AT
X


Potential
-

HTML5 Form controls

Potential
-

HTML5 Form controls


Input type="date"






Implemented in Opera 9.5+


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


Potential
-

HTML5 Form controls


Slider
demo


Combobox
demo


Date picker
demo


Spin box
demo


Keyboard accessibility



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

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


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