Web Accessibility Gemini CLI Extension
The Web Accessibility extension is an open-source Gemini CLI extension that is designed to enhance your development workflow by connecting Gemini CLI with accessibility expertise. This integration aims to automate web accessibility testing and remediation directly within your command line, with the goal of streamlining the creation of more inclusive software.
Note: Gemini can make mistakes and may not catch all accessibility issues. Please use responsibly and review results with care.
Features
- Accessible Code Writing Mindset: Write code considering accessibility from the start, making it an integral part of the development workflow.
- Finds Accessibility Issues: Designed to run an accessibility audit on your local web application using the powerful
axe-core engine and generate a clear ACCESSIBILITY_REVIEW_TODO.md file listing certain types of violations.
- Fixes Violations Automatically: Reads the generated
ACCESSIBILITY_REVIEW_TODO.md file and attempts to fix the identified violations in your codebase.
- Works Within Your Terminal: The entire process, from auditing to fixing, happens in your command line using Gemini CLI, so you don’t have to switch between different tools.
Prerequisites
Before you begin, ensure you have the following:
Installation
Install the web-accessibility extension by running the following command from your terminal (requires Gemini CLI v0.4.0 or newer):
gemini extensions install https://github.com/gemini-cli-extensions/web-accessibility
The extension comes with platform-specific browser binaries pre-installed, so it’s ready to use immediately after installation.
Usage Workflow
This extension adds two new commands to Gemini CLI, /accessibility:review and /accessibility:fix. Here’s a typical workflow for using these commands to help improve the accessibility of your web application:
Step 1: Navigate to Your Project
Open your terminal and change the directory to the root of your web application’s project.
cd /path/to/your-web-app
Step 2: Start Your Development Server
Run your local development server as you normally would. For example:
npm run dev
Make sure your application is running and accessible.
Step 3: Run the Accessibility Review
Use the review command to audit your running application. You must provide the URL where your application is being served (e.g., http://localhost:3000).
/accessibility:review <url>
The extension will perform an audit and create a file named ACCESSIBILITY_REVIEW_TODO.md in your project’s root directory. This file contains a checklist of accessibility violations identified.
Important: It is recommended to run this command from the root directory of your web application’s codebase, as the generated ACCESSIBILITY_REVIEW_TODO.md file is looked for and used by the fix command to work on your codebase and resolve the accessibility violations.
Step 4: Automatically Fix Violations
After the review is complete, you can use the fix command to automatically correct the issues listed in the ACCESSIBILITY_REVIEW_TODO.md file.
/accessibility:fix
The extension will go through the checklist, apply fixes, and provide explanations for each change. Once the process is complete, it will update the ACCESSIBILITY_REVIEW_TODO.md file to mark the resolved issues.
Important: This command must be run from the root directory of your web application’s codebase. The Gemini CLI extension operates on the current working directory, and it is the user’s responsibility to ensure the command is executed in the correct location for the agent to have the proper codebase context.
Uninstallation
To remove the extension:
gemini extensions uninstall web-accessibility
This removes the extension and all bundled browser binaries from ~/.gemini/extensions/web-accessibility (macOS/Linux) or %USERPROFILE%\.gemini\extensions\web-accessibility (Windows).
Powered by Open Source
This extension is built upon the work of several powerful open-source libraries:
- @axe-core/playwright and axe-core: The accessibility analysis is powered by the
axe-core engine for identifying accessibility violations.
- playwright: Used for browser automation to run the accessibility audits on your web application.
- color-contrast-picker: Helps in automatically finding compliant color contrasts to fix accessibility issues.
- @modelcontextprotocol/sdk: The underlying SDK for building Gemini CLI extensions.
We are grateful to the maintainers and contributors of these projects for their invaluable work.
Contributing
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature
- Commit changes:
git commit -m 'Add amazing feature'
- Push to branch:
git push origin feature/amazing-feature
- Open a Pull Request
See CONTRIBUTING.md for more information about contributing to this project.
License
This project is licensed under the Apache 2.0 License. See the LICENSE file for more details.
评论