For an e-commerce or business website to be deemed accessible, it should cater to the needs of all users, not just those with full sight, hearing, mobility, and cognitive abilities. In other words, a person with a disability should be able to perceive, understand, navigate, and interact with your website just as easily as someone without a disability.
In practical terms, the website should be fully compatible with assistive technologies like screen readers, which read out loud the information displayed on the screen for visually impaired users. It should also be navigable using only a keyboard for those who cannot operate a mouse due to physical disabilities. Clear, well-structured content that is easy to comprehend can assist users with cognitive impairments.
Ultimately, accessibility to an online shopping website means removing any barriers that prevent interaction with, or access to, that site by people with unique abilities.
Eight tips for creating an accessible e-commerce website
Clear and legible text
Regardless of what kind of website you have, it should feature text that is easy to read and resize without disrupting the site's layout. Users with difficulty seeing may need to increase the text size for readability. Simple fonts are preferable over decorative ones for legibility, and ample contrast between the text and background is crucial.
The contrast between black text and white background makes reading easy for most people. Make certain hyperlinks are discernible from the rest of the text, perhaps through a different color or underlining. Specific adjustments like these significantly improve users' experience with low vision or color blindness.
Screen reader compatibility
Screen readers, which convert on-screen content into speech or Braille, are indispensable tools for visually impaired users. Use meaningful alternative (alt) text for images, label links appropriately, and structure your website content to ensure these tools can navigate your website. "click here," describe the link destination like "our return policy." A screen reader can then inform the user about where the link leads.
Keyboard accessibility
People with motor impairments may find it challenging to use a mouse. They often rely on a keyboard to browse websites. Accessing various pages and completing a purchase can all be handled via keyboard inputs, from accessing various pages to completing a purchase. For instance, a user should be able to press the 'Tab' key to move from one interactive element to another, such as from a menu item to a product link or from a product to the 'add to cart' button, and so forth. They should also be able to activate the selected element (similar to opening a page or adding a product to the cart) using a key, typically the 'Enter' key.
Use visual indicators to show which element, such as a link, button, or form field, currently has the keyboard focus and is ready to be activated. For instance, when a link is selected, it could change color or be underlined.
And when the user presses the 'Tab' key to move from one element to another, the movement should follow a logical and predictable sequence, typically from left to right and top to bottom, and from general to specific. For example, if you have a page with a menu bar at the top, a product list in the middle, and some links at the bottom, the user should be able to tab through the menu items first, then through the products, and finally through the links.
Captioning and transcripts
If your website uses videos for product demonstrations or audio clips for instructions, these should include captions or transcripts. Provide text alternatives so users who have hearing impairments can understand the content.
While automatic transcription services can generate captions or transcripts using speech-to-text technology, they may only sometimes be accurate, especially with complex or technical vocabulary, proper nouns, or unclear audio. So manual checking and editing are reliable practices to help ensure the text accurately represents the audio.
Consistent navigation
A simple, predictable layout on your website benefits all users, particularly those with cognitive impairments like attention deficit hyperactivity disorder (ADHD), autism, dyslexia, and other conditions that can affect how a person thinks, learns, remembers, and interacts.
This means keeping key elements of your web pages in the exact location and retaining the same appearance throughout the site. On all other site pages, your website's main navigation menu should remain at the top. This uniformity allows users to develop familiarity with the site's structure, reducing the cognitive load required to browse the website.
Similarly, buttons and links should maintain the same design throughout the site. If all clickable buttons on the homepage are rectangular and colored blue, it could confuse users if buttons on another page are circular and red. If hyperlinks are underlined and are in a different color than the regular text on one page, they should follow the same style on all other pages.
Processes like checkout or registration should follow a logical – and, again, predictable – sequence. This can be as simple as always having the shopping cart icon in the top right corner and ensuring that clicking it always takes the user to the same place.
Avoiding time constraints
Timed elements on a website may range from automatic session timeouts to timed quizzes or games. A common example in e-commerce is a shopping cart that clears after a specific period of inactivity. This feature can pose challenges for users who need more time to decide, fill out forms, or complete their purchase due to various impairments.
Someone with a cognitive impairment like dyslexia may need extra time to read product descriptions or understand checkout procedures; a person with a motor impairment might require more time to complete actions. Automatically logging out users or clearing their shopping carts before they finish their tasks can cause frustration and lead to lost business.
So, consider offering an option to extend session time or remove automatic timeouts altogether. If a timed element is necessary for a specific reason (like maintaining server performance or security), a warning message before the time runs out, coupled with an easy-to-use method to extend the time, can significantly enhance the user experience.
This goes for CAPTCHAs, too – If CAPTCHAs are necessary on your website, consider alternative verification methods that do not rely on timing. A simple question that a human can easily answer, but a bot cannot serve the same purpose.
Forms and inputs
Forms are a vital part of the user's journey on an e-commerce website, used for tasks like registering an account, adding shipping information, or leaving feedback. Each field should have clear labels, and any error messages should offer guidance on correcting the issue. If your forms currently use CAPTCHA tests to prevent spam, consider alternatives like two-factor authentication, which can be more accessible for people with specific disabilities to complete.
Mobile Accessibility
Many users shop on their smartphones or tablets, and your e-commerce site needs to be as accessible on these devices as on a desktop. This means ensuring text is legible, clickable elements are adequately sized and spaced, and the site's layout adjusts to different screen sizes. All the accessibility features of your desktop site, such as alt text for images and transcripts for media, should also be implemented on the mobile version of your website.
Accessibility in e-commerce is good business
There is a strong business case for making your e-commerce website accessible. The Centers for Disease Control and Prevention (CDC) estimate that 1 in 4 adults in the US lives with a type of disability. That's a substantial market segment you could miss if your website is not accessible. Implementing the tips in this post effectively widens your potential customer base. It can also increase customer loyalty and the likelihood of return visits, as customers appreciate businesses that consider and cater to their needs.
Comments