In today’s post, I am going back to basics. Every interaction I have on the internet happens without a mouse, so the way I navigate an unfamiliar website looks nothing like how a sighted user does. I am going to walk through a purchase I made recently on an online electrical supply retailer, from the homepage to the checkout, using an e-commerce site because the flow is familiar and predictable.
I will say up front that this is my approach, and screen reader use is subjective enough that strategy varies a lot from person to person.
New to screen readers? Start with our guide to what a screen reader is and how it works.
Deciding how I want to use the site
When I land on a new website, the first thing I have to decide is how I want to use that site’s functionality to get to my final task. On an e-commerce site, that means picking between a direct product search and shopping by category. Believe it or not, the answer to that very simple question determines my next move, at least in my case.
The purchase I am describing was a special type of surge protector power strip I needed for a home improvement project. Before I even touched my device's keyboard, I decided to start by shopping by category. To do that, I needed to explore the homepage to understand the site’s general shopping structure and how a category-based search starts.
The first thing I did was set my screen reader to filter by headings only, then move through the page and hear the heading titles at each level. This works with essentially all screen readers, but the process varies considerably from reader to reader. With my screen reader of choice, VoiceOver, I change the jump navigation category with the rotor.
Moving by heading is a great screen reader navigation tool. If a site is built correctly, the most important functionality and information categories are easy to find at each heading level. If I had wanted to start with a direct search instead, or with a collapsed navigation menu, I could have used the button, text field, or link rotor options to find the element I needed.
Back to the example. I navigated by heading until I found “Shop By Category” at heading level 1, and in this case it was only the second option in the list. On more complex sites, it can take several or many attempts before I locate the section I am looking for. At this point, I switched my rotor back to manual navigation, a mode where focus advances one web element at a time with each arrow key press.
As I moved further into the page, I heard a sequence of product categories. I found the one I wanted, labeled “Surge Suppressors and Power Strips,” and activated it to continue.
When the next page loaded, I switched back to heading navigation and started moving through the page. I found the product list at heading level 2. I switched back to manual navigation with one goal: to figure out how the product listings were displayed and whether I would need the search filter options to find what I needed.
After some quick checking, I decided the product listing structure was clunky. The product image, product title, overall customer star rating, price, availability, and an “Add To Cart” option were announced separately. All of that is useful information, but each piece was spoken one at a time, so hearing every detail meant shifting focus back and forth repeatedly. I didn't want to go through the entire product list one element at a time because it would have been very time-consuming.
I noticed that the product title in each listing linked to that item’s product details page. To move through the list hearing only the product titles, I set my navigation rotor to move by link only. In that configuration, each forward advance took me to the next product title. That let me move quickly through the list until I found the item I wanted; in this case, I got lucky and found it without needing the search filters.
On product details pages, my approach varies based on the type of product and what I am trying to do. If I am making a routine purchase and don't care about the product details or customer reviews, I usually set my rotor to buttons and jump straight to the “Add To Cart” option. In this case, I wanted to browse some product details.
From the very top of the page, I started navigating manually through the contents. I moved past the product title, the price, the availability and shipping time estimates, and the “Add To Cart” and “Express Checkout” options. Then I got to the product details and item description I was looking for.
I chose manual navigation here for two reasons. All product detail pages are different, and I didn't know how this one was organized. I also wanted the price and shipping availability anyway, so it made sense to go manually through that small section of the page.
I listened to the product details using standard text navigation commands and verified the power strip’s specifications. Then I used the button filter rotor option to find the “Add To Cart” button. Luckily, a modal popped up asking whether I wanted to continue shopping or go to the cart, which saved me from searching the top header bar for the shopping cart. If that had been necessary, I most likely would have returned focus to the very top of the page and filtered by button or link until I found the cart.
Once I was in the cart, I used the same navigation methods to get through checkout and complete my purchase. A handy filter category during e-commerce checkouts is text fields. That lets me jump quickly to the input fields in the various forms without hearing the same details over and over, such as the contents of the order.
Some types of websites are way easier to navigate than others. From what I have run into, it comes down to a couple of things, mainly how tight the accessibility is and how consistent the design language is. The sites I find easiest have a clean, organized structure that stays consistent from page to page.
One feature I want to give honorable mention to is the skip navigation link. It sits at the very top of the page, visible to screen readers only, and lets me bypass all the fluff up there (decorative banner images, logos, top header bar options) and land directly on the main content. Since focus tends to return to the very top of the screen when a new page loads, a skip link saves me that trip every single time.
The hardest sites I have used are the outdated ones, the image-heavy ones, the cluttered ones, and the ones packed with interactive elements. On sites like that, if the accessibility isn't solid, I don't stand much of a chance of getting through them.
Another thing I lean on is pattern recognition. It is not true in every case, but the shopping sites I have used follow a fairly consistent design language and structure. So I can take what I picked up on other e-commerce sites and use it to tackle a brand-new one, betting that the general usage flows are close to standard.
For site types I have no experience with, or for especially confusing ones, I will occasionally listen to a page from top to bottom to get a comprehensive idea of its structure and content. I avoid that when I can. It is time-consuming and often clunky, and taking in an entire page’s contents in one shot can be a lot to absorb.
I hope this sheds some light on the methods, strategies, and tools I use when I hit a new or unfamiliar website. Many factors influence my navigation decisions, and I hope that came through clearly here. The most important part, though, is that while these methods work for me, they will not work for everyone. Screen reader use isn't one-size-fits-all. Every user has to balance what they are comfortable with, what works for them, and how they handle sites that are tough to navigate.
Yes, you can complete a purchase with a screen reader. I did for this one. It took switching between four different navigation modes to get there, so it was slower than it needed to be, but nothing on the site stopped me outright.
Because each piece of the listing gets announced separately. On the site I used, the image, title, star rating, price, availability, and “Add To Cart” button were each a separate stop. My guess is that nothing was grouped, so no single announcement tells me what the product is and what it costs. Filtering by link and hearing only the titles is faster, but then I am browsing without the prices or the ratings.
It is a link at the very top of the page that only screen readers see, and it drops me straight into the main content. It helps a lot. Without it, I walk past banners, logos, and the whole header bar every time a new page loads.
I do it once in a while, usually when a site is new to me or confusing enough that I cannot get my footing any other way. Most of the time I avoid it. It takes a long time, and a full page in one pass is a lot to hold in my head.
Michael’s account is one site, but the pattern is worth testing.
Can someone get from a category page to a product page using headings and links alone, and does each product in a listing announce as one item or as six separate stops? At checkout, jumping between text fields is only fast if those fields are labeled, and that's a common place for things to fall apart.
Our post on why blind shoppers often cannot complete online checkout covers what tends to go wrong there.
Barriers that slow a screen reader user down mid-task often overlap with issues listed in complaints. If one part of the shopping journey proves difficult with a screen reader, test the full journey instead of fixing that issue in isolation.
Want to see screen reader navigation in action? Watch our on-demand screen reader demo with Joe DiNero of Helen Keller Services for the Blind.
If your team does not have the developer bandwidth to work through them, UsableNet Assistive is a managed service: our developers remediate and maintain accessibility on your site. Schedule a consultation to talk through what your own shopping journey looks like to a screen reader user.