See plans and pricing

Every clickable button on your site needs a name that describes what it does, such as "Add to cart" or "Submit". If a button only shows an icon with no label attached, screen reader users hear nothing meaningful and can't tell what will happen when they activate it.

How to fix it

1. Locate the <button> element (or any element with role="button") that has no visible text.
2. If the button already has a visual icon or symbol but no text, add a descriptive aria-label attribute, e.g. aria-label="Close menu".
3. Alternatively, add visually hidden text inside the button using a screen-reader-only CSS class, keeping the icon visible to sighted users.
4. If the button's accessible name should come from another element on the page, use aria-labelledby pointing to that element's id instead.
5. Never leave a button with an empty aria-label (aria-label="") or an aria-labelledby pointing to a missing or empty element.

<button><i class="icon-close"></i></button>

<button aria-label="Close menu"><i class="icon-close"></i></button>

View the full rule reference from Deque University

See plans and pricing