Screen Readers

Visually impaired people rely on screen reader technologies, such as NVDA opens in a new tab, to use your website. Whether they will face issues when using your site depends on how it is coded and whether it was tested with a screen reader.

95% of the people around you who are building websites have no idea that they are responsible for fully optimizing websites for assistive technologies.

Visually impaired people may be unable to use certain features, and sometimes, even fundamental features of your site if it is not fully optimized for the screen readers they rely on.

A Simple Case of Optimizing a Certain Element on a Webpage for Screen Readers

Let’s say, we are wanting to display the following image (screenshot) on a webpage.

Google PageSpeed Insights good performance metrics: First Contentful Paint – 0.8s (good), Largest Contentful Paint – 2.1s (good), Total Blocking Time – 0ms (good), Cumulative Layout Shift – 0 (good), and Speed Index – 1.0 s (good).

When we take a screenshot from a screen, for example, using Snip and Sketch app in Windows, the file name of the image is typically something like [Screenshot 2025-06-17 102132.png]

Let’s see how different web designers get the job done.

People Who Don’t Know What They Are Doing

Web designers who don’t know what they are doing will put the image as it is. They won’t add the alternative text or modify the file name. As a result, screen readers will have nothing meaningful to announce to a visually impaired user.

NVDA will announce the image as: “To get missing image description, open the context menu.”

Mediocre Web Designers

Mediocre web designers will leave the file name as it is: [Screenshot 2025-06-17 102132.png]. They will use generic alternative text, e.g., ‘Google PageSpeed Insights good performance result.’ Screen readers will read: ‘Graphic google pagespeed insights good performance result.’

Skilled Web Designers

Skilled web designers who know that there is something called ‘Screen Reader,’ and users with vision disabilities rely on it, will go like, wait, hold on a second, a sighted user can read all the different metrics shown in the image, such as First Contentful Paint: 0.8 s, Largest Contentful Paint: 2.1 s, etc. How can we make sure visually impaired users can also get all the data shown in the image? They will include all the data in the alternative text.

These web designers will also rename the file from ‘Screenshot 2025-06-17 102132.png’ to something like ‘good-website-performance-metrics-pagespeed.webp,’ while also converting the file format to WebP. An optimized file name is a plus and important for Image Search Visibility, and WebP is the preferred image format for the web.

Now, screen readers will announce the image as follows:

“Graphic: Google PageSpeed Insights good performance metrics: First Contentful Paint – 0.8s (good), Largest Contentful Paint – 2.1s (good), Total Blocking Time – 0ms (good), Cumulative Layout Shift – 0 (good), and Speed Index – 1.0 s (good).”