ARIA in HTML - test cases for allowed roles on img elements with and without names

last updated 14 June 2023

If an image is provided a name using the alt attribute, or other valid naming mechanisms, then authors may specified the allowed roles on the element (while also meeting other requirements for the use of those roles - which are out of scope for this test).

If an image lacks an accessible name, then only the roles of img, none and presentation are allowed, though not recommended as these are unnecessary for authors to specify.

Tests:

Test 1

The following tests are of image elements with accessible names provided by use of alt, aria-label, aria-labelledby and the title attribute.

with alt

image

button

checkbox

link

meter

menuitem

menuitemcheckbox

menuitemradio

option

progressbar

radio

scrollbar

separator

slider

switch

tab

treeitem

doc-cover

with title

with aria-label

with aria-labelledby

Expected result:
No failures for use of ARIA roles would be flagged for any of the above examples. Use of img on a named image element is NOT RECOMMENDED. Confornamce checkers may indicate this as a warning.

Test 2

Authors MUST NOT use roles other than none/presentation on an image with an empty alt and no accessible name, and MUST NOT use roles other than none/presentation or img if the element lacks an alt and has no accessible name.

Expected result:
The above 5 examples should not fail allowed role rules. Conformance checkers may produce warnings for use of redundant roles on each of these examples.