Skip to content

A11y Statement

Date: 2024-07-30

Status: statement

Scope

  • [ ] backend
  • [ ] playground
  • [x] navigation
  • [ ] footer
  • [ ] top-level-search
  • [x] contact-module

Context

We need to and want to comply as good as possible to the WCAG 2.2 guidelines.

For some components though, this is currently not possible.

One example for this is the global navigation. The current implementation is not accessible because of the following reasons:

  • SC 1.4.3 Contrast (Minimum) Level AA
    • The contrast between the text and the background for the conversion button is not sufficient.
  • SC 4.1.2 Name, Role, Value Level A
    • Since some navigation items function as links as well was buttons (they link to a page and open a dropdown), the role of the navigation items is not clear. As long as this pattern is used, the navigation is not accessible.
    • The tablist component inside of the statistics dropdown is not accessible, because the tablist tabs function as tabs as well as links. This is not allowed.

Another example is the contact module. The current implementation is not accessible because of the following reasons:

  • 2.4.3 Focus Order Level A
    • When activating a contact, I want to be able to navigate immediately to the respective contact card and don't want to cycle through all contact options first.s
  • 2.4.6 Headings and Labels Level AA
    • Labels to select a contact are not meaningful. E.g. "SG" for selecting the Singapur contact.

Decision

  • Regarding SC 1.4.3 Contrast (Minimum) Level AA:
    • This issue is known, but there hasn't been a decision on how to solve it yet. For now, we will keep the colors as they are, but should push for a solution.
  • Regarding 4.1.2 Name, Role, Value Level A:
    • Changing this would result in a major break in user experience. This needs to be discussed with our UX department.
    • Possible solutions are:
      • Move the dropdown functionality to a separate button, which only contains a caret, next to the link.
      • Move the link to the underlying page into the dropdown as the first item and convert the link to a button.
  • Regarding 2.4.3 Focus Order Level A:
    • This should be fixed as soon as possible.
  • Regarding 2.4.6 Headings and Labels Level AA:
    • This should be fixed as soon as possible.
  • As a catch-all solution for issues that are known, but currently cannot be fixed, you can add a data-a11y attribute to the component, which excludes it from automatic accessibility tests.

Consequences

Keeping both issues as they are will result in a non-accessible components and could lead to severe problems, once the BFSG becomes effective.
Last updated: March 31, 2026 at 12:49
By: renovate-token-app[bot]