bypass

Page must have means to bypass repeated blocks

Who might be affected
SR

Description

Screen reader users cannot randomly access any point in the interface by just pointing to it, unlike a seeing user would do with a mouse. Screen readers allow their users to skip directly to a specific area without having to go through each element linearly. Among other, screen readers naturally use landmark elements (e.g. <header>, <main>, <footer> etc.) as "hooks" to allow the user to skip between them with a keystroke. When an interface is not divided and structured semantically, screen readers lack these explicit "hooks" to map the UI for the user. A proper semantic structure is also very helpful to users who do not seem to get an accurate mental image of the interface.

Quick Fixes

Use semantic landmark elements to signify the role of each area of the UI and provide assistive technologies "structural" hooks to skip into.
1<body>
2 <header>
3 <!-- Header content -->
4 <nav>
5 <!-- page navigation -->
6 </nav>
7 </header>
8 <main>
9 <section>
10 <!-- section 1 content -->
11 </section>
12 <section>
13 <!-- section 2 content -->
14 </section>
15 </main>
16 <aside>
17 <!-- Footer content -->
18 </aside>
19 <footer>
20 <!-- Footer content -->
21 </footer>
22</body>

How Users Are Affected

Screen reader users will be required to linearly go through each element of the UI until it reaches the desired element, which makes the user experience tedious and inefficient.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
2.4.1 Bypass Blocks (A)

Recommended Reading