How to make your store accessible? A quick guide
Providing a fully accessible ecommerce solution is not an easy task. Multiple pages, complicated logic, frequently changing content and continuous development with new feature implementation and updates make it a complex task.
This article provides a quick guide on how to test and improve accessibility in ecommerce, where to start and what to focus on. It explains what an accessibility audit is and why we need an accessibility statement.
What is WCAG?
We cannot talk about accessibility implementation without any reference. Our main guideline is WCAG - Web Content Accessibility Guideline. Its current version is 2.1. WCAG is an international standard which explains how to make web content more accessible to people with disabilities. To conform to WCAG 2.1 you need to satisfy the Success Criteria from chosen conformance level. There are three conformance levels:
- A - the minimum,
- AA - the basic you should be trying to achieve - it’s the reference for the majority of legal systems.,
- AAA - the most advanced, often not possible to achieve with certain web solutions.
If you haven't read or at least reviewed the full text of WCAG, I recommend starting with the WCAG overview on W3C Web Accessibility Initiative page.
The four principles of web accessibility
There are four main principles that we need to remember while working with accessibility.
Web content should be:
- Perceivable - users must be able to perceive both the information and the user interface (it cannot be invisible to all of their senses)
- Operable - users must be able to operate the interface
- Understandable - users must be able to understand the information as well as the operation of the user interface
- Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies (as technologies and user agents evolve, the content should remain accessible)
All potential customers, no matter in what situation, under what condition or using whichever assistive technologies (AT), should perceive, operate and understand your sale offer and whole shopping process.
Common accessibility issues in ecommerce
Checking ecommerce audits and analysis, we can mark common issues of online stores:
- navigation not operable for all assistive technologies
- forms not usable without a mouse
- popups not accessible
- missing alternative text for images and graphic materials
- buttons and links without text labels or with non incomprehensible labels
- missing HTML "lang" attribute
- missing Skip Links - visually hidden buttons (that appear on focus) and allow users to skip to different sections within the page
- incorrect use of ARIA - faulty usage of ARIA attributes, usually faulty "aria-labelledby" and "aria-describedby" that are being automatically populated by various form plugins.
- tabbing in hidden elements - ex.: hidden popups, aside, dropdowns, links
- weak / non-existent focus ring
- confusing layouts, hiding crucial information (shipping, payment)
- presenting crucial information in an image (also in emails and newsletters)
Are you familiar with those issues? Test if you can determine those on your website.
Accessibility testing
Accessibility testing consists of three main sections:
- Automatic tests - using automatic tools we can identify about 30-57% accessibility issues. There are many such tools available on the amrket, both free and paid. Below you can find my recommendations:
- Axe by Deque - browser extension or testing engine
- Wave Evaluation Tool by WebAim - browser extension
- Lighthouse Accessibility Audit
You can use browser extensions to investigate a single webpage, an axe-core and lighthouse checks, which you can integrate for free in your CI (Continuous Integration).
- Manual tests - keyboard tests, screen reader tests (VoiceOver for Mac, NVDA or JAWS for Windows), manual check of particular issues in accessibility tree.
- User tests - tests with users with disabilities. The best option is to test with multiple users with different disabilities (visual, motor) on different devices.
Getting to know how to use different screen readers and finding testers with disabilities is time-consuming but you can check some basic issues by yourself. For the beginning, I recommend starting with automatic and keyboard tests.
Automatic tests determine main errors, like missing alternative texts, input labels or button and links labels.
Keyboard tests show if a website is easy to navigate. Tabbing through a page, you should see visible focus state and interact with all components and navigation elements. Keyboard tests are important, because numerous assistive technologies use the same browser mechanism as a keyboard. By ensuring keyboard navigation, we can cover serious accessibility issues for different ATs.
Accessibility audit
Accessibility audit is a full website evaluation process, which determines all obstacles that may prevent users with disabilities from effectively using and understanding your website. The audit also shows to what extent your website conforms to WCAG technical standards.
The result of an accessibility audit is a report, which shows you the severity of accessibility issues and gives information on how you can comply with accessibility requirements. Based on the report, you can plan fixes, and accessibility feature implementation.
DIY - fix and improve
You can start improving accessibility by yourself. Some issues are easy to test and fix. Here is a list of elements that you should focus on:
- Color schema - ensure proper contrast ratio - for body text and UI elements it should be 4.5:1, for large text and UI elements - 3:1.
- Fonts size and styles - avoid too small and justified text.
- Sizes of interactive elements - should not be smaller than 44x44px, it is especially important for mobile devices, when our fingers need to tap a button or link.
- Use semantic HTML , change divs and spans to list, sections, articles, aside etc, check out WebAim semantic checklist.
- Ensure content hierarchy, use headers in proper order (from h1 to h6, without omitting any level)
- Assure your UI components are fully operable with keyboard, checkout especially:
- Navigation (menu, breadcrumbs)
- buttons and links (if there is a graphic content instead of text, use aria-label to ensure comprehensive label)
- Popups - move focus inside a popup when it appears, use focus trap to keep user inside, provide keyboard navigation
- Tabs - check keyboard navigation to ensure content in hidden tabs is also available.
- Forms are very important for communication and fulfilling the purchasing process. Provide sufficient keyboard support and all required labels. Here is a short tutorial on accessible forms.
- Do not use only colors to mark different messages, remember about colorblind users.
- Make notifications visible for all users, use aria-live.
- Avoid distracting animation or use `prefers-reduced-motion` CSS.
- Provide keyboard support.
Working on the accessibility of an existing website, in particular one containing legacy code can be challenging. But try to implement it in the development process, during redesigning, updating or refactoring. You do not need to fix all of the issues at one time. Focus on the most important part of your store - your conversion. Check user registration and login, the shopping process itself - adding product to cart, checkout and payment. Finally, focus on product information and selection - search, filters, product images and descriptions.
More valuable resources for frontend developers:
Content accessibility
Unfortunately, not only code and website technologies impact web accessibility. To meet all WCAG success criteria, your content has to be accessible as well. This is a topic for a separate article but remember about some principles:
- provide alternative text for images - do not use product image for all photos in product gallery, if you do not know what alt text you should use. This image tutorial can help.
- provide captions for all videos and transcription for all audio resources.
- use simple language, understandable for diverse users, provide explanation for acronyms.
Talk with content providers, ensure that they are aware of accessibility requirements.
Video is in Polish language, but subtitles are available
Accessibility statement
Accessibility statement is a document (separate CMS page in your website), which informs users of the accessibility level of your website.
It should include the following information:
- A commitment to accessibility for people with disabilities
- The state of accessibility of your website and any known limitations
- The accessibility standard applied, for example WCAG 2.1 AA
- Measures taken by your organization to ensure accessibility
- A roadmap informing when accessibility will be fully applied (if needed)
- Contact information in case users encounter problems
Why is an accessibility statement important? It shows users that you care about accessibility and about them. It also provides information about the accessibility of your content as well as contact information, in case they would like to give you feedback or report a problem.
For more information, here is a W3C Developing Accessibility statement tutoria
Summarizing accessibility improvement process
Here’s what we covered in this article::
- Refer to WCAG and its main principles - perceivable, operable, understandable and robust to comply with accessibility requirements
- Accessibility audit allows you to identify all limitations for different users and plan future work to improve usability.
- You can test accessibility by yourself using automatic tools and a keyboard.
- Improve accessibility of your website: check forms and interactive elements, add alternative text and keyboard support. Focus on the purchasing process and users registration.
- Make your content understandable
- Add an accessibility statement to inform how you support users with disabilities.
Congratulations! Now you know what you can do to get started on improving the accessibility of your ecommerce site.
