Table Legend & notes:
"not supported" means if a suggested work around is provided it is not supported by the browser.
"partially supported" means the work around will provide some accessibility support in the browser.
"not implemented" means the feature has not yet been implemented in the browser.- "supported" means that when using a suggested solution the feature or an alternative for the feature is accessibility supported.
- The 'work arounds' cell of each row provides suggested solutions or links to suggested solutions.
- Please report any inaccuracies or links to solutions to sfaulkner@paciellogroup.com.
- The work arounds for Safari 5 are for the Mac OSX version, not the windows version.
- An ? indicates information is yet to be provided.
| new HTML5 elements |
Chrome 10 |
Firefox RC |
IE 9 RC |
Opera 11 |
Safari 5 (Mac) |
work arounds |
|---|---|---|---|---|---|---|
article element |
|
|
|
|
|
add ARIA role="article".
|
aside element
| |
|
|
|
|
add ARIA role="complementary" note: the screen reader Window Eyes has bugs in relation to use of some HTML5 elements in combination with some ARIA landmark roles. |
audio element
| |
|
|
|
|
add scripted controls |
canvas element
| |
|
|
|
|
various work arounds, usually involving providing a HTML alternative to canvas content, like: canvas charts |
datalist element
| |
|
|
|
|
Use a widget like: autocomplete |
details element
| |
|
|
|
|
Use a widget like: collapsible content area |
figcaption element
| |
|
|
|
|
? |
figure element
| |
|
|
|
|
? |
footer element
| |
|
|
|
|
add ARIA role="contentinfo" only once per page. note: the screen reader Window Eyes has bugs in relation to use of some HTML5 elements in combination with some ARIA landmark roles. |
header element
| |
|
|
|
|
add ARIA role="banner" only once per page. note: the screen reader Window Eyes has bugs in relation to use of some HTML5 elements in combination with some ARIA landmark roles. |
hgroup element
| |
|
|
|
|
if used you don't need to do anything as it's treated like a div element. |
color input
| |
|
|
|
|
Use an accessible widget like: Dijit Colour pallette |
Date input
| |
|
|
|
|
Use an accessible widget like: Dijit date picker or extjs date picker |
Date and Time input
| |
|
|
|
|
Use an accessible widget like: Dijit date picker or extjs date picker |
Local Date and Time input
| |
|
|
|
|
Use an accessible widget like: Dijit date picker or extjs date picker |
E-mail input
| |
|
|
|
|
degrades gracefully |
Month input
| |
|
|
|
|
Use an accessible widget like: Dijit date picker or extjs date picker |
Number input
| |
|
|
|
|
Use a widget like: dijit number spinner |
Range input
| |
|
|
|
|
Usa a widget like: slider or double slider |
Search input
| |
|
|
|
|
degrades gracefully |
Telephone input
| |
|
|
|
|
degrades gracefully |
Time input
| |
|
|
|
|
Use a widget like: dijit number spinner |
URL input
| |
|
|
|
|
degrades gracefully |
Week input
| |
|
|
|
|
Use an accessible widget like: Dijit date picker or extjs date picker |
menu > context menu
| |
|
|
|
|
Use a scripted context menu, include the aria-haspopup="true" attribute on an element that has a scripted context menu and don't forget to make the context menu navigable using the keyboard. |
menu> list
| |
|
|
|
|
Usa a widget like: dijit menu or jQuery menu or extjs menu |
menu > toolbar
| |
|
|
|
|
Use a widget like: extjs toolbar or dijit toolbar |
| meter element | |
|
|
|
|
Use a rating widget like: rating widget or dojo rating |
nav element
| |
|
|
|
|
add ARIA role="navigation". note: the screen reader Window Eyes has bugs in relation to use of some HTML5 elements in combination with some ARIA landmark roles. |
output element
| |
|
|
|
|
add an aria-live="polite" attribute |
progress element
| |
|
|
|
|
use a progress bar widget lie: dijit progressjQuery progress bar |
section element
| |
|
|
|
|
add ARIA role="region" |
summary element
| |
|
|
|
|
Use a widget like: collapsible content area |
video element
| |
|
|
|
|
add scripted controls |
