Every November, we celebrate World Usability Day, a time to reflect on how you can create digital experiences that are accessible and easy to use for as many people as possible, regardless of ability level.
As a blind internet user, I frequently interact with digital products of all kinds, and far too many fall short in usability. However, since World Usability Day is about progress, innovation, and improvement, I want to focus on a positive example. This blog highlights an accessible e-commerce website that combines WCAG-compliant accessibility features with thoughtful, inclusive design, offering a fluid, efficient, and frustration-free experience.
For context, this example comes from an online shopping destination I use often. Below, I'll showcase three design characteristics that significantly contribute to its usability, focusing on the experience for screen reader users.
Skip Navigation Links
When a screen reader user launches a website, the focus cursor typically defaults to the top of the page. The same applies when navigating internal sub-pages.
Modern websites often feature persistent headers with elements like company logos, shopping cart icons, account menus, and search fields. While these are useful, navigating them repeatedly to access the main content is time-consuming and tedious.
This website solves the issue with a skip navigation link at the top of every page. Activating this link lets me bypass the persistent header and jump directly to the main content. The screen reader focus automatically lands on this link when the page loads. I can press Enter immediately and start exploring the page within seconds.
This seemingly simple feature greatly enhances navigation speed and efficiency. While skip navigation links are becoming more common, they should be a standard feature on all websites to improve usability for everyone, particularly screen reader users.
Quick Links on Product Details Pages
As this is an online shopping site, I often spend time on product details pages. These pages can be complex and display various information, such as product descriptions, specifications, customer reviews, and promotional content.
Navigating such content can become slow and clunky, especially for screen reader users. Thankfully, this site includes quick links at the top of each product page. These links allow me to jump directly to specific sections like "Product Details," "Highlights and Specifications," "Customer Reviews," or "Related Products."
This feature eliminates the need for manual navigation. It helps me find the information I'm seeking much faster, making the product search process more efficient and enjoyable.
Repeated Call-to-Actions
This design choice is simple yet highly effective. On product details pages, the primary call-to-action buttons—"Add to Cart," "Buy It Now," and "Add to Default Shopping List"—are duplicated at the bottom of the page.
This redundancy is beneficial when I'm further down the page. Rather than navigating back to the top to take action, I can locate the buttons at the bottom or use a screen reader command to jump to the footer. Without this redundancy, I'd have to go through a more cumbersome process to interact with these buttons.
Having the action buttons duplicated at the bottom makes navigation smoother and adds to the website's overall usability.
Takeaways: Small Design Choices and big Accessibility Wins
1. Skip Navigation Links Save Time
These links allow users to bypass repetitive header content and jump straight to the main page material.
2. Quick Links Improve Efficiency
Embedding quick links at the top of complex pages helps users jump directly to the sections they need, making navigation faster and more intuitive.
3. Repeated Buttons Enhance Usability
Call-to-action buttons at the top and bottom of a page ensure users can act quickly without excessive scrolling.
4. Accessible Design Benefits Everyone
Features like these demonstrate how usability enhancements designed for accessibility often improve the experience for all users.
Learn How to Combine Usability and Accessibility
World Usability Day reminds us of the importance of creating inclusive digital experiences. The accessibility features highlighted here are straightforward yet powerful examples of how thoughtful design can make websites more usable, efficient, and satisfying.
Curious how you can make your e-commerce site more accessible?
👉 Watch the On-Demand Webinar, 'Accessible Design for E-Commerce.'
Discover actionable tips to create inclusive online shopping experiences that work for everyone!
Editor's Note: Our frequent contributor, Michael Taylor, wrote this post. This post reflects his opinions and experiences. Read more about Michael and some other posts on his experience online here.
