Test for Image Alternative Text Accessibility Issues

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.