VS Code Extension to Generate AI-Driven Alt Texts for Images
Hello everyone, Today I would like to talk about the new VsCode extension that I’ve coded with my dear friend Atakan Demircioğlu in #SundayTechMusings. He is my teammate and besides being a good programmer, he also writes very helpful articles.
At Jotform we organized an Accessibility Hack Week. During this week every team fixed issues related to accessibility. Jotform has a lot of products that more than 20 million people use, and we wanted to make them more accessible.
What Is Accessibility?
Accessibility is the practice of making your websites usable by as many people as possible. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.
What actions did we take to make our products more accessible?
After fixing known issues, we brainstormed about what else we could do. We were having difficulty creating alt texts for images. As a developer, sometimes I forget to add alt attributes to images. Even if I remember to add alt text, it’s always hard to write it. Because screen readers read this alt text, it has to make sense for those who can’t see these images. We decided to create a VS Code extension to generate alt text image descriptions for developers because we wanted to help other people who need help with this. Now everyone can use our extension easily.
Alt Text Generator Extension
We’ve published the very first version 0.0.1 in the VS Code Extension store. Its name is “Generate Alt Text” and you can find it in VS Code Extensions via search.
Generate Alt Text
So what does this extension do? It generates alt text for images that don’t have alt attributes. It uses AI to generate alt text via searching in data and is user-friendly.
- We use Replicate, which allows you to run open-source models with a cloud API.
- To makepredictions we needed an open-source model. BLIP is a good match.
If the image element doesn’t have alt text, a “Generate Alt Text” button will appear. In just one second after clicking that button, alt tex will be added to the image element. You can see this in the above GIF.
What about internal sources?
If you have an internal source(not a full link) for example “images/small-ajax-loader.png”, you can create a config file and add your CDN domain name in JSON. You should create a new file with “.accessibility” in the name. After that, you must create an object and add your CDN domain as in the screenshot below.
If you want to check the extension, the download link is below.
To Sum Up
Long story short, I hope this extension will help you make your code more accessible. If you try the extension and give us feedback, we would be very grateful.
If you find this content helpful and would like to show your support, you can buy me a beer🍺😊
Buy Beer🍺
