In this blog, I discuss one of my favorite retail sites that I find very accessible. I cover six critical features of the site that are important for overall accessibility and usability. I've decided not to mention the company by name because I think that most companies should be able to take these six practical steps toward accessibility.
Keep reading for helpful guidance for accessibility improvements. Like always, I will exclusively cover screen reader accessibility because I am a blind technology user.
Six ways one retailer creates an accessible experience
1) Alternative Text Image Descriptions
I have extensively discussed the importance of image descriptions in many of my earlier posts. The image descriptions on the website that will serve as the focus for this piece are both plentiful and detailed. It is one of the only major retail sites with consistent and proper alternative photo text captions. For example, a protective iPad case listing has the following text caption when navigating to the product image with a screen reader. "An iPad in a black rubber case sits on a wooden surface. The iPad screen shows the standard home page icon set."
As far as alternative text captions go, this one is comprehensive in that it summarizes all of the visual data in the photo in a concise manner. On certain product listings on the site, the text captions provide information missing from the item details and are only available in the pictures. On other sites that don't use alternative text captions, these details are impossible for screen reader dependents to know. The text captions on this particular site make the shopping experience seamless and complete.
2) Large Touch Targets on Mobile Applications
This one applies exclusively to the mobile application. Like many others, I do most of my online shopping through smartphone and tablet apps. One of the most frustrating things about the screen reader experience on touchscreen devices is that many apps have tiny touch targets for the on-screen buttons, links, and selectable page elements. So, I am locating the desired button by touch results in frequent false presses and accidental activations of the wrong button or link. The touch targets for the navigation buttons on the retail app are substantial, which is good. So I selected the correct button on the first attempt almost every time. This refreshing experience allows me to navigate the app incredibly quickly and efficiently.
3) Properly Labeled Buttons
One of the most frustrating accessibility problems that I encounter on many retail sites is related to buttons. For buttons such as cart and menu to be screen reader accessible, the site must include a text label in the code that gives the button a name that will be read aloud by the screen reader. If this code element is absent, a screen reader will announce meaningless terms such as "button" or "click." This website labels all buttons clearly and concisely. The label formatting is the unique part of it all, though. First, the screen reader will announce the name of the button. Next will follow a momentary pause in speech. Then, the screen reader will speak a more detailed description of what the button does.
For example, I navigate to the menu button. In that case, my screen reader will say "Menu," followed by a short pause and the phrase "Navigates to Account Management, Order Management, and Website Settings." I don't know how the code achieves the break. Either it uses punctuation, or the second part of the label is entered as a hint, which tells the screen reader software to speak it after the primary text. In any event, this unique button label system makes the experience of navigating the site far more intuitive and efficient than other sites. If I want to enter the menu, I find the button and activate it.
Suppose I am a new user and require some clarification. In that case, I can pause and listen to the additional information. This button label implementation also eliminates the problem of lengthy multi-word labels that complicate navigation and lead to clunky screen reader announcements.
5) Skip Navigation Links
One of the most appreciated features of a website for screen reader users is including a skip navigation link on all site pages. Once activated, the link will move the user past the top headings and navigation elements and directly to the page's main content. These links save so much time when navigating the site. In the accessibility settings of the website in question, there is even an option for automatic skip navigation, one of the most valuable features I have discovered in digital accessibility.
6) Text-based Scheduling for Order Delivery
I often experience accessibility shortcomings when trying to schedule a delivery day and time for an online order. This site's date and time selection calendar are formatted using a text-based scrolling list. Furthermore, the days and times that are grayed out and unavailable precede the "Dimmed" announcement, which conveys to screen reader users that activating that day or time will do nothing. This delivery scheduling method is fresh air compared to most sites' clunky grid-like calendars and inaccessible tables. It is one of the only online shopping platforms that allow me to take advantage of features such as same-day delivery from the store.
Accessibility helps you stand out from your competitors
(for all the right reasons)
This blog has been very different from my usual style. Still, I wanted to take the time to acknowledge a website that takes accessible design to the next level. Features such as the ones described above make this site stand out from the rest, which is very important in a world where online shopping is becoming a highly competitive industry. Furthermore, I hope my discussion of some things that assistive technology users value in a digital experience can provide focus areas for future accessibility initiatives.
Want to learn more about how to make sure your digital content is accessible to all of your customers? Check out The Marketer's Guide to Accessibility.
