AVT- An interactive element/widget must have an accessible name

Summary

To help users navigate a page, interactive elements and widgets (scripted with WAI-ARIA) must have an accessible name specified with the aria-label attribute, the aria-labelledby attribute or the element’s inner text, as defined in the WAI-ARIA (ARIA) specification for accessible name computation.

Steps to reproduce

GitLab->Help

What is the expected correct behavior?

Without proper labeling techniques, Assistive Technologies may not be able to accurately present the widget’s name and purpose. This affects the user’s navigation and ability to interact with the content.

Possible fixes

Before investigating this issue, resolve any errors related to invalid IDs.

  • Identify the element that caused the error and obtain its ARIA role.
  • Inspect the element’s current label or accessible name.
  • Use the ARIA specification to provide a proper accessible name based on the element’s role.

For example:
The following code snippet shows a tree widget labelled with an aria-label attribute:

  <div role="tree" aria-label="table of contents" tabindex="0">...</div>

The following code snippet shows a tree widget labelled with an aria-labelledby attribute:

   <h1 id="contents">Table of contents</h1>
   ...
   <div role="tree" aria-labelledby="contents" tabindex="0">...</div>

Relevant screenshots

@sharonchen @carmacleod gitlab-ce2677490 gitlab-ce2278648

Edited by 🤖 GitLab Bot 🤖