processing
Run accessibility checks in dev mode using `@axe-core/react`
Increasing Access
Helps us find and fix accessibility issues before they make it into production.
Feature enhancement details
The official React docs recommend using the @axe-core/react to identify accessibility issues.
https://legacy.reactjs.org/docs/accessibility.html#axe-axe-core-and-react-axe
https://github.com/dequelabs/axe-core-npm/tree/develop/packages/react
We already have some checking with eslint ally, but this adds additional checks for insufficient color contrast, etc.
I'm having issues with the package.json right now, so I'll past some stuff here which I intended to put in the PR.
We will get messages in the console when running in dev mode:
Messages can be expanded to show more details about the error:
Hi @lindapaiste @raclim ,
I noticed that our project could benefit from improved accessibility, and I'd like to propose a solution to address this issue.
Solution Proposal:
I suggest integrating accessibility checks using @axe-core/react into our project. This library will help us identify and fix accessibility issues before they make it into production.
Benefits:
- Proactive identification of accessibility issues.
- Improved accessibility of the application.
- Enhanced user experience for all users, including those with disabilities.
Implementation Details:
We can install @axe-core/react as a development dependency and add a script to run accessibility checks on our React components.
Offer to Implement:
I'm willing to take on the task of implementing this solution if it aligns with our project goals.
Looking forward to your feedback and guidance on this proposal.
@letscodedanish sure! I was going to do this myself but got distracted with other things.