Screen Reader Walkthrough: What Your Homepage Sounds Like

Most people who build websites have never heard one. They’ve looked at thousands, but they’ve never closed their eyes and listened to a page the way a blind visitor does. When I finally did this with my own site, it was one of the more humbling experiences of my career. The page I thought was clean and obvious turned out to be a wall of noise.

Here is roughly what it sounded like. “Link. Link. Image. Link, image, IMG underscore 4 4 7 2. Button. Button. Link, learn more. Link, learn more. Link, learn more.” That was my homepage. Not the headline I’d rewritten a dozen times, not the carefully chosen product screenshot, not the value proposition. A recitation of filenames and unlabeled controls, punctuated by three identical “learn more” links that gave no hint of what any of them led to.

A screen reader is software that converts a page into speech or braille. VoiceOver ships free with every Mac and iPhone; NVDA is free on Windows. It reads the page in the order the HTML appears, and it announces each element by its role: link, button, heading, image. What it cannot do is guess. If an image has no alt text, it reads the filename, because that’s all it has. If a button is really a styled div with a click handler, it may not announce it as a button at all, which means the listener doesn’t know it can be pressed. If your logo is an image inside a link with no text, the visitor hears “link, image” and has to decide whether to gamble a click on a mystery.

The alt attribute is the fix for images, and it’s worth understanding what it’s actually for. It is not a caption and it is not a place for keywords. It is the sentence you would say out loud if you were reading the page to someone over the phone and got to that image. For a product screenshot, that might be “the audit dashboard showing six category scores.” For a purely decorative flourish, the right alt text is empty, written as alt with empty quotes, which tells the screen reader to skip it entirely. An empty alt is a deliberate statement; a missing alt is an abdication, and the screen reader punishes it by reading the filename.

Links are the other big offender. Screen reader users often pull up a list of every link on the page and jump straight to the one they want. This is a wonderful feature, and it collapses completely when the list reads “learn more, learn more, learn more, click here, read more.” Out of context, those phrases mean nothing. The fix costs you nothing visually: make the link text say where it goes. “See pricing” instead of “learn more.” When you’re stuck with short link text for design reasons, HTML gives you aria-label, an attribute that supplies the spoken name for an element without changing what’s on screen.

There’s a business argument here, and it’s simpler than most compliance discussions make it. A visitor who cannot tell what your buttons do cannot buy anything from you. Blindness and low vision are more common than most founders assume, and the people affected have the same money and the same problems your product solves. Every unlabeled button is a customer standing at a counter where the clerk refuses to speak. They don’t file a complaint. They leave.

The good news is that the walkthrough itself is the diagnostic, and it takes fifteen minutes. Turn on VoiceOver or NVDA, put your hands on the keyboard, and try to do the one thing your homepage exists to make people do, without looking at the screen. You will find the unlabeled icon button in your navigation. You will hear the filename where your hero image should be. You will discover the cookie banner that traps focus, or the modal that a keyboard can’t dismiss. These bugs are invisible to sighted developers precisely because sight papers over them.

When I built GazeSite I made the accessibility checks look at pages the way that listening session made me look at mine: what does each element announce itself as, and would a person hearing only the announcements understand the page. But no tool replaces the experience of actually listening once. It changes how you write HTML afterward, the way hearing a recording of your own voice changes how you speak. You stop asking “does this look right” and start asking “does this say what it is.” That second question turns out to be the better one, even for the visitors who can see.