# Navigation Skip links, page titles, link purpose, consistent navigation, breadcrumbs, landmarks. ## Criteria | Standard | Criteria | | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | WCAG 2.2 | 2.4.1 Bypass Blocks (A), 2.4.2 Page Titled (A), 2.4.4 Link Purpose in Context (A), 2.4.5 Multiple Ways (AA), 3.2.3 Consistent Navigation (AA), 3.2.4 Consistent Identification (AA), 3.2.6 Consistent Help (A) | | RGAA 4.1 | 6.1–6.2 Links, 12.1–12.11 Navigation | --- ## Theme 6 — Links (Liens) ### Criterion 6.1 — Explicit links (A) Each link must be explicit (except in special cases). Maps to WCAG 2.4.4 (A), 2.5.3 (A), 1.1.1 (A). #### Test 6.1.1 — Text links Each text link must satisfy one of these conditions (except in special cases): - The link's accessible name alone conveys its function and destination. - The link's accessible name combined with the link context conveys its function and destination. **Methodology:** 1. Find all text links in the document. 2. For each text link, verify that what conveys its function and destination is either the link's accessible name alone or the link context. 3. If true for every text link, the test is passed. #### Test 6.1.2 — Image links Each image link must satisfy one of these conditions (except in special cases): - The link's accessible name alone conveys its function and destination. - The link's accessible name combined with the link context conveys its function and destination. **Methodology:** 1. Find all image links in the document (link whose content is an ``, an element with `role="img"`, an `` with `href`, an ``, a ``, or an ``). 2. For each image link, verify that what conveys its function and destination is either the link's accessible name alone (provided by the image's text alternative) or the link context. 3. If true for every image link, the test is passed. #### Test 6.1.3 — Composite links Each composite link (containing both text and image content) must satisfy one of these conditions (except in special cases): - The link's accessible name alone conveys its function and destination. - The link's accessible name combined with the link context conveys its function and destination. **Methodology:** 1. Find all composite links in the document (links composed of both text content and image-type elements). 2. For each composite link, verify that what conveys its function and destination is either the link's accessible name alone (provided by the combination of text content and image alt text) or the link context. 3. If true for every composite link, the test is passed. #### Test 6.1.4 — SVG links Each SVG link must satisfy one of these conditions (except in special cases): - The link's accessible name alone conveys its function and destination. - The link's accessible name combined with the link context conveys its function and destination. **Methodology:** 1. Find all SVG links in the document (`` element containing an `` with `xlink:href` (SVG 1.1) or `href` (SVG 2)). 2. For each SVG link, verify that what conveys its function and destination is either the link's accessible name alone (resolved typically from a `` element's content) or the link context. 3. If true for every SVG link, the test is passed. #### Test 6.1.5 — Visible label contained in accessible name For each link with a visible label, the link's accessible name must contain at least the visible label (except in special cases). **Methodology:** 1. Find all non-SVG links whose content is provided both by a visible label and by the content of a `title`, `aria-label`, or `aria-labelledby` attribute. 2. For each such link, verify that the `title`, `aria-label`, or `aria-labelledby` content contains the visible label. 3. If true for all non-SVG links, the test is passed for non-SVG links. 4. Find all SVG links whose content is provided both by a visible label and by `aria-labelledby`, `aria-label`, a `` element (direct child of ``), `xlink:title` (SVG 1.1), or one or more `` elements. 5. For each SVG link, verify that the `aria-labelledby`, `aria-label`, ``, `xlink:title`, or `` content contains the visible label. 6. If true for all SVG links, the test is passed for SVG links. 7. If the test passes for both non-SVG and SVG links, the test is globally passed. #### Cas particuliers (6.1) - **Tests 6.1.1, 6.1.2, 6.1.3, 6.1.4:** When a link is "ambiguous for everyone" (ambigu pour tout le monde), i.e., it is impossible to make the link explicit in its context, the criterion is not applicable. - **Test 6.1.5:** Punctuation and capital letters in the visible label text may be ignored in the accessible name without consequence. When the visible label text serves as a symbol, it should not be interpreted literally in the accessible name; the name must express the function conveyed by the symbol (e.g., "B" in a text editor becomes "Bold", ">" becomes "Next" or "Play video"). Exception: mathematical symbols may be taken literally (e.g., "A>B"). #### Notes techniques (6.1) When the visible label is supplemented by another expression in the accessible name: - WCAG insists on placing the visible label at the beginning of the accessible name, without reserving this position exclusively. - WCAG considers a non-exact match of the visible label string within the accessible name as a failure case. Examples for visible label "Order now" supplemented by "product X": - "Order now product X" — valid (best practice) - "Product X: order now" — valid - "Order product X now" — NOT valid --- ### Criterion 6.2 — Every link has an accessible name (A) In each web page, every link must have an accessible name. Maps to WCAG 2.4.4 (A), 1.1.1 (A). #### Test 6.2.1 In each web page, does every link have an accessible name between `` and ``? **Methodology:** 1. Find all links of any type in the document. 2. For each link, verify that the content of the `` element (or an element with `role="link"`) contains an accessible name (text or alternative). 3. If true for every link, the test is passed. #### Notes techniques (6.2) An anchor is not a link, even though the `` element has long been used for anchors. Anchors are therefore not concerned by this criterion. --- ## Theme 12 — Navigation ### Criterion 12.1 — Two navigation systems (AA) Each set of pages must provide at least two different navigation systems (except in special cases). Maps to WCAG 2.4.5 (AA). #### Test 12.1.1 Each set of pages must satisfy one of these conditions (except in special cases): - A navigation menu and a site map are present. - A navigation menu and a search engine are present. - A search engine and a site map are present. **Methodology:** 1. For each set of pages on the site, verify the presence of at least two of: navigation menu, site map, search engine. 2. If true for every set of pages, the test is passed. #### Cas particuliers (12.1) - The criterion is not applicable when the site consists of a single page or a very limited number of pages (the appreciation of "very limited" should be reserved for sites where all pages are reachable from the homepage). - The criterion is also not applicable for pages that are the result of or part of a process (e.g., payment or ordering process). --- ### Criterion 12.2 — Consistent menu and navigation bar placement (AA) In each set of pages, the menu and navigation bars must always be in the same position (except in special cases). Maps to WCAG 3.2.3 (AA). #### Test 12.2.1 In each set of pages, does every page with a menu and navigation bar satisfy these conditions (except in special cases)? - The menu and navigation bars are always in the same position in the presentation. - The menu and navigation bars always appear in the same relative order in the source code. **Methodology:** 1. Choose a page from the sample belonging to the same set as the page being audited. 2. Visually compare the two pages and verify that the menu or navigation bars are always in the same position in the presentation. 3. Compare the client-side generated source code of both pages and verify that the menu or navigation bars always appear in the same relative order in the structure. 4. If true, the test is passed. #### Cas particuliers (12.2) The criterion is not applicable when: - The pages of a set are the result of or part of a process (e.g., payment or ordering process). - The page is the homepage. - The site consists of a single page. - The change follows a user-initiated modification. --- ### Criterion 12.3 — Relevant site map (AA) The site map page must be relevant. Maps to WCAG 2.4.5 (AA). #### Test 12.3.1 Is the site map representative of the site's general architecture? **Methodology:** 1. Verify that the site map is representative of the site's general architecture (see note). 2. If true, the test is passed. Note: An overly complex or deep site map is not recommended for navigation help. It is not mandatory for all pages to be present if they can be reached, e.g., from a section homepage or a catalogue. #### Test 12.3.2 Are all site map links functional? **Methodology:** 1. For all site map links, verify they are functional. 2. If true, the test is passed. #### Test 12.3.3 Do all site map links lead to the pages indicated by their labels? **Methodology:** 1. For all site map links, verify they are up-to-date (neither obsolete nor broken) and lead to the page indicated by their label. 2. If true, the test is passed. --- ### Criterion 12.4 — Consistent site map access (AA) In each set of pages, the site map page must be accessible from an identical feature. Maps to WCAG 2.4.5 (AA), 3.2.3 (AA). #### Test 12.4.1 In each set of pages, is the site map page accessible from an identical feature? **Methodology:** 1. Choose a page from the sample belonging to the same set as the page being audited. 2. Compare the client-side generated source code of both pages and verify that the means of accessing the site map is always the same (e.g., a link or a button). 3. If true, the test is passed. #### Test 12.4.2 In each set of pages, is the feature linking to the site map page located at the same position in the presentation? **Methodology:** 1. Choose a page from the sample belonging to the same set as the page being audited. 2. Compare the client-side generated source code of both pages and verify that the means of accessing the site map is always at the same position in the structure (relative to other page elements, e.g., always at the top of the page). 3. If true, the test is passed. #### Test 12.4.3 In each set of pages, does the feature linking to the site map page always appear in the same relative order in the source code? **Methodology:** 1. Choose a page from the sample belonging to the same set as the page being audited. 2. Visually compare the two pages and verify that the means of accessing the site map is always at the same position in the presentation. 3. If true, the test is passed. --- ### Criterion 12.5 — Consistent search engine access (AA) In each set of pages, the search engine must be reachable in an identical manner. Maps to WCAG 3.2.3 (AA). #### Test 12.5.1 In each set of pages, is the search engine accessible from an identical feature? **Methodology:** 1. Choose a page from the sample belonging to the same set as the page being audited. 2. Compare the client-side generated source code of both pages and verify that the means of accessing the search engine is always the same (e.g., a form field). 3. If true, the test is passed. #### Test 12.5.2 In each set of pages, is the search engine feature located at the same position in the presentation? **Methodology:** 1. Choose a page from the sample belonging to the same set as the page being audited. 2. Visually compare the two pages and verify that the means of accessing the search engine is always at the same position in the presentation. 3. If true, the test is passed. #### Test 12.5.3 In each set of pages, does the search engine feature always appear in the same relative order in the source code? **Methodology:** 1. Choose a page from the sample belonging to the same set as the page being audited. 2. Compare the client-side generated source code of both pages and verify that the means of accessing the search engine is always at the same position in the structure (relative to other page elements, e.g., always at the top of the page). 3. If true, the test is passed. --- ### Criterion 12.6 — Content grouping zones can be reached or bypassed (A) Content grouping zones present across multiple pages (header, main navigation, main content, footer, and search engine zones) can be reached or bypassed. Maps to WCAG 1.3.1 (A), 2.4.1 (A), 4.1.2 (A). #### Test 12.6.1 In each web page where they are present, do the header, main navigation, main content, footer, and search engine zones each satisfy at least one of these conditions? - The zone has a WAI-ARIA landmark role corresponding to its nature. - The zone has a heading whose content conveys the nature of the zone's content. - The zone can be hidden via a button immediately preceding the zone in source order. - The zone can be bypassed via a skip link immediately preceding the zone in source order. - The zone can be reached via a quick-access link that is visible or, failing that, visible on focus. **Methodology:** 1. Find all content grouping zones in the document (header, main navigation, main content, footer, and search engine zones). 2. For each zone, verify that the zone: - Either has a WAI-ARIA landmark role corresponding to its nature; - Or has a heading whose content conveys the nature of the zone's content; - Or can be hidden via a button immediately preceding the zone in source order; - Or can be bypassed via a skip link immediately preceding the zone in source order; - Or can be reached via a quick-access link that is visible by default or visible on focus when tabbing. 3. If true for every content grouping zone, the test is passed. --- ### Criterion 12.7 — Skip/quick-access link to main content (A) In each web page, a skip or quick-access link to the main content zone must be present (except in special cases). Maps to WCAG 2.4.1 (A), 2.4.3 (A), 3.2.3 (AA). #### Test 12.7.1 In each web page, does a link allow bypassing or reaching the main content zone (except in special cases)? **Methodology:** 1. Find the main content zone in the document (indicated by the visible `
` element). 2. Verify that the zone: - Either can be bypassed via a skip link immediately preceding the zone in source order; - Or can be reached via a quick-access link visible on focus when tabbing. 3. If true, the test is passed. #### Test 12.7.2 In each set of pages, does the skip/quick-access link to the main content zone satisfy these conditions (except in special cases)? - The link is located at the same position in the presentation. - The link always appears in the same relative order in the source code. - The link is visible or, failing that, visible on focus. - The link is functional. **Methodology:** 1. Find the main content zone in the document (indicated by the visible `
` element). 2. Verify that the skip/quick-access link to the zone is: - Located at the same position in the presentation; - Always in the same relative order in the client-side generated source code; - Visible on focus when tabbing; - Functional. 3. If true, the test is passed. #### Cas particuliers (12.7) When the site consists of a single page, the requirement for a quick-access link depends on the page context (presence or absence of navigation or additional content). The criterion may be considered not applicable when a quick-access link is demonstrably unnecessary. --- ### Criterion 12.8 — Coherent tab order (A) In each web page, the tab order must be coherent. Maps to WCAG 2.4.3 (A). #### Test 12.8.1 In each web page, is the tab order within content coherent? **Methodology:** 1. Navigate through all document content using Tab (forward) and Shift+Tab (backward). 2. Verify that the focus movement order remains coherent relative to the content considered (e.g., tab order within a modal window should only consider interface elements within that window). 3. If true, the test is passed. Note: It is not mandatory for tabbing to follow the natural reading order (left-to-right, top-to-bottom) as long as elements are accessible in a coherent order. #### Test 12.8.2 For each script that updates or inserts content, does the tab order remain coherent? **Methodology:** 1. Find all content inserted via script in the document (display of hidden elements, content update via AJAX, etc.). 2. Place tab focus on the trigger element and activate it. 3. After the updated content is displayed, verify that tabbing remains coherent (correct focus repositioning). 4. If true, the test is passed. --- ### Criterion 12.9 — No keyboard trap (A) In each web page, navigation must not contain a keyboard trap. Maps to WCAG 2.1.1 (A), 2.1.2 (A). #### Test 12.9.1 In each web page, does every element receiving focus satisfy one of these conditions? - It is possible to reach the next or previous focusable element using the Tab key. - The user is informed of a functional mechanism allowing them to reach the next or previous focusable element via keyboard. **Methodology:** 1. Find all interface elements capable of receiving focus in the document (via tabbing or via script). 2. For each interface element, verify the user can reach the next or previous focusable element: - Either via the Tab key (Tab or Shift+Tab); - Or via another keyboard interaction the user is informed about (e.g., arrow keys). 3. If true for every interface element, the test is passed. Note: Certain complex interface elements (radio button groups, select lists, and all WAI-ARIA components) use optimized navigation typically relying on arrow keys. For example, radio button options are navigated with arrow keys, and tab panels are activated with arrow keys. The keyboard trap test is then limited to verifying the component is reached via tabbing and that it is possible to move to the next or return to the previous component. --- ### Criterion 12.10 — Controllable single-key shortcuts (A) In each web page, keyboard shortcuts using a single key (lowercase/uppercase letter, punctuation, number, or symbol) must be controllable by the user. Maps to WCAG 2.1.4 (A). #### Test 12.10.1 In each web page, does every single-key keyboard shortcut satisfy one of these conditions? - A mechanism is available to disable the shortcut. - A mechanism is available to remap the shortcut key using modifier keys (Ctrl, Alt, Shift, etc.). - For a user interface component, the associated shortcut can only be activated when keyboard focus is on that component. **Methodology:** 1. Find all keyboard shortcuts offered to the user in the document. 2. For each shortcut, verify that: - Either a mechanism is available to disable the shortcut; - Or a mechanism is available to remap the shortcut key using modifier keys (Ctrl, Alt, Shift, etc.); - Or, for a UI component, the associated shortcut can only be activated when keyboard focus is on that component. 3. If true for every keyboard shortcut, the test is passed. --- ### Criterion 12.11 — Additional content reachable by keyboard (A) In each web page, additional content appearing on hover, focus, or activation of an interface component must be reachable by keyboard when necessary. Maps to WCAG 2.1.1 (A). #### Test 12.11.1 In each web page, is additional content appearing on hover, focus, or activation of an interface component reachable by keyboard when necessary? **Methodology:** 1. Find all additional content appearing on hover, focus, or activation of an interface component in the document. 2. For each piece of additional content, if it contains interface components the user can interact with via keyboard (e.g., a custom tooltip containing a link), verify those interface components are reachable by keyboard. 3. If true for every piece of additional content, the test is passed. #### Notes techniques (12.11) This criterion addresses situations where additional content contains interface components the user must be able to interact with via keyboard. For example, a custom tooltip that includes a link in its content. --- ## WCAG-only Criteria (no direct RGAA theme 6/12 mapping) ### Bypass Blocks — WCAG 2.4.1 (A) / RGAA 12.6–12.7 Provide a mechanism to bypass repeated content blocks. Skip link to `#main` must be the first focusable element. Landmark roles (`banner`, `navigation`, `main`, `contentinfo`) also satisfy this. ### Page Titled — WCAG 2.4.2 (A) / RGAA 8.5–8.6 Every page needs a descriptive ``. Format: `Page Name - Category | Site Name`. Must be specific to page content. ### Consistent Identification — WCAG 3.2.4 (AA) / RGAA 12.3 Components with the same function are identified consistently. A search icon is always labeled "Search", not sometimes "Find". ### Consistent Help — WCAG 3.2.6 (A) Help mechanisms (contact info, chat, support link) appear in a consistent location across pages. --- ## Patterns **Skip link** — first focusable element on page: ```html <a href="#main" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-white focus:p-4" > Skip to content </a> <!-- ... header/nav ... --> <main id="main">...</main> ``` **Page title** — Shopify: ```liquid <title>{{ page_title }}{% if current_tags %} – tagged "{{ current_tags | join: ', ' }}"{% endif %}{% if current_page != 1 %} – Page {{ current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %} ``` **Page title** — Next.js: ```tsx export const metadata: Metadata = { title: `${page.title} | ${site.name}`, } ``` **Descriptive link text:** ```html Click here View running shoes collection ``` **Landmark regions:** ```html
``` **Breadcrumb navigation:** ```html ```