Reviewed by Misha Gavura, founder of Inclusely. Last reviewed . Written by the Inclusely team at EVDEV, Toronto.
The short answer
Turn on a free screen reader: VoiceOver on a Mac or iPhone, or NVDA on Windows. Then try to buy one product from your home page to the payment step without looking and without a mouse. Listen for the page title, headings, the product name and price, every size and colour option, a message after Add to cart, and labels and errors in checkout. Anything you cannot do or understand is a barrier to fix.
Run the free accessibility checker first. It finds missing labels and alt text in seconds, so your listening time goes on the things only a person can judge.
Which screen reader should you test with?
A screen reader is software that reads the screen aloud and lets people move around with the keyboard or touch gestures. Many blind shoppers, and some with low vision, use one. You do not need to test with all of them. Start with the two that are free and common.
In WebAIM's 2024 survey of 1,539 screen reader users, the main desktop screen readers were JAWS (40.5%), NVDA (37.7%) and VoiceOver (9.7%). On mobile, 70.6% of respondents used VoiceOver and 34.7% used TalkBack on Android. The most common pairings were JAWS with Chrome (24.7%) and NVDA with Chrome (21.3%). WebAIM notes that the survey is not a controlled sample, so treat these as a guide.
A good plan for most stores: VoiceOver on iPhone, because many shoppers buy on their phone, and NVDA on Windows, because it is free and runs with Chrome, the browser most JAWS and NVDA users in the survey paired it with. If you only have a Mac, VoiceOver with Safari is a fine place to start.
How to set up VoiceOver and NVDA
VoiceOver on a Mac
- Press Command + F5. You can also go to Apple menu, System Settings, Accessibility, VoiceOver.
- The VoiceOver keys, written VO, are Control + Option (or Caps Lock). So VO-A means hold Control and Option, then press A.
- Use Safari. WebAIM notes that VoiceOver works best with it. In Safari settings, under Advanced, turn on the option to press Tab to highlight each item on a webpage.
- New to it? Apple's built-in tutorial opens with VO + Fn + Command + F8.
VoiceOver on iPhone
- Go to Settings, Accessibility, VoiceOver, and turn it on. Or ask Siri to turn on VoiceOver.
- Set up the Accessibility Shortcut first if you want a quick way out: then a triple-click of the side button turns VoiceOver on and off.
- Gestures change. One tap selects, a double tap activates, and you swipe right or left to move item by item. Try VoiceOver Practice in the same settings screen before you open your store.
NVDA on Windows
- Download it from nvaccess.org and install it. It is free.
- Start it with Control + Alt + N. Quit with NVDA + Q.
- The NVDA key is Insert by default. You can choose Caps Lock as well, which is easier on a laptop.
- Turn on the Speech Viewer from the NVDA menu (under Tools). It shows every word NVDA says, which makes it much easier to write down what you heard.
Slow the voice down at first
The keys and gestures you need
You need about ten commands to test a store. Most screen reader users jump around a page instead of listening from top to bottom, so learn the jumps as well as read all.
Two more things to know. In NVDA, letters like H and F only jump when you are reading the page (browse mode). When you land in a text field, NVDA switches to typing (focus mode) so your letters go into the field. NVDA + Space switches between the two. On a Mac, add Shift to any jump to go back to the previous item.
Test a product page, step by step
Pick your best-selling product, the one with the most variants and photos. Close your eyes or turn the screen brightness down, and do each step below. Write down what you hear, word for word, when it is wrong.
Open the page and listen to the first thing it says
The screen reader reads the page title first. It should name the product and your store, such as Linen shirt in sage, Northwind Supply. If it says only Home or the store name, shoppers who open many tabs cannot tell them apart.Jump through the headings
Press H in NVDA, VO-Command-H on a Mac, or set the iPhone rotor to Headings and swipe down. You should hear one level 1 heading with the product name, then sections such as Description, Reviews and You may also like. In the WebAIM survey, 71.6% of screen reader users said they move through a long page by headings first.Listen to the price
A sale price should say which number is which, such as Regular price $40, Sale price $30. Two numbers read one after the other, with no words, tell a blind shopper nothing.Go through the product photos
Each photo should have its own alt text (a short description for people who cannot see it). If you hear a file name, the product title six times, or nothing at all, fix the alt text first.Choose a size and a colour
Move to the variant picker with Tab or F (form field). Each option should say its group and its name, such as Size, M, radio button, 2 of 5, selected. Colour swatches that say only radio button, or nothing, are a common problem. Also check that a sold out option says it is sold out or unavailable.Change the quantity
The plus and minus buttons should have names such as Increase quantity. A button that says only button is a missing label.Press Add to cart and listen
Something must tell you it worked. Either focus moves into a cart drawer that names itself, or you hear a message such as Added to cart. Silence after the button is a common problem, and it leaves shoppers unsure whether to press again.
Test the cart
- Open the cart drawer or cart page. Can you find the list of items by heading or landmark? Does each line say the product, the variant you chose, the price and the quantity?
- Change the quantity, then remove an item. You should hear that the cart changed, and the new total. Focus should not jump back to the top of the page.
- Close the cart drawer with Escape. Focus should go back to where you were, usually the button that opened it.
- Listen to anything an app added to the cart: free shipping bars, upsells, gift wrap, discount fields. App widgets often add buttons with no names.
Test checkout
Shopify builds and hosts checkout, not your theme. Shopify publishes a conformance report for it. The March 2026 edition rates many WCAG 2.2 criteria as supported and lists known gaps, including error messages that may not be brought to the shopper's attention right away, focus rings that can be hard to see, and express payment buttons (PayPal, Venmo, Amazon Pay) that may create barriers. Shopify says the work on these is ongoing.
You cannot change Shopify's checkout code, but you still own some of what shoppers hear and see there: your checkout colours and logo (check the contrast), any checkout apps or extra fields you added, and your payment and shipping method names. So test it.
Start checkout from the cart
Press the Check out button. The checkout page should have a clear title and a heading for each section: Contact, Delivery, Shipping method, Payment.Fill the contact and address fields
Every field should say its label when you reach it, such as Email, edit text, required. Try the address autocomplete: can you reach the suggestions and pick one without a mouse?Leave a required field empty and submit
You should hear the error, and it should say which field and what to do. If nothing is spoken and you have to hunt for red text, note it.Pick a shipping method
The options should be a group of radio buttons with the price in each name, such as Standard, $8.00, radio button, 1 of 3.Reach the payment section, then stop
Listen to the express buttons and card fields. You do not need to place a real order. Stop before Pay now.
Report what is Shopify's, fix what is yours
Fixes in your theme for what you heard
Most problems on the product page and cart come from the theme or an app. Many can be fixed in a few lines of Liquid. Make changes on a duplicate theme (Online Store, Themes, then Duplicate on your live theme) and test again before you publish.
An icon button that says only “button”. Add text that screen readers read but sighted shoppers do not see. Shopify's own themes, such as Dawn, already have a visually-hidden class for this. If a button is announced only as “button”, it needs a name: see aria-label explained, with Shopify examples. Terms like accessible name are explained in our glossary.
<a href="{{ routes.cart_url }}" class="header__icon">
{% render 'icon-cart' %}
<span class="visually-hidden">
Cart, {{ cart.item_count }} items
</span>
</a>Silence after Add to cart. Add a status message area once in your layout, then have the add to cart script put a short sentence in it. Screen readers read new text in a status area without moving focus.
<p id="cart-status" class="visually-hidden" role="status"></p>
<script>
// After the item is added:
document.getElementById('cart-status').textContent =
'Added to cart. Cart has 2 items.';
</script>Photos read as file names. Fix the alt text in the admin: Products, open the product, click the photo, then Add alt text. The alt text examples for product images show what to write.
Colour swatches with no names. Most themes use the variant option value as the swatch name. Check that your variants are called Forest green, not FG-01. If the names are right and you still hear nothing, the theme's swatch code needs a label, which is a job for your theme developer.
Common mistakes when testing with a screen reader
- Only pressing Tab. Tab moves between links, buttons and fields. It skips headings, prices and descriptions, so you miss most of the page. Use the arrow keys or swipes as well.
- Watching the screen. You will fill gaps with what you see. Look away or dim the screen, and trust only what you hear.
- Testing desktop only. Phone themes often use different menus, drawers and galleries. Test the same journey on iPhone.
- Using a mouse with the screen reader on. A click works even when a button has no name and cannot be reached by keyboard. Many screen reader users never use a mouse.
- Judging by an overlay widget. A widget's own “screen reader mode” is not what blind shoppers use. Test with the real screen reader with the widget turned off. Read why we do not build an overlay.
- Testing once. A new app, a theme update or a new section can break what worked. Test again after each change to the product page or cart.
Write down what you find
A short log turns a listening session into a fix list, and gives you a dated record that you checked. Four columns are enough:
Add the date, the device, the screen reader and the browser to each row. For which success criteria these problems map to, see WCAG 2.2 AA explained. For the rest of what needs a person, work through the ADA website checklist.
How Inclusely will help
Questions about screen reader testing
What is screen reader testing?
Screen reader testing means using your own site the way a blind shopper does: with the screen reader on, keyboard or touch gestures only, and listening to what it says. You check that every heading, image, button, form field and message is spoken in a way that makes sense, and that you can finish a task such as buying a product.
Which screen reader is best for testing?
Test with the ones your shoppers use. In WebAIM's 2024 survey, JAWS (40.5%) and NVDA (37.7%) were the main desktop screen readers and VoiceOver was used by 70.6% of mobile respondents. For a store, NVDA with Chrome on Windows and VoiceOver with Safari on iPhone cover a lot of people, and both are free.
Is NVDA free?
Yes. NVDA is made by the non-profit NV Access and is free to download from nvaccess.org with no licence key or subscription. JAWS, the other main Windows screen reader, is paid.
How do I test my website with VoiceOver?
On a Mac, press Command-F5, open the page in Safari and use VO-A to read, VO-Command-H to jump to headings and VO-U for the rotor. On iPhone, turn it on in Settings, Accessibility, VoiceOver, then swipe right to move through the page and double-tap to activate. Try to buy one product from the home page to the payment step.
Can I use a screen reader Chrome extension instead?
Extensions that show or read accessibility information are useful for a quick look, but they do not behave like the screen readers shoppers use. Do your real test with NVDA or VoiceOver, which are free and take about five minutes to set up.
Does an automated accessibility checker replace screen reader testing?
No. A checker can find missing alt text, missing labels and empty buttons. It cannot tell you whether the alt text is useful, whether Add to cart gives any feedback, or whether checkout makes sense when you only hear it. Use both: the checker first, then a short screen reader test. Our guide to automated vs manual accessibility testing explains the split.
How long does a screen reader test of a store take?
Your first one takes about an hour, most of it learning the keys. After that, a product page, the cart and checkout take about 20 to 30 minutes per device. Repeat it after you change your theme or add an app that touches the product page or cart.