Search Menu
Language Menu
Mobile Menu
OGCIO

8.26 WCAG 2.1 Success Criterion 4.1.2 − Name, Role, Value

Ensure all elements on a webpage have a “Name”, “Value” and “Role” assigned to them. This can generally be achieved by writing correct HTML coding according to relevant standards. If this is not done correctly, screen readers will read the wrong role for an element. In the example below, the screen readers will consider the button as an image. This makes the website confusing for visually impaired persons.

Before Rectification  

A sample HTML code showing a form button implemented using an IMG tag.

With the code snippet above, an image is used for a button. In this case,  a wrong role is used for an element and the element is missing a name.

After Rectification  

A sample HTML code showing a standard HTML INPUT tag.

With proper HTML coding, the role is used, and the input element is of the button type. In addition, a unique name has been given to the element. In this way, the screen readers will communicate to the user that the element is in fact a button and this in turn makes it easier for the user to know he/she may need to click that button.

WCAG 2.1 Reference:

https://www.w3.org/WAI/WCAG21/Understanding/name-role-value