Zugang is a VS Code extension designed to improve the accessibility of your HTML and React/TypeScript (.tsx) code. By providing warnings and suggestions, it helps you meet accessibility standards in a structured and intuitive way.
Zugang currently offers warnings and hints when your HTML or .tsx code lacks essential elements, tags, or attributes necessary for proper accessibility. The extension focuses on common mistakes such as:
- Missing or incorrect accessibility-related attributes (e.g.,
langon the<html>tag). - Ignoring proper heading hierarchy (e.g.,
h1 -> h2 -> h3...). - Omitting essential meta elements (e.g., viewport settings).
- Issues like "div soup," generic link texts, and more.
Each warning is accompanied by specific suggestions for improvement, helping you understand the issue and make the necessary corrections.
After installing the extension, create an .html or .tsx file and focus on the file to see the annotations.
The warnings provided are based on general best practices. However, in real-world scenarios, there may be valid reasons to deviate from these rules depending on the specific context. A general extension cannot always account for these variations. Additionally, the actual accessibility of a particular element is often influenced by the complex interplay of HTML, CSS, and JavaScript.
Support for .tsx and .html files will continue to expand, ensuring accessibility best practices are maintained across both standard HTML and React/TypeScript projects.
To install the extension:
- Open the Extensions view in VS Code.
- Search for
Zugangin the marketplace. - Install the extension from the search results.
The current version is v0.2.0. Expect frequent updates as new features and improvements are implemented.
Create a branch on your fork, add commits to your fork, and open a pull request from your fork to this repository.
To check full changelog click here