Accessibility
Footer Navigation is a landmark region containing up to four columns of links, some of which are grouped behind their own accordion trigger. It meets WCAG 2.1 AA: the whole region is reachable and identifiable as navigation, every trigger is operable and announces its expanded/collapsed state, and focus always follows the visual reading order — left to right, top to bottom.
For designers
Section titled “For designers”- Only offer a choice between an accordion and plain links per section — never mix the two patterns for the same group, and always give every section a visible title, even when it isn’t interactive. Source: WCAG 2.4.6 Headings and Labels.
- The open/closed state of a column or group must never be conveyed by colour alone — pair it with the chevron rotation. Source: WCAG 1.4.1 Use of Color.
- Keep footer link labels short enough to stay on one or two lines; a label that wraps past two lines is harder to scan and to target with assistive technology. Source: WCAG 2.4.6 Headings and Labels.
- All link and trigger states (default, hover, focus) must maintain accessible contrast on every supported surface. Source: WCAG 1.4.3 Contrast (Minimum).
- If a link opens in a new tab or leaves the Toyota domain, that must be indicated programmatically, not only visually. Source: WCAG 3.2.5 Change on Request.
For developers
Section titled “For developers”Wrap the whole region in a <footer> landmark so assistive technology can jump to it directly; a page should only have one. Each column and group trigger is a native <details>/<summary> pair, exactly like a standalone accordion — no custom ARIA is required, and multiple triggers can be open at the same time since expanding one never collapses another. Column and group titles are plain text, never links: only the <summary> wrapper itself is a focusable, interactive element, and its chevron is decorative and must never be a separate focus stop. Standard sequential Tab navigation is enough — this is not a menu pattern, so no arrow-key handling should be added.
Keyboard interaction
Section titled “Keyboard interaction”| Key | Action |
|---|---|
| Tab / Shift + Tab | Move to the next / previous focusable element in the footer |
| Enter / Space | On a trigger, expand or collapse its column or group; on a link, navigate |
Focus follows DOM order from left to right and top to bottom — build the markup in that visual order rather than reordering it with CSS. Interactive targets must be at least 44 px high for comfortable touch use. Source: WCAG 2.5.8 Target Size (Minimum).
Labelling elements
Section titled “Labelling elements”Footer container
Use a <footer> element for the region. If the page already has a page-level footer landmark, give this one an accessible name — e.g. aria-label="Footer navigation" — so screen-reader users can tell it apart from the rest of the footer.
Column and group triggers
The <summary> is the trigger; the browser keeps its expanded/collapsed state in sync with the parent <details> automatically, so no aria-expanded needs to be managed by hand. Its accessible name comes from the visible title text — never ship a chevron-only trigger.
Links
Give every link a self-describing accessible name from its own text — avoid repeated labels like “Learn more” across the footer. A link that opens in a new tab or leaves the Toyota domain needs that stated in its accessible name, for example aria-label="Our leadership (opens in a new window)".
Source: WCAG 4.1.2 Name, Role, Value.