Tom Dudfield.

Computer Vision Alt Tags in Sitecore

Cover Image for Computer Vision Alt Tags in Sitecore

Creating alt text for every image on your site can be a bit of a nuisance. Reviewing each image, coming up with accompanying text and checking each one all takes time, but it is essential. Now what if there was a way to magically suggest alt text when uploading images to Sitecore?

Why the fuss?

Alt text (alternative text) is a descriptive phrase that can be attributed to an image. Each image on your website should have alt text. Not only can it improve your SEO (Search Engine Optimisation), it’s absolutely vital for meeting basic accessibility standards. Generally, content editors have to write alt text for each image and check it before publishing. With other priorities or a lack of time, alt text can often fall by the wayside, being forgotten or simply ignored.

The idea

At Redweb our Innovation lab technologists regularly tinker with new technologies – and it was their Haiku Camera experiment that got us thinking. What if, instead of turning an image into a haiku poem, we could use the technology to read an image and describe it for us? What if we could automate the process of creating alt text?

How it works

At Future Decoded Microsoft showed the latest advancements it has made with its Cognitive Services API's, in particular the Computer Vision API. This module makes use of the Describe Image method on the API to generate a description of an image that has been uploaded into Sitecore, this can then be set as the alt text.

Big Ben

Show me the code

If you want to compile your own dll or pull the code you can grab the latest code from GitHub. Otherwise the module is available as a Sitecore package on the Sitecore Marketplace or is available on NuGet to install directly into a solution. The module should work with versions 8.0 and above.

You will need to generate a API key for the Computer Vision API and add the key into AutoAltTags.Config for the module to work. An alt tag will be generated upon uploading or saving a media item. If an alt tag is already set it won't be overridden.

Why bother?

As a developer it is easy to overlook alt text but not only will you be improving your site’s accessibility standards, you could also drastically reduce the amount of effort involved for content editors. With this module alt text will be generated automatically saving considerable time but still providing the ability to tweak the text when it doesn't quite fit.

Sometimes it doesn't get it quite right

Sometimes it needs a little tweaking