Accessibility

Accessible footer requirements

Keep these considerations in mind if you are modifying the design system or creating a custom component.

WCAG guidelines

1.4.3 Contrast (Minimum)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1. This ensures that the text in the footer is easily readable.

1.4.11 Non-text Contrast (Level AA)

The visual presentation of User Interface components and graphical objects have a contrast ratio of at least 3:1 against adjacent colour(s). This ensures that the UI components in the footer are easily distinguishable.

1.4.12 Text Spacing (Level AA)

Ensure that the text in the footer is easily readable and well spaced.

2.4.1 Bypass Blocks

Provide a mechanism to bypass blocks of content that are repeated on multiple Web pages. This can be achieved by providing a "Skip to main content" link at the top of each page that jumps to the main content, bypassing the header and navigation links.

2.4.4 Link Purpose (In Context)

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context. This ensures that the links in the footer are clearly understood.

2.4.6 Headings and Labels (Level AA)

Headings and labels describe topic or purpose. This ensures that any headings or labels in the footer are descriptive and clear.

2.4.7 Focus Visible (Level AA)

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. This ensures that users navigating through the keyboard can easily identify the focused element in the footer.

3.2.3 Consistent Navigation

Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. This ensures that the footer appears in the same place and in the same order on every page.

3.3.2 Labels or Instructions (Level A)

Labels or instructions are provided when content requires user input. This ensures that any interactive elements in the footer have clear instructions or labels.

4.1.2 Name, Role, Value (Level A)

For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. This ensures that any interactive elements in the footer are accessible to assistive technologies.