Digital Accessibility Knowledge Base

relationship

Provide to the user a meaningful associations between distinct pieces of content

Who might be affected
Screen Reader

Description

When the relationship between two elements that affect each other (e.g. hide. display, change state, etc.) is not implied by the DOM structure, you can express the nature of the relationship by attributes that instructs screen readers how to read and mediate the relationship correctly to the user. The WAI-ARIA has a variety of relationship-related attributes that indicate relationships or associations between elements that cannot be readily determined from the document structure. Unfortunately, different screen readers support different attributes, so none of them can be relied on as a single solution. Alternatively, you can convey the relationship between elements by using thearia-labelledby and aria-descibedby attributes.

Quick Fixes

The example below demonstrates a tabs component. See how each tab is pointing to its co-responding tab panel, using the "aria-controls" attribute. As a fallback each tab panel is pointing to its co-responding tab, using the "aria-labelledby" attribute.
1    <div class="tabs">
2        <div role="tablist" aria-label="a list of tabs">
3            <button role="tab"
4                    aria-selected="true"
5                    aria-controls="tab-content-1"
6                    id="tab-1">
7                First Tab
8            </button>
9            <button role="tab"
10                    aria-selected="false"
11                    aria-controls="tab-content-2"
12                    id="tab-2">
13                Second tab
14            </button>
15            <button role="tab"
16                    aria-selected="false"
17                    aria-controls="tab-content-2"
18                    id="tab-3">
19                Third tab
20            </button>
21        </div>
22        <div tabindex="0"
23             role="tabpanel"
24             id="tab-content-1"
25             aria-labelledby="tab-1">
26            <!-- Tab Content -->
27        </div>
28        <div tabindex="0"
29             role="tabpanel"
30             id="tab-content-2"
31             aria-labelledby="tab-2"
32             hidden="">
33            <!-- Tab Content -->
34        </div>
35        <div tabindex="0"
36        role="tabpanel" i
37        d="tab-content-3"
38        aria-labelledby="tab-3"
39        hidden="">
40            <!-- Tab Content -->
41        </div>
42    </div>
This example shows a little more complex relationship. The "div[role='combobox']" has an "aria-owns" attribute pointing to the list to signify they have a parent-child relationship. The input, on the other hand, has an "aria-controls" attribute pointing to the list to signify their connection.
1    <label for="op-input" id="op-label">
2        Choose One Option
3    </label>
4

5    <div>
6        <div role="combobox"
7            aria-expanded="false"
8            aria-owns="op-listbox"
9            aria-haspopup="listbox">
10

11            <input type="text"
12                    aria-autocomplete="list"
13                    aria-controls="op-listbox"
14                    id="op-input" />
15        </div>
16

17        <ul aria-labelledby="op-label"
18            role="listbox"
19            id="op-listbox">
20        </ul>
21    </div>
Warning! All "aria-owns" and "aria-controls" are supported only by JAWS. Although it is one of the most popular screen readers, it is for Windows OS only and therefore not relevant, for example, to mobile devices so it does not cater for a large number of users and therefore it is important to use "labelledby" fallbacks.

How Users Are Affected

When the relationship between distinct UI elements is not implied in the code, it makes it difficult for screen reader users to get a clear and accurate mental image of the UI. This might confuse, disorient and even prevent the user from using some features.

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)