aria-roledescription

Use aria-roledescription on elements with a semantic role

Who might be affected

Screen Reader

Description

The aria-roledescription property allows authors to override how assistive technologies localize, and announce the name of the element's role. It is important to understand that the purpose of the aria-roledescription attribute is not to change the element's semantics, but rather to specify its already existing semantics. For example, specify a button as an "attachment button" if its purpose is to add files for upload. Because it should only extend semantics, the role name on the aria-roledescription value must match the original role name.

Quick Fixes

Provide "object" elements with accessible names.

1✓   <img aria-roledescription="very important img"
2         src="image.png" alt="image description" />
3
4✗   <img aria-roledescription="very important image"
5         src="image.png" alt="image description" />

How Users Are Affected

Users may not understand and be able to use elements with conflicting role names.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
4.1.2 Name, Role, Value (A)