User interface component missing a role describing its function

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>