Basics of accessibility for online shopping

Note: This post is older than two years. It may still be totally valid, but things change and technology moves fast. Code based posts may be especially prone to changes...

(Read 682 times)

Online shopping must be more accessible and it must happen now. Pandemics, quarantines and isolation are for sure one of the strongest reasons, but if you are a shop owner in the EU you should also consider the legal part of it. There are for sure also returns of investment, but please do the right thing and stop discriminating people with disabilities!

Online shopping got a boost with covid pandemics, but it’s benefits made it grow anyway. And guess what – people with disabilities often prefer to shop online anyhow. But sometimes they can’t. Sometimes online shops make it even more difficult to shop and have even more steps or sometimes door will just not open for some groups of online shoppers. European Accessibility Act (EAA) was planning to do something about it even before the pandemy. I will try to describe some problems and solutions that can help to make online shopping more accessible to everybody.

Navigation, search and getting around in general

To navigate the page and to search for products we would like to buy is quite basic. And yet many online shops fail to make this task easy for people with disabilities. Some people can not use their mouse or maybe just prefer to use keyboard because they are more effective with it. For some users using mouse is not possible and for some other users it may even cause them pain.

Navigation with interactive elements

That’s why all interactive elements on the page must work with keyboard alone. Starting with navigation and search. Quite often it is the code that makes or breaks this. Expanding navigation made incorrectly may mean that only users with mouse or touch can find the hidden parts. Sometimes whole menu’s stay hidden for users with keyboard because of poor code. Same goes for screen-reader users that need properly coded, semantic elements for expanding parts of the navigation or any other similar patterns.

Some users want to skip navigation or search filters

You probably wondered about “skip to content” links that some sites have. Maybe stumbled upon it by accident or even seen it being there. Well those can be really useful for all returning visitors. Imagine an online store with hundreds of categories in the main navigation. I will not discuss if that kind of architecture is appropriate but I’ve met a lot of them so I will say it’s another pattern that sometimes can not be avoided. Well if you are a keyboard only user chances are that you will have to tab through all of them to reach the main content. In cases like that it is very handy to have a “skip to content” link before such mega menu. And in case of large filters in search you can also have a “skip filter” to allow keyboard only users to skip to search results. Screen-reader users have better ways of skipping content but only when the website is coded with semantic landmarks and elements. They can just navigate directly to main container if it is coded as main container. And they can listen to a list of all headings on the page and just use the headings for navigation if they like. As long as page is coded appropriately that is.

Search results and product cards

Shops can have most amazing search functionality with predictive machine learning powered helper searches but it also needs to be coded correctly when page shows the results, otherwise screen-reader users may just have to guess if the page is broken or if there are no search results. On the other hand site can be coded properly but all the links or buttons on it are “click here”, “click to buy”, “add to cart”, “buy” and so on. Screen-reader users need them to be distinctive. Otherwise they may actually try to buy a wrong item, causing them to go back and try to buy the correct item and just trying and failing to make it happen. It is also crucial for users that need to use voice command software; “click on buy now” where all of the links are “buy now” may cause a lot of effort to buy correct item.

Other groups of users may have problems when zooming in and seeing text and elements being cut off, rendering them unreadable. Or quite often the contrasts of text versus background and interactive elements versus background can be so poor that they can not see anything.

Search functionality evolved in the last years and with enough data we can make our results cross-sale and even change shoppers minds sometimes. So it is crucial that this functionality is accessible as well. Correct design and code are again crucial. Keyboard only interactivity, screen-reader status messages when things change are the minimum. Filters, options, facets and other interactions must be semantically coded and when we want to introduce a new pattern we should really be careful about it as it may be inaccessible for some parts of our user groups.

I also have to mention lazy loaded infinite scrolling that is very often totally inaccessible for keyboard users. Please test it if you use it. Can you skip it and come to other parts that are below it in the document tree?

Different users prefer different ways

How do we then solve this for so many different users? Well as always – Web Content Accessibility Guidelines (WCAG) are there to help us. They define all of the practices that we need to think about when designing, developing and also editing texts in our online shop. Online shop itself must provide good practices, so designers and developers need to use the information provided by WCAG to make it accessible and the shop owners and their content providers need to make the content accessible. No more “click to buy” all over the place, images and other non-text information having proper alternative text should be a common sense. For search engines as well.

Content, supporting media, animations and adverts

We can buy a perfectly accessible website or web shop and then break it with inaccessible content. Content is the third most important part of the puzzle, besides design and coding. Main issues with online shopping are as mentioned non-distinctive link and button texts (“click here”, “buy now”, “add to cart”,… on every product card, for example), missing or poor alternative texts on images and other visual elements and missing or wrong heading levels.

Those are basics that can really make or brake accessibility for potential customers, so it’s worth investing into mastering them. Some issues need code and design help to be resolved, for example templates that have hard-coded “buy now” for all products or page sections with wrong heading levels, inability to set different languages on parts of the page that requires that and so on. But a lot can also be done within the content management system of the online store. So it is crucial to know about them, ask about them when we develop or buy online store back-end and also that our personnel really uses them correctly.

So to summarize, our platform needs to support us for us to provide accessible content;

  1. possibility to set custom language on parts of site when appropriate,
  2. possibility to add alternative text to images, sometimes same image needs different alt. text because of the context,
  3. possibility to edit “Buy now” and similar texts inside product cards,
  4. possibility to make changes to parts of templates after content takes over the site

As always knowledge is key and content creators need to be educated about accessibility and generally good practices for search engine optimization and readability, often three sides of same task.

Modals, pop-ups, notifications, etc.

One of the most problematic user experiences are automatically triggered pop-ups, modals, sign now overlays and other elements that break our journey on the site. I’ve written a bit on the cookie consent usability and I will not repeat it here. We may even conclude that cookie consent is a necessary interruption due to legislation, at least in some parts of the world. But all other marketing oriented modals are not! So let’s check some of disturbances and what to do about them.

Majority of modal windows / pop-ups and alike are not made accessible, unfortunately. Even native HTML element for dialog is not. We can make it quite accessible with some coding patterns but it may always be a problem when it is triggered automatically. Besides that too many sites use multiple modals at the same time;

  1. Cookie consent modal (OK, let’s take it as a legal requirement),
  2. Browser notifications alert,
  3. Discount modal for all new users,
  4. Sign to our newsletter to receive a discount,
  5. Any seasonal discounts,
  6. Maybe even some other modals like a video commercial

This will make a lot of users hate that kind of site. I will not go into the usability issues of this but let’s check the accessibility issues;

Accessible modal will move the focus inside of it (depends, but focus can be set on the modal itself or first interactive element inside), content behind modal must not receive any interactions from the keyboard or screen-reader, so that modal is the only thing on the page, actually. When layering multiple modals, like in the example of ours. We will steal a lot of users time before they can even start to search what to buy.

With poor contrast, poorly coded close buttons and sometimes even dark patterns that trap the keyboard or force the user to do an action we are only making it worse.

I would say that browser notification and newsletter subscription belong together and may not deserve a modal but can be a part of the check-out process and maybe in the footer. We can use banners and asides for almost all of the items that appear in the modals, but we just need to make them stand out a bit, design- and code-wise.

Videos and carousels/sliders

Advertising videos should not autoplay, at least not for more than 5 seconds and at we must offer some kind of pause play stop hide mechanisms beside them. Browsers started to help users with preventing autoplay (opens in new window) for a reason. And please make all non-text content have a text alternatives – videos captions, images alternative text inside alt attributes or mapped with help of ARIA.

There are still a lot of shops that love the auto-spinning carousels with images that have text burned inside and no way to stop the spinning of them. This should stop a long time ago but just won’t. So I will not say if but when you need to have a carousel please make it accessible;

  • coded semantically, so that it will support assistive technologies like screen-readers,
  • make it controllable with proper interactive elements, so that all users can pause them and make them play,
  • provide text alternatives for information that is presented visually,
  • designed with good contrast and preferably large enough interactions.

Some videos are used as a background and can cause problems for people that have difficulties to concentrate. So called hero videos should be used with cause. I would also suggest that you add a pause button or maybe swap it and make the video paused and let the user trigger play if they want to.

Animations, parallax and other animated visual effects

Animation is not forbidden when we want to make web accessible. But we must know the rules and limitations before we use it. Some animations give our story or product a better presentation, but some animations can cause users to get confused or in some cases even physically ill, . So please learn more about the minimum to conform to – WCAG is again your helper, I’ll just briefly list some of the most important things here;

  1. as mentioned before – Pause, Stop, Hide controls are a must in some cases, but often also useful in other cases, please check out WCAG success criterion 2.2.2 to learn more about the details (opens in new window),
  2. be very careful with blinking content, on the page or in the videos – blinking more than three times per second can be especially a huge problem, you should consult with WCAG success criterion 2.3.1 (opens in new window) that is specifically useful for this situation,
  3. even animation from interactions can be a problem for some groups of users and before animating your “add to cart” I would suggest to investigate what WCAG success criteria 2.3.3 is all about (opens in new window).
  4. some users set their operating system to reduce animations for them, please respect that settings with CSS media query “prefers-reduced-motion” (opens in new window) and reduce or maybe just remove all animations (and I would suggest also auto-plays).

Parallax can be a problem for some users

There are people that get dizzy, get headaches or nausea when page elements move when they scroll (opens in new window). They most probably suffer from vestibular (inner ear) disorder and whole page parallax effects can really cause them trouble. Somebody may argue – well how do I know that my users include people with vestibular disorders? We can not answer that question but it is also a wrong question to start with. Would you like your site to cause just a single person to be ill? I sure would not. But what can we do when we really want a parallax on our site? Well we can introduce some controls on the start of the page that at least let the effects to be turned off. And again – if user has chosen to have reduced animations on the OS level then we should respect that setting also for parallax (prefers-reduced-motion CSS media query can also be used inside JavaScript and then we have full possibilities to turn the parallax totally off).

User journey accessibility

Besides general parts of the online shop and parts covered previously we need to keep in mind that whole user journey needs to be accessible. Online window shopping is just the first step, then we have to also get the process of ordering, buying, invoicing and after-sales to be accessible. Let me shortly dive into them as well.

Add to cart, add to basket, select to buy

This part is very important as it is the first step towards a deal being made. Usually conforming to known and ever-green user experience patterns will go a long way but we must consider also groups of users that may fall out here. One group can be users that need to use our site with zoom on. Our solution should be predictable for them – usually the “shopping cart” is on the right top of the page or maybe sometimes in a sticky element somewhere in the bottom. Beware of the sticky elements as they can do a lot of harm to users on mobile that need to zoom in – it can cover too much of their screen and make the page almost unusable. Again a thing that needs testing.

Another group of users that may have issues are users of screen-readers – please use ARIA status messages to confirm that products are in the “cart”. At the same time it is crucial to code this cart appropriately, depending on the overall design and semantics it should be easy to find for everybody.

Forms need to work for everybody

How many forms do we really need, what is the minimum information to deliver a product or service and how to design and code the forms. Guest logins, returning visitors and so on. You know what I am talking about. Form accessibility is almost a field for itself, so I will not get into all the details in this post but I can not stress this enough – forms need to be usable and accessible otherwise shop owners may loose customers.

Ideally there should be a metrics on them, after users gave their consent, so that we could measure that our forms perform. But we should really do our best to make them usable and accessible and then also test and improve them. Properly designed and coded forms can be really helpful to all kinds of different users but we should also make them work for users with screen-readers and test them with them, especially if we introduce some less known patterns. Autocomplete on known fields saves every user time, good contrast and readable forms with lots of white space can really make a difference. And good, helpful inline validation to prevent user mistakes should be a fact.

Emails, invoices, specifications, user manuals also need to be accessible

Emails are usually made in HTML, so making them accessible is not a problem, we just need to go through all of them consistently. Invoices and other documents are quite often saved as Portable Document Format (PDF) documents, and it can be a bit more effort to make them accessible, especially when they are generated dynamically with some software tools. Please make an option to provide them in accessible format if you can not make the PDF accessible. I am personally still searching best options for automatic generation of accessible PDFs but there are probably some vendors that can make them accessible.

Accessibility is more than just return of investment

By making our online shop(s) accessible we may argue that we can reach about 20 – 25% more of the potential buyers. But that is not an exact science as we should be aware that accessible online shops will most probably also be simpler and more usable for people that don’t have a disability.

There is also the loyalty factor – people with disabilities will prefer an more accessible online store when they can choose. We should also keep in mind that search engines measure user experience metrics. That means that accessibility, at least some part of it, may soon become a ranging factor as well if it maybe isn’t already.

But there is also the sustainable and ethical point of view. As society we grow older and with age we need better solutions around us. Online shopping that works for everyone is an investment in the future and in our future selves as well.

Author: Bogdan Cerovac

I am IAAP certified Web Accessibility Specialist (from 2020) and was Google certified Mobile Web Specialist.

Work as digital agency co-owner web developer and accessibility lead.

Sole entrepreneur behind IDEA-lab Cerovac (Inclusion, Diversity, Equity and Accessibility lab) after work. Check out my Accessibility Services if you want me to help your with digital accessibility.

Also head of the expert council at Institute for Digital Accessibility A11Y.si (in Slovenian).

Living and working in Norway (🇳🇴), originally from Slovenia (🇸🇮), loves exploring the globe (🌐).

Nurturing the web from 1999, this blog from 2019.

More about me and how to contact me: