Because a checkbox can be perceived as a toggle button

Hi,

recently I discussed the following code snippet:

<button role="checkbox" aria-checked="true|false|nixed"><img
src=one-of-three-checkbox-states.png" alt=""> Activate something </button>

Problem: Finding the right HTML element for role="checkbox". 

According to HTML spec
http://www.w3.org/TR/html51/semantics-embedded-content.html#the-img-element
the role attribute can be applied to <img>, but

* there are compatibility problems with IE/JAWS 17 (checkbox label will not
always be read, instead the file name will be used as a fallback)
* focus still needs to be managed

The <button> seems to be an alternative to avoid focus management (assigning
a name is also not a problem). <button role=checkbox"> wouldn't conform to
HTML:
http://www.w3.org/TR/html51/sec-forms.html#the-button-element

So,

1. Can anybody explain why role="checkbox" is not suitable for <button>?
2. Is there any sort of overview for ARIA roles and suitable HTML elements
they can be assigned to?

Thanks,
Jan
--
Jan Hellbusch
Chemnitzer Str. 14, 44139 Dortmund
Tel.: +49 (231) 33005825 oder +49 (163) 3369925
--
Accessibility-Consulting seit 15 Jahren: http://2bweb.de
Blog: www.hellbusch.de
Bücher, Artikel: www.barrierefreies-webdesign.de

Received on Monday, 21 November 2016 08:46:14 UTC