Automated accessibility testing

[Ayko1595]

Contact Details

konstantin.ay@intunio.se

What benefits does the suggestion solve?

This project is intended for use in the public sector, where stringent accessibility requirements must be met. By implementing automated accessibility testing, we address several key benefits:

• Efficiency: Automated testing allows us to quickly identify accessibility issues, ensuring a more streamlined development process.
• Accuracy: Automation reduces the reliance on manual testing, minimizing the chances of missing critical accessibility issues, which can lead to costly corrections at later stages.
• Compliance: Automated testing helps us proactively adhere to accessibility standards and regulations, ensuring that the project remains in full compliance.
• Cost-Effectiveness: With automated testing, we can identify and fix issues earlier in the development cycle, reducing the overall cost of accessibility compliance.
• Consistency: Automated testing provides a consistent and standardized approach to accessibility assessment, ensuring a higher level of quality throughout the project.
• Risk Reduction: By reducing false positives and false negatives, automated testing helps mitigate the risk of non-compliance and potential legal issues in the public sector.

In summary, implementing automated accessibility testing is a crucial step towards meeting accessibility requirements efficiently and effectively, ensuring the success of this project in the public sector."

Feature suggestion description

This could potentially be achieved by using the following tools:

• React Testing Library
• Jest
• Axe-core

All of which are widely used and known frontend libraries.

Alternative solutions

No response

Additional information

No response

[Ayko1595]

Unfortunately, this does not seem to be able to catch all necessary accessibility violations, such as color contrast, because the installed dependencies render the DOM headless. Instead of testing color contrasts it shows this message:

{
  id: 'color-contrast',
  impact: null,
  description: 'Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds',
  message: "`TypeError: Cannot read properties of null (reading 'canvas')` - feature unsupported in your environment. Skipping color-contrast rule.",
}