react-next-accessibility-checker
v1.1.0
Published
A simple accessibility checker for HTML files.
Downloads
7
Readme
React Accessibility Checker
A CLI tool for checking accessibility issues in React and Next.js projects. This tool parses JSX files to detect common accessibility issues such as missing alt attributes on images, empty headings, non-descriptive link text, missing labels on form elements, and insufficient color contrast.
Features
- Checks for missing
alt
attributes in images. - Detects empty heading tags.
- Warns about non-descriptive link text (e.g., "Click here").
- Checks for ARIA roles and attributes.
- Ensures form elements have associated labels.
- Verifies color contrast ratios meet accessibility standards.
Installation
Install the package globally using npm:
npm install -g react-accessibility-checker
Usage
Run the CLI tool on your React or Next.js component file:
react-accessibility-checker path/to/your/component.js
Example
bash
react-accessibility-checker src/components/MyComponent.js
The CLI will output any accessibility issues found in the file.
How It Works
This tool parses your JSX files using Babel and analyzes the AST (Abstract Syntax Tree) to identify potential accessibility issues. It supports most React and Next.js codebases.
Configuration
No additional configuration is required. Just run the tool on any JSX file.
Contributing
Contributions are welcome! If you find an issue or have a feature request, feel free to open an issue or submit a pull request on GitHub.