https://github.com/bpetermann/vscode-zugang

VS Code accessibility linter
https://github.com/bpetermann/vscode-zugang

accessibility linter refactoring vscode vscode-extension

Last synced: about 1 month ago
JSON representation

VS Code accessibility linter

• Host: GitHub
• URL: https://github.com/bpetermann/vscode-zugang
• Owner: bpetermann
• License: mit
• Created: 2024-07-31T21:22:35.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-26T20:42:39.000Z (about 2 months ago)
• Last Synced: 2024-09-29T08:01:27.466Z (about 2 months ago)
• Topics: accessibility, linter, refactoring, vscode, vscode-extension
• Language: TypeScript
• Homepage: https://marketplace.visualstudio.com/items?itemName=bpetermann.zugang
• Size: 606 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Zugang ![Version](https://img.shields.io/visual-studio-marketplace/v/bpetermann.zugang) 

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.

## Overview

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., `lang` on the `` 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.

## Usage

After installing the extension, create an `.html` or `.tsx` file and focus on the file to see the annotations.

## Note

> 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.

## Future Features

Support for `.tsx` and `.html` files will continue to expand, ensuring accessibility best practices are maintained across both standard HTML and React/TypeScript projects.

## Installation

To install the extension:

1. Open the Extensions view in VS Code.

2. Search for `Zugang` in the marketplace.

3. Install the extension from the search results.

## Version

The current version is _v0.1.0_. Expect frequent updates as new features and improvements are implemented.

## Usage Examples

![simplescreenrecorder-2024-08-15_23 16 27-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/8be37fc9-c96a-45ef-aaf4-bb4e93ea1b1a)

## Inspiration

This project drew inspiration from Manuel Matuzović's excellent book, [“Web Accessibility Cookbook”](https://www.oreilly.com/library/view/web-accessibility-cookbook/9781098145590/), a lecture by [chrcit](https://github.com/chrcit), and Mary Sutton's courses on [Frontend Masters](https://frontendmasters.com/courses/react-accessibility/introduction/)

## Contributing

Create a branch on your fork, add commits to your fork, and open a pull request from your fork to this repository.

## Changelog

To check full changelog click [here](https://github.com/bpetermann/vscode-zugang/blob/main/CHANGELOG.md)

## License

[MIT](https://github.com/bpetermann/vscode-zugang/blob/main/LICENSE)