1. 21
    Test for Image Alternative Text Accessibility Issues
    1m 41s

Test for Image Alternative Text Accessibility Issues

Erin Doyle
InstructorErin Doyle
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

egghead
egghead
~ 10 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today