Your testimonial section is doing a job: convincing a hesitant prospect that real people trust you. But that job only gets done if the prospect can perceive the testimonial in the first place. For a visitor using a screen reader — someone who is blind or low-vision, navigating your page by listening to it — the standard testimonial layout frequently falls apart. The customer's photo announces itself as "image," the five-star rating reads as nothing at all or as a meaningless run of graphics, and the beautifully styled pull-quote loses every cue that tells a sighted reader "this is what a customer said." The social proof you worked to collect simply doesn't land. The good news: fixing this changes almost nothing about how the section looks, and everything about whether it works for everyone.
Why testimonials break for screen readers
Sighted users get a lot of meaning from visual structure — the quotation marks, the photo, the gold stars, the name in bold under the quote. A screen reader doesn't see any of that. It reads the underlying HTML in order and announces what each element is. If your testimonial is built as a <div> with a background image and an SVG star graphic, the screen reader has nothing meaningful to say about it. The result is a testimonial that is visually persuasive and audibly empty — which, for the people relying on audio, means it isn't there at all.
This is the same underlying lesson as designing for dark mode and quote legibility: the testimonial has to survive being perceived through a channel you didn't originally design for. Screen-reader access is just the most overlooked channel.
Use real quote semantics, not just styling
Start with the markup. A testimonial is a quotation, so use the elements built for quotations:
- Wrap the quote itself in a
<blockquote>. Screen readers can announce it as a quotation, giving the listener the crucial cue that these are someone else's words, not your marketing copy. - Put the attribution — the person's name, title, and company — inside a
<figcaption>, with the whole unit in a<figure>. This ties the quote to its author programmatically, so the listener hears "quote … from Jane Okafor, Head of Ops at Northwind" as one connected thought instead of two orphaned fragments. - Don't fake a heading. If you use large, bold text for the quote, that's a visual style, not a
<h2>. Keeping it as a blockquote prevents the quote from polluting the page's heading outline, which screen-reader users navigate by.
The reason this matters is the same reason a testimonial beats your own copy at all: it carries weight because it comes from the customer, not from you. Strip out the "this is a customer's voice" signal and you've thrown away the exact thing that makes it persuasive.
Make the star rating speak
The star rating is the single most common failure point. Five SVG stars look great and say nothing. A screen reader will either skip them entirely or read "image, image, image, image, image." Fix it by giving the rating a text equivalent:
- If the stars are decorative and the number appears elsewhere, mark the stars
aria-hidden="true"so the reader ignores them, and make sure the actual score ("4.8 out of 5") exists as real text nearby. - If the stars are the rating, give the container an
aria-label="Rated 5 out of 5 stars". Now the listener hears the score as a sentence, not a stutter of graphics.
Either way, the rule is: a rating must be expressible as a short spoken phrase. If you can't say it in words, a screen reader can't either.
Write alt text that carries the meaning, not the pixels
The customer's photo needs alt text — but the right alt text depends on what the photo is doing. If the person's name is already in the caption right beside the photo, describing the image as "Photo of Jane Okafor" just makes the reader say her name twice. In that case, an empty alt="" (which tells the reader to skip the decorative image) is often the better choice. If the photo is the only place the name appears, then the alt text should carry it. The test is simple: after the screen reader finishes the whole testimonial, has it said everything a sighted user can see — the quote, the name, the title, the rating — exactly once, with nothing missing and nothing doubled?
Don't let a carousel trap or rush the listener
If your testimonials live in a rotating carousel, you've added a second accessibility hazard on top of the markup. Auto-advancing slides can move on before a screen-reader user has finished listening, and swipe-only controls can be unreachable by keyboard. At minimum, give every carousel a visible, keyboard-focusable pause control and make the slides navigable with arrow keys, not just touch. The full tradeoff between motion and access is worth reading in detail — see autoplay carousel vs. swipe-only — but the baseline rule is that no visitor should have to fight the interface to read a customer's words. The same "don't let the layout defeat the message" instinct applies on small screens, which is why displaying testimonials on mobile without losing impact is a related problem worth solving alongside this one.
A five-minute audit you can run today
You don't need an audit tool to catch most of this. Turn on your operating system's built-in screen reader (VoiceOver on Mac, Narrator on Windows), close your eyes, and tab through your testimonial section. Ask three questions as you listen:
- Can I tell these are customer quotes? (Blockquote semantics working.)
- Do I hear each rating as a number or phrase, not a run of "image image"? (Rating labeled.)
- Does every name, title, and score get read exactly once — nothing missing, nothing duplicated? (Alt text and captions balanced.)
If you can answer yes to all three with your eyes shut, your social proof is doing its job for every prospect who lands on the page — not just the ones who can see it. And since none of these fixes touch the visual design, you lose nothing and reach everyone.