Windows Browsers Summary - Firefox has the best HTML5 Accessibility Support Score
HTML5 Accessibility Support Score
40/100 86/100 45/100 18/100 18/100
Mac Browsers Summary - Safari has the best HTML5 Accessibility Support Score
HTML5 Accessibility Support Score
42/100 - 27/100
14/100 72/100
Overview
This site is a resource to provide information about which new HTML5 user interface features are accessibility supported in browsers, making them usable by people who rely upon assistive technology (AT) to use the web.
Note: Browser's may not have practical accessibility support for HTML features on particular operating systems. Refer to Rough Guide: browsers, operating systems and screen reader support for details.
It is not intended to dissuade developers from using new HTML5 features. Sometimes there are better choices, sometimes developers have to add a little extra to make the feature useful or usable, and other times features have simply not been implemented by any browser or only by browsers that do not yet support assistive technologies. As a consequence it may not yet be practical to use a particular HTML5 feature. Example work arounds for lack of implementation or lack of accessible implementation are linked from the Solutions page.
The information in the support table is updated on a semi-regular basis, to keep up with support improvements made in browsers as new versions are released.
Support Tables - Legend & notes
NOTE: Support Scores for Opera on Windows and Mac and Safari on Windows are no longer being updated (scores as of February 2012) as there is no active effort to implement accessibility support in these browsers.
Windows browsers - Details
new HTML5 elements | ![]() |
![]() |
![]() |
![]() |
![]() |
Notes |
---|---|---|---|---|---|---|
article element |
![]() |
![]() |
![]() |
![]() |
![]() |
IE/Opera/Safari: provide the same amount of semantic information to AT as a div element Chrome: exposes element with a Firefox: exposes element with a |
aside element |
![]() |
![]() |
![]() |
![]() |
![]() |
IE/Opera/Safari: provide the same amount of semantic information to AT as a div element. Chrome: exposes element with a Firefox: exposes as ARIA |
audio element |
![]() |
![]() |
![]() |
![]() ![]() |
![]() |
Firefox:
Opera: has keyboard support, but no AT support.
Chrome: exposes limited accessibility information for the audio controls but no accessible names and has no keyboard support.
IE 10:
|
canvas element |
![]() ![]() |
![]() ![]() |
![]() ![]() |
![]() |
![]() |
IE and Firefox: supports the accessible canvas element sub-DOM Chrome: keyboard access to sub DOM, but no exposure of semantics. |
datalist element |
![]() ![]() |
![]() ![]() |
![]() |
![]() ![]() |
![]() |
Opera: keyboard accessible. Firefox: keyboard accessible. list items exposed correctly, but presence of datalist not indicated when focus is on the edit box, (suggest text field should be exposed as a Chrome: keyboard accessible. Does not expose datalist as list, does not convey presence of data list from the edit box |
details element |
![]() ![]() |
![]() |
![]() |
![]() |
![]() |
Currently provides the same amount of semantic information to AT as a div element. Chrome: keyboard support, does not expose semantics correctly.
|
figcaption element |
![]() |
![]() |
![]() |
![]() |
![]() |
Currently provides the same amount of semantic information to AT as a Firefox: exposes element as Ia" caption role and the element name as an IA2 object attribute, exposes the |
figure element |
![]() |
![]() |
![]() |
![]() |
![]() |
IE/Opera/Safari: provide the same amount of semantic information to AT as a div element Chrome: exposes element with a Firefox: exposes element role=group with accessible name from figcaption. |
footer element |
![]() ![]() |
![]() |
![]() |
![]() |
![]() |
IE/Opera/Safari: provide the same amount of semantic information to AT as a div element Chrome: exposes element with a Firefox: exposes as ARIA landmark |
header element |
![]() |
![]() |
![]() |
![]() |
![]() |
IE/Opera/Safari: provide the same amount of semantic information to AT as a div element Chrome: exposes element with a Firefox: exposes element name |
hgroup element |
![]() |
![]() |
![]() |
![]() |
![]() |
not implemented |
color input |
![]() ![]() |
![]() |
![]() |
![]() ![]() |
![]() |
Chrome: has keyboad support, exposes button as role=text in MSAA and a role=section in IA2, does not expose color information on button. Opera: keyboard accessible, but no information exposed to assistive technology. |
Date input |
![]() ![]() |
![]() |
![]() |
Not supported![]() |
![]() |
Chrome: keyboard operable, no role states and property informsation exposed for calendar interface. No indication that the control can expose a date picker control. Opera: date picker cannot be activated using the keybaord, no information exposed to assistive technology. |
Date and Time input |
![]() |
![]() |
![]() |
![]() |
![]() |
Opera: date picker cannot be activated using the keybaord, no information exposed to assistive technology.
|
Local Date and Time input |
![]() |
![]() |
![]() |
![]() |
![]() |
Opera: date picker cannot be activated using the keybaord, no information exposed to assistive technology.
|
E-mail input |
![]() |
![]() ![]() |
![]() |
![]() |
![]() |
Firefox: invalid state exposed in accessibility API. Error message (tooltip)not exposed via accessibility API. tootlip error message not keyboard accessible. |
Month input |
![]() |
![]() |
![]() |
![]() |
![]() |
Opera: date picker cannot be activated using the keybaord, no information exposed to assistive technology.
|
Number input |
![]() ![]() |
![]() |
![]() |
![]() ![]() |
![]() ![]() |
Opera: keyboard accessible. Chrome : keyboard accessible, role exposed as Safari: keyboard support. |
Range input |
![]() |
![]() |
![]() |
![]() ![]() |
![]() ![]() |
Chrome: correct role, full keyboard support, slider value exposed. Opera: no role, partial keyboard support, slider value not exposed. Safari: partial keyboard support. |
Search input |
![]() |
![]() |
![]() |
![]() |
![]() |
The difference between input type="search" and type="text" is 'primarily stylistic'. |
Telephone input |
![]() |
![]() |
![]() |
![]() |
![]() |
? |
Time input |
![]() |
![]() |
![]() |
![]() ![]() |
![]() |
Opera: keyboard accessible. Chrome: keyboard accessible, role exposed as edit box should be spinbutton |
URL input |
![]() |
![]() ![]() |
![]() |
![]() |
![]() |
Firefox: invalid state exposed in accessibility API. Error message (tooltip)not exposed via accessibility API. tootlip error message not keyboard accessible. |
Week input |
![]() |
![]() |
![]() |
![]() ![]() |
![]() |
Opera: date picker cannot be activated using the keybaord, no information exposed to assistive technology. Chrome : keyboard accessible, role exposed as edit box should be spinbutton |
main element | ||||||
menu > context menu |
![]() |
![]() ![]() |
![]() |
![]() |
![]() |
Firefox: |
menu > list |
![]() |
![]() |
![]() |
![]() |
![]() |
not implemented |
menu > toolbar |
![]() |
![]() |
![]() |
![]() |
![]() |
not implemented |
meter element | ![]() |
![]() |
![]() |
![]() |
![]() |
Chrome: name, role, properties not exposed. Opera:name, role, properties not exposed. |
nav element |
![]() |
![]() |
![]() |
![]() |
![]() |
IE/Opera/Safari: provide the same amount of semantic information to AT as a div element. Chrome: exposes element with a Firefox: exposes as ARIA landmark |
output element |
![]() |
![]() |
![]() |
![]() |
![]() |
Firefox: accessibility support implemented - IA2 section role, with aria-live=polite and hasIA2 controlled_by relation defined by @for attribute. |
progress element |
![]() |
![]() |
![]() |
![]() |
![]() |
Chrome: exposes name role, state and value correctly! Opera: name, role and state content not exposed. Firefox: exposes name role, state and value correctly! |
section element |
![]() |
![]() |
![]() |
![]() |
![]() |
IE/Opera/Safari: provide the same amount of semantic information to AT as a div element Chrome: exposes element with a Firefox: exposes element with a |
summary element |
![]() ![]() |
![]() |
![]() |
![]() |
Not supported![]() |
IE/Opera/Safari: provide the same amount of semantic information to AT as a div element Chrome: keyboard support only Webkit: no keyboard access. No role/name/state information exposed. |
track element | ![]() ![]() |
![]() |
![]() |
![]() ![]() |
![]() ![]() |
IE: supports both WebVTT and TTML Chrome/Opera/Safari: only support WebVTT Refer to WebVTT support in browsers for more details |
video element |
![]() |
![]() |
![]() |
![]() ![]() |
![]() |
Firefox: keyboard support suboptimal - cannot interact with individual controls. Opera: has keyboard support, but no AT support.
Chrome: exposes limited accessibility information for the controls but no accessible names and has no keyboard support.
IE 10: Exposes controls via accessibility APIs. Complete accessible role, name and description for all controls. Full keyboard support for visible controls |