Screen reader failures: three pages, three fixes

What a screen reader hears

Many users face accessibility issues when visiting web pages. These can range from hard-to-read text all the way through to a site layout that is impossible to navigate using a screen reader.

One thing we often help site owners with is accessibility, from making sure your site is WCAG compliant all the way through to assessing how the site works with screen readers. This is often not considered at all when sites and pages are created, and what seem like clever little features can turn out to be major issues for screen reader users.

Here you will find a collection of common issues that screen reader users often run into when browsing the internet, from walls of links that take dozens of Tab presses to get past, to sites where the content is impossible to find. These video examples show how the sites are heard, and what the user is never told.

For these examples we have created some mock sites to run through our screen reader recorder. All the patterns and issues are well known, and they are issues we have helped fix in the past.

What to expect

While these might seem like extreme examples, they are all taken from known sites that between us we have worked on. The huge mega menus are very common with ecommerce sites and it's really easy to trap screen reader users in never ending lists of links. The same goes for the at times beautiful forms, what looks sleek and clean, but to a screen reader are just text field, text field. If you are curious how your site sounds, please contact us below.

It's understandable: you have a site with a lot of areas and you want to make life easier for users. A lot of links get added, so to keep it clean there are sub menus that pop up on hover, clicking is saved for mobile, and it looks really nice. You use it, people in the office use it, you try it on your phone, your tablet, maybe even the TV. All good? Probably not. Every one of those menu items is a stop for a screen reader, which can mean pressing Tab 20, 30 or 40 times before reaching the content.

link Find a branch 1 of 12
link Trade account 2 of 12
link Credit application 3 of 12
link Delivery & collection 4 of 12
link Returns 5 of 12
link Safety data sheets 6 of 12
link Track my order 7 of 12
link Gift cards 8 of 12
link Workshop blog 9 of 12
You are currently on a link. To click this link, press Control-Option-Space.
link Contact us 11 of 12
link Help centre 12 of 12
end of list
link Bulk Hire & Tools
Same-day tool and plant hire across the East Midlands
list 6 items
link Hire equipment 1 of 6
You are currently on a heading level 3.
list 3 items level 2
link Scissor lifts 1 of 3
link Buy tools 2 of 6
link Branches 3 of 6
heading level 3 EAST MIDLANDS
list 3 items level 2
link Derby 1 of 3
link Leicester 2 of 3
link Nottingham 3 of 3
end of list
heading level 3 STAFFORDSHIRE
list 3 items level 2

The user has to get through the top 12 links before even reaching the main menu
No help at all is given, so the user is trapped in this maze of menu links on every page load
One panel of 30 links is always open, so a screen reader has to announce them every time
The other five panels only open on hover, so a keyboard never reaches a single link inside them
There are no ARIA attributes, so nothing says which panels are open or closed, just a never-ending list of links

Utility navigation
list 12 items
link Find a branch 1 of 12
link Trade account 2 of 12
link Credit application 3 of 12
link Delivery & collection 4 of 12
link Returns 5 of 12
link Safety data sheets 6 of 12
link Track my order 7 of 12
link Gift cards 8 of 12
link Workshop blog 9 of 12
You are currently on a link. To click this link, press Control-Option-Space.
link Contact us 11 of 12
link Help centre 12 of 12
end of list
end of Utility navigation
banner
link Bulk Hire & Tools
Same-day tool and plant hire across the East Midlands
Main navigation
list 6 items
collapsed link Hire equipment 1 of 6
collapsed link Buy tools 2 of 6
collapsed link Branches 3 of 6
collapsed link Trade account 4 of 6
collapsed link Support & safety 5 of 6
collapsed link About us 6 of 6
end of list
end of Main navigation
end of banner

Labels and collapsed sub menus mean the screen reader actually describes what is shown
You need to open a menu to see its items, but it is much easier for all users
All the important landmarks have labels, so the user can tell where they are and how the site is set up
All the panels can be opened with Enter or Space, or a click, and closed with Escape
It takes only 30 steps to get to the end of the navigation bar, whereas the old menu takes over 130

The tab order and the form

I must admit, forms without labels look good. They have a sleek appearance: you can have the field say "First Name" as the placeholder and it tells the user exactly what to fill in. You can even add a "*" to show it is a required field. Little cues that feel really intuitive, but to a screen reader it is an input with no label. The same applies to the tab order. This usually follows the order the elements appear on the screen, but with CSS trickery, where things appear is not always where they sit in the page.

Broken tab order and form

link Bulk Hire & Tools
Main navigation
link Hire
link Buy
link Branches
link Contact
end of Main navigation
end of banner
main
heading level 1 Get a quote for scissor lift hire
Tell us what you need and we will confirm availability and pricing by email within one working hour. The first Tab press does not start here; it starts in the middle of the form below.
heading level 2 Need help?
Delivery is free within 20 miles of a branch for hires over £100. Out of hours collection is 1 further per hour. This panel sits at the top of the page but is read out last, after the form.
link Email the hire desk
·
link Delivery FAQs
Delivery postcode
Delivery postcode DE1 1AA edit text
No label here, so this box is announced as edit text, blank edit text blank
Your name
No label either, so nothing is said for this one edit text email blank
No label here either edit text telephone blank
Delivery date *
DD/MM/YYYY edit text blank
Site address *
Site address * Street, town, postcode edit text
Hire period *
One day radio button, 1 of 3
One day
One week radio button, 2 of 3

The first Tab jumps into the middle of the form, which is confusing whether it's deliberate or not
The next Tab jumps to the bottom of the form, then back up again
The menu and the help panel are skipped completely
Fields with no label just say "edit text, blank"
A form submitted with mistakes only shows a red border, so nothing is announced

Fixed tab order and form

banner
link Bulk Hire & Tools
Main navigation
link Hire
link Buy
link Branches
link Contact
end of Main navigation
end of banner
main
heading level 1 Get a quote for scissor lift hire
Tell us what you need and we will confirm availability and pricing by email within one working hour.
Need help? region
heading level 2 Need help?
Delivery is free within 20 miles of a branch for hires over £100. Out of hours collection is £1 an hour.
link Email the hire desk
·
link Delivery FAQs
end of Need help? region
Your details group
Your details
Delivery postcode required
Delivery postcode required The nearest branch quotes for this postcode. edit text
The nearest branch quotes for this postcode.
Site contact name required
Site contact name required Who we should ask for on site. edit text
Who we should ask for on site.
Email address required
Email address required The quote is sent here. edit text email
The quote is sent here.

The first Tab starts at the top of the page, so the form starts where it looks like it starts
The next Tab moves down the form in the order it is shown
The menu and the help panel are read first, so the delivery charges are heard before the form
Every field has a label, so the screen reader says what each box is for
A form submitted with mistakes announces them, and focus moves to a summary

The other patterns

There are other little things we do on pages and in content that feel nice and clean, but again cause issues for screen reader users. Tables without header rows, images missing alt text and quick content changes can all cause issues. When an image has no alt text, nothing can be said about it, and the screen reader user is left wondering whether it is a photo or some little banner.

As for countdown timers, have a watch and see (the transcript only shows it three times, not every time it is said, and the same would happen with any text-only screen reader testing).

Broken patterns

link Find a branch
·
link Help
Spring sale: 20% off all scissor lifts until Friday. This is read out the moment the page opens.
banner
Unlabelled image Unlabelled image To get missing image descriptions, open the context menu.
Main navigation
Offer ends in 267 seconds, and this is said every second
link Earthmoving
link Power
link Brands
end of Main navigation
image button, group
Offer ends in 241 seconds, and this is said every second
main
Silent title
It looks like the page title. It is a div, so nothing is announced for it.
Offer ends in 226 seconds, and this is said every second
/svg%3E Unlabelled image
image button, group
heading level 3 Scissor lift, 19ft
£68 per day, delivered. The picture above has no alt text, so it is passed over in silence.
link Read more
/svg%3E Unlabelled image
image button, group
heading level 3 Mini excavator, 1.5t
£112 per day, delivered. The heart button on this card is a red heart shape and nothing else.
link Read more
/svg%3E Unlabelled image

The countdown timer announces over the reader every second, and as the message takes more than a second to say, it never stops
Every now and then an actual notification comes through, but the countdown makes the site unusable
Images without alt text give no clue to what they are, a photo of your product or the logo for a feature
A table without a header row is just text with no meaning at all, even a visually hidden header row fixes it

Fixed patterns

link Find a branch
·
link Help
Spring sale: 20% off all scissor lifts until Friday.
banner
link image Bulk Hire and Tools home
Main navigation
link Powered access
link Earthmoving
link Power
link Brands
end of Main navigation
Basket, 2 items button
Your account button
end of banner
main
heading level 1 Today's offers
Scissor lift platform raised beside a shopfront image
Save the 19ft scissor lift for later toggle button
heading level 2 Scissor lift, 19ft
£68 per day, delivered.
link Read more about the 19ft scissor lift
Mini excavator with a 300mm digging bucket image
Save the 1.5 tonne mini excavator for later toggle button
heading level 2 Mini excavator, 1.5t
£112 per day, delivered.
link Read more about the 1.5 tonne mini excavator
Petrol generator with two 13 amp sockets image
Save the 3kVA petrol generator for later toggle button
heading level 2 Petrol generator, 3kVA

The countdown is plain text, so nothing interrupts when the page opens and nothing repeats every second
Every image has alt text, and the icon buttons have names, so the basket is read as "Basket, 2 items button"
Each "Read more" link says what it is for, such as "Read more about the 19ft scissor lift"
The table has a caption and header cells, so each price is read with the column it belongs to
One real heading at the top, and the French and Spanish quotes are read in the right voice

In this example you can see how helper shortcuts can make life so much easier for users of screen readers. However it's not just screen readers, many seasoned computer users are just as happy using your site without a mouse and this helps here too. Reach out if you would like to find out more and help get your site up to speed.

Try them yourself

Feel free to take a look at the examples on our GitHub. All seven shown on this page can be seen there, either as raw HTML or fully rendered as web pages.

As you can see from the examples, you do not need to sacrifice functionality or presentation. It just takes a little careful planning, strict implementation and regular checks to make sure that a quick change you made has not made the site unusable for many users.

A man in a wheelchair reading a message on his phone while working on a laptop at home.

Harry has written about what accessibility actually costs, why the curb cut effect applies to websites, and the numbers behind the customers you lose when a site is hard to use.

“If you want more happy customers and to make more money, then obviously it's worth it. Even if you ignore the moral obligation, this should be something you want. But as you can see, making something accessible is not something that should be ignored. Implementing fixes after a website has been designed and built is a lot more costly than getting it right at the beginning. There is no denying that, but even then a lot of the fixes can be added with minimal work, providing the website has been well built from the start.”

Read Accessibility in 2026, a blog post by Harry

If you would like to audit your existing site or advice on your next rebuild, please drop the PinkCrab team a line.

Get in touch