Website Accessibility, v2

Screen Reader Exercise

Jon Kuperman

Jon Kuperman

Website Accessibility, v2

Check out a free preview of the full Website Accessibility, v2 course

The "Screen Reader Exercise" Lesson is part of the full, Website Accessibility, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to install a screen reader, turn down their monitor's brightness or look away, and complete the form on the provided webpage using only audio. Student's questions regarding if it's possible to analyze a user uploaded image to generate alternative text and if there is a difference between having a div with a background image and an image tag are also covered in this segment.


Transcript from the "Screen Reader Exercise" Lesson

>> The first exercise is just installing a screen reader and getting comfortable navigating around. So, again, I put the links in chat for where the site is, I'm gonna click on here just to show folks. So, the idea for the exercise is we have this form down here, and what I would like folks to do if they're interested is to install a screen reader.

Turn it on, dim the brightness on your monitor or look away, and with just the audio cues from the screen reader, can you figure out what each field in this form is and can you enter in there? So you can use tab to go through each one, right, and when you tab through them with your screen reader on you should get some context for what goes in there.

So, yeah, let's take a break here, anybody have any questions before we get started on the exercise and then we'll meet back up and I'll do the exercise with everybody. Is it possible to analyze a user uploaded image to make dynamic alternative text, absolutely, it is, but I think both Twitter and Facebook do this at least Facebook does.

They use I actually don't know how it works, but I think they have like some machine learning that runs on the images as you upload them. And does that they even do things like I noticed recently if you upload an image with like hot button words in it like Coronavirus vaccine, they will put their interstitial warning that says, hey, check out the official docs, even if it's just an image.

So, yeah, a lot of the big companies will automate automatically generate alt text dynamically, which is really cool. But it's also worth noting like on Twitter, you can enable the ability to override that with your own alt text. So, as you upload your image, you can put alt text on it, which is kind of cool, well, yeah, but yeah, it's a great question.

So yeah, is it is it different a div with a background image versus an image tag, it absolutely is. So, the screen readers will view the image tag as content that needs to be read aloud. They will ignore CSS background images, so, if you have a div with a background image, it will not read on a screen reader.

So yeah, it absolutely is a difference.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now