a11y:Lazy Dev
Real-time accessibility compliance checker for HTML, CSS, JavaScript, React (JSX/TSX), and Vue files in VSCode.
Features
This extension provides real-time accessibility diagnostics as you code:
HTML Accessibility Checks
- Missing alt attributes: Detects images without alt text
- Form accessibility: Identifies inputs without associated labels
- Heading hierarchy: Warns about improper heading structure
CSS Accessibility Checks
- Color contrast: Identifies potentially low-contrast color combinations
- Color accessibility: Warns about colors that may affect readability
JavaScript/React Accessibility Checks
- innerHTML usage: Warns about potential security/accessibility issues with innerHTML
- Focus management: Reminds about proper focus handling
- Keyboard accessibility: Suggests keyboard event handlers for interactive elements
Requirements
- VSCode 1.104.0 or higher
- Node.js (for development)
Extension Settings
This extension contributes the following settings:
accessibilityChecker.enable: Enable/disable the accessibility checker (default: true)
Usage
- Install the extension
- Open HTML, CSS, JavaScript, React, or Vue files
- The extension automatically checks for accessibility issues
- View diagnostics in the Problems panel or as squiggly lines in the editor
- Hover over issues for detailed explanations
Known Issues
- Some advanced accessibility rules are not yet implemented
- Vue.js template checking is basic
Release Notes
0.0.1
Initial release with basic accessibility checking for HTML, CSS, and JavaScript files.
Contributing
Contributions are welcome! Please read our contributing guidelines before submitting pull requests.
License
MIT License - see LICENSE file for details.
| |
