Learning about an image accessibility feature

Image accessibility

Here at AG, we must wear many different hats, and one of the more beaten-up ones has to do with web development. The AG web presence is a little bit of a complicated mess that involves a soggy breadcrumb trail of pure HTML/CSS, CSS frameworks, and static site generators.

The latest static site generator is gatsbyjs. We wanted to create an image element that had a function attached to it, triggered when the image is clicked. In standard Javascript, one can usually just write

<img src="path to image" onClick={yourFunctionHere()} />

And since GatsbyJS is based on the React JS framework, (plus the snippet is vanilla JS, nothing special going on here), it should have been an easy feature to create.

Which is of course not the case.

After spending hours trying to figure out why such a simple feature failed to work, it turns out that due to accessibility reasons, the ability to add the onClick directly to an <img> tag was explicitly forbidden in GatsbyJS. Screen readers don’t know what to do with such information, so it gets lost. The way to implement an image with click function is to wrap the whole image in an <a> or <button> or any other sort of tag that has clicking feature built in by default.

Questions or Comments?

Feel free to send in any SCU or AG-related questions! Our Ask Box is always open.

Thanks so much for all of your amazing support, and stay safe out there!