missing-contextual-labeling

Elements whose context and relationship with other elements are conveyed by their appearance require an accessible name to convey the same information to screen reader users.

Who might be affected

Screen Reader

Description

Typically, an accessible name is required of interactive elements to provide users (mainly screen reader users) with the context of the element so that they can predict and understand what its purpose and the outcome of its activation are; however, there are also non-interactive elements that in some cases may require an accessible name, usually to express their relationship with other elements within complex components or to distinguish them from elements of the same type whose purpose is different. A few examples of such elements are video, tabpanel, and region (<section>).

Quick Fixes

The method for adding an accessible name may depend on the element's type since some elements have preferred labeling methods (especially if they are native elements and not based on the ARIA specification), so a good start is to check if the element has a preferred labeling method and use it. However, if the element's type does not have a preferred labeling method or the preferred labeling method cannot be implemented in this specific case, use the aria-label or aria-labelledby attributes.

Labeling radiogroup using HTML "legend" element

1<fieldset>
2    <legend>Select a vegetable:</legend>
3
4	<div>
5	    <input type="radio" id="cucumber" name="veggies" value="cucumber" />
6	    <label for="cucumber">Cucumber</label>
7	</div>
8
9	<div>
10	    <input type="radio" id="avocado" name="veggies" value="avocado" />
11	    <label for="dewey">Avocado</label>
12	</div>
13
14    <div>
15	    <input type="radio" id="lettuce" name="veggies" value="lettuce" />
16	    <label for="lettuce">Lettuce</label>
17	</div>
18</fieldset>

Labeling a section using aria-label attribute

1 <section aria-label="Latest news">
2    <!-- The section's content -->
3 </section>

Labeling a tabpanel using aria-labelledby attribute

1<div role="tablist">
2	<button role="tab"
3            aria-controls="london-p"
4            id="london">
5        London
6    </button>
7	<button role="tab"
8            aria-controls="paris-p"
9            id="paris">
10        Paris
11    </button>
12	<button role="tab"
13            aria-controls="tokyo-p"
14            id="tokyo">
15        Tokyo
16    </button>
17 </div>
18
19  <!-- The tabpanels -->
20  <div role="tabpanel" id="london-p" aria-labelledby="london">
21	<!-- Tabpanel content -->
22  </div>
23
24  <!-- The rest of the tabpanels -->

How Users Are Affected

Screen reader users may lose orientation on the page and have difficulty perceiving the context and purpose of some UI components.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.3.1 Info and Relationships (A)