A VSCode and friends extension that suggests accessible alternative text for images using AI or translates existing alt text to English.
Features
AI-Powered Alternative Text Suggestion: Suggest accessible alternative text for images using AI vision models
Alternative Text Translation: Write alt text in your native language, then translate it to English without leaving your IDE; preserves cultural context and nuance as much as possible.
Multi-Provider Support: Choose between OpenAI (GPT-4o-mini) and Mistral AI (mistral-small-latest)
Right-click context menu integration for HTML files
Supports both absolute URLs and relative file paths
Automatically converts local images to base64 for AI processing
Follows web accessibility best practices for alt text suggestion
Note: You can also search for @ext:schalkneethling.image-descriptor in VSCode's settings. Also, PLEASE be very careful not to accidentally leak your API key. Ensure that none of the configuration end up in your .vscode setting files as it then may get checked into source control.
Usage
Suggesting Alternative Text
Open an HTML file containing an <img> element
Place your cursor inside the alt="" attribute
Right-click to open the context menu
Select Image Descriptor: Suggest alternative text
The extension will:
Extract the image source from the src attribute
Process the image (URL or local file)
Suggest accessible alternative text using AI
Insert the suggested text into the alt attribute
Edit as needed
Translating Alternative Text to English
This feature is designed for those who would feel more comfortable describing alternative text in their native/first language. If this is you, first write the alt text in your preferred language, then translate it to English.
Open an HTML file containing an <img> element
Write your alternative text inside the alt="" attribute
Right-click to open the context menu
Select Image Descriptor: Translate to English
The extension will:
Extract the existing alt text
Translate it to English while preserving cultural context and nuance (as much as possible)
Replace the original alt text with the English translation
How it Works
Absolute URLs: Uses the URL directly
Relative paths: Converts local images to base64 data URLs
File support: PNG, JPEG, GIF, WebP, SVG
AI Integration: Uses vision models for image analysis and language models for translation
Accessibility: Follows WCAG guidelines for concise, descriptive alternative text
Translation: Preserves cultural context, idioms, and nuances during translation
Troubleshooting
"No img element found": Make sure your cursor is inside an <img> tag
"No src attribute found": Ensure the image has a src attribute
"No alt text found": Make sure the img element has existing alt text for translation
API key errors: Verify your API key is correctly configured and you have credits
Provider errors: Ensure you've selected a valid provider in settings
File not found: Check that relative paths are correct relative to the HTML file
Model errors: Make sure your API key has access to the selected model
Debug Mode
To enable debug logging:
Open Command Palette (Cmd/Ctrl + Shift + P)
Type "Developer: Toggle Developer Tools"
Check the Console tab for detailed logs
Development (for advanced users)
Clone the repository
Install dependencies:
npm install
Compile the extension:
npm run compile
Press F5 in VSCode to launch the Extension Development Host
Contributing
See CONTRIBUTING.md for guidelines on contributing to this project.
