User interface component missing a role describing its function

Compliance Data & User Impact

User Impact: Critical

100% Complete

Disabilities Affected:

  • blindness
  • deafblindness

WCAG Version:
2

WCAG Levels:

  • A

WCAG Guidelines:

Solution Techniques:

Automated Test Accuracy:
Medium

Check1st Severity:
3

DRRSAG Designations:

  • role

How to Fix the Problem

Check whether you can use a different HTML element which matches the element’s functionality, e.g. use an <a> element if the element acts as a link. In case this is not possible add a role attribute to the element, using one of the WAI-Aria roles according to the specification.

The Algorithm, in Simple Terms

The engine scans all elements having one of the following events: keydown, keyup, keypress, click, dblclick, mousedown and mouseup for an appropriate role.

Why Is it Important?

Users who use assistive tools, such as screen readers, rely on exposure of the role attribute to understand the context such as a button, link. Exposing the role enables users to understand the widget and how to interact with it.

Code Example

<div role="toolbar"
tabindex="0"
id="id_example_customToolbar"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);"
onclick="return optionClickEvent(event);"
onblur="hideFocus()"
onfocus="showFocus()"
>
<img src="/example_"img/btn1.gif"
role="button"
tabindex="-1"
alt="example_Home"
id="id_example_b1"
title="Home">
<img src="/example_"img/btn2.gif"
role="button"
tabindex="-1"
alt="example_Refresh"
id="id_example_b2"
title="Refresh">
<img src="/example_"img/btn3.gif"
role="button"
tabindex="-1"
alt="example_Help"
id="id_example_b3"
title="Help">
...</div>

Additional Information

https://www.w3.org/TR/aria-in-html/

Example

Access Example

Ignore this issue if this element is part of a list of similar elements or a container of a list such as: select, autocomplete field widget, the table inside a date picker widget, a tab in a tab control widget).

This element perfoms as a container, and has no functionality. This container may contain another elements that has functionality or logical role.

Ignore this issue if this element has an alternative that performs the same and overrides the content of this element.

accessibility@user1st.com