Accessibility
  • 04 Feb 2025
  • 1 Minute to read
  • Contributors
  • Dark
    Light

Accessibility

  • Dark
    Light

Article summary

General

Accessibility ensures that web applications like your configurator, are usable by everyone, including people with disabilities. This includes individuals with visual, auditory, motor, and cognitive impairments. By following accessibility best practices, the configurator can create an inclusive experience that allows all users to interact with the configurator without barriers.

To get an overview and an understanding of what accessibility is, we can recommend the following resources:

European Accessibility Act (EAA)

The European Accessibility Act (EAA) is a directive aimed at improving accessibility across digital and physical products and services within the European Union. Starting June 28, 2025, businesses offering digital solutions, including configurators, must ensure compliance with accessibility standards.
It has to align with the WCAG 2.2 Level AA standards for web accessibility.

Legal note

By ensuring compliance with the EAA, businesses not only avoid legal risks but also create a more inclusive experience for all users.

Tools

Besides the built-in features from browsers or the OS in general, there are helpful tools and extensions:

Configurator editor

While the configurator editor aids in accessibility implementation, using these features does not automatically guarantee full compliance with accessibility standards (e.g., WCAG, EAA, ADA).
Final compliance should be verified through audits and real-world testing.

aria-label

Form controls like a Textbox, Checkbox or Button should always have a describing label. The configurator automatically chooses the "best fitting property" for the label.

Example

A button is only displayed as icon without any visible text.

  • For a visually impaired user it might be impossible to grasp what this button does
  • Entering an aria-label would solve this, but it might still be hard to understand for non-impaired users, solely by the icon
    Solution: The best option is to enter a Tooltip text as it shows a describing text when navigating to it (mouse hover or keyboard) and the configurator will also automatically set this text as aria-label.
    image.png

Automated check

By default the editor will check if every input control has a corresponding label and will show a warning otherwise.
image.png

Custom CSS Styles

Because the CSS can be fully customized it is up to the configurator creator to provide an accessible styling.

  • Text size
  • Color contrast
  • Outline (keyboard navigation)
  • etc.

See also WCAG Checklist


Was this article helpful?