HTML Guide for icon

Bad value “icon” for attribute “role” on element “span”.

The icon value for attribute role is not a valid ARIA role.

ARIA Roles: Overview

ARIA roles are used to enhance accessibility by clearly defining the role and purpose of an element for assistive technologies. However, there are defined roles that you need to adhere to:

Standard roles include button, checkbox, alert, dialog, img, etc.
There is no ARIA role named icon.

Solution

To fix the issue, you need to use a valid ARIA role that accurately describes the purpose of the span element. If your intention is to convey that the span contains an icon, you might want to reconsider whether you need a role at all. Often, purely decorative elements should not have a role, or you might use an img role if it conveys a meaningful image.

Here’s how you can address this:

No ARIA role (if purely decorative): If the icon is purely decorative and does not add meaningful content to your page, you should remove the role attribute entirely.
```
<span class="icon"></span>
```
Using img role (if it represents an image): If the span represents an image or an icon that conveys meaningful information, you can use role="img" and provide a proper aria-label.
```
<span class="icon" role="img" aria-label="Icon Description"></span>
```
Using an appropriate role (if interactive): If the icon is part of an interactive element, you might need a different role. For instance, if the icon is inside a button:
```
<button>
   <span class="icon" aria-hidden="true"></span>
   Button text
</button>
```
Here, aria-hidden="true" is used to hide the decorative icon from screen readers as the text provides the necessary context.