SiteLint documentation and guidelines

The button content is empty or fully unreachable

Description

An empty button description refers to a <button> element that lacks text or an accessible label, making it difficult for users, especially those relying on assistive technologies, to understand its purpose or function. Buttons without descriptive text or labels can create confusion and hinder the usability of web applications, particularly for users with disabilities.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers need descriptive labels to understand the purpose of buttons. An empty button provides no context, making it unusable.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear and descriptive button labels that help them understand the function and purpose of the button.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices rely on properly labeled buttons to interact efficiently.

Why it matters

Buttons are essential interactive elements in web applications. Providing meaningful and descriptive text or labels for buttons ensures that all users, particularly those using assistive technologies, can understand and use them effectively. An empty button description creates barriers to accessibility, leading to a poor user experience.

Coding problems and solutions

Common coding problems

  • Empty button tags: button elements that contain no text or content.
  • Non-descriptive button labels: button labels that do not adequately describe the button’s function.
  • Using icons without labels: buttons that rely solely on icons without providing alternative text or accessible labels.

How to fix it

Ensure buttons contain descriptive text

Make sure every <button> element includes text that clearly describes its function.

Incorrect example
<button type="submit"></button>
Correct example
<button type="submit">Submit</button>

Provide meaningful labels for buttons

Use descriptive text that conveys the button’s purpose.

Incorrect example
<button type="button">Click Here</button>
Correct example
<button type="button">Save changes</button>

Use ARIA labels for icon-only buttons

When using icon-only buttons, provide an accessible label using aria-label or aria-labelledby.

Incorrect example
<button type="button">Click Here</button>
Correct example
<button type="button" aria-label="Delete">
    <img src="delete-icon.png" alt="">
</button>
Correct example that supports automated translators
<button type="button">
  <img src="delete-icon.png" alt=""><span class="visually-hidden">Delete</span>
</button>

Read more about visually-hidden in the article Hiding a text but making it accessible to a screen reader.

Known limitations

  • Dynamic content: ensure that dynamically generated buttons also have descriptive text or labels.
  • Icon-only buttons: when using icons, ensure that all users can understand the button’s function through accessible labels.
  • Testing across devices: test buttons across different devices and screen readers to ensure they provide the necessary context and information.

Resources