Test for Image Alternative Text Accessibility Issues
We have a number of options to use when testing for accessibility issues concerning alternative text for images. The react-axe library and axe browser extension will both report when an image is missing alternative text. The tota11y browser extension will annotate any images that are missing alternative text. Running eslint with the eslint-plugin-jsx-a11y plugin installed will report on any <img> elements missing an alt attribute. Finally, we can use a screen reader to actually hear what is read when an image has focus.
Instructor: [00:00] Here we have a web page with a number of images on it. I'm running react-axe. Over here, we can see being logged the console. Images must have alternate text. It lists each of these images. All of these are missing alternative text.
[00:21] Additionally, we can run ESLint, which has installed the eslint-plugin-js-a11y. If we run that, this will also report that we are missing an alt prop on our image elements. Over here is the responsible code. For IDEs that integrate with ESLint, you'll actually see in the code the ESLint finding about missing alt text.
[00:49] Going back to the browser, we can also use totally to annotate any missing alt text on images. As we can see, each of these images is annotated.
[01:03] Finally, if we go to Safari and run VoiceOver, we can hear what is read for each of the images.
Automated Voice: [01:11] Diner. [inaudible] current visit inception JPG image. Gladiator JPG image. [inaudible] underscore under the underscore lost underscore arc jpg image.
Instructor: [01:24] What it's doing is, it's reading the filename. Because we don't supply the alt attribute providing alternative text, the screen reader will fall back to reading the filename, which is really not helpful. This is why we need to make sure we're providing alternative text for our images.