More and more the activities of daily living occur online. We shop, bank, request a ride, check in with friends and schedule appointments via the web. The convenience of the digital ecosystem is compelling, especially at times when we feel harried, or inclement weather makes us want to stay inside. More than that, web-enablement is so wide spread that for many brands, it’s the only way to interact with them.
But what happens if your eyesight is poor, or your muscles lack the dexterity needed to operate a mouse? Such conditions can bar you from engaging in the activities of daily living the majority of us take for granted.
Recognizing the role of the web in today’s society, unfettered access to web-based services is now the law of the land. Specifically, Title III of the Americans with Disabilities Act (ADA) requires that businesses help disabled people access the same services as able-bodied people, including those services offered via a website. And with 51.2 million Americans with disabilities, allowing all people to buy from your website makes good economic sense.
No doubt, designing an ecommerce site so that it is accessible to the widest possible audience can be complex. To eliminate that complexity, Something Digital created an SDK accelerator that offers five functionalities — all absent in baseline Magento — that make ecommerce sites accessible to consumers with disabilities.
These functionalities include:
For a variety of reasons, many people find it difficult or impossible to navigate a website using a mouse, and must rely on their keyboards to accomplish all website functions, including selecting menu options, accessing desired content, and moving between elements on a page. For this reason, SD’s Accelerator provides functionality that allows users to navigate your website via their keyboards.
Convenience & Assistive Cues
Most people don’t need instructions on how to navigate a website or access the content we want. Decades of going online have taught us a common vocabulary. We instinctively know how to accomplish the tasks we want to accomplish, even if we are first time visitors to a site.
For instance, most website content is placed approximately in the middle of the browser to provide space for site navigation, logos, assistive links, advertising, and so on. People with good eyesight, by habit, skip over these elements and go straight to the good stuff. But if your eyesight isn’t strong, or you rely on a keyboard, you need a way to go straight-to-content or back to the top of the page.
Our Accelerator includes assistive cues that allow people with disabilities to take advantage of these conveniences.
Voice Over Support
People with disabilities often rely on assistive technology when going online to shop or access other services. These devices may be screen readers (i.e. programs that read text aloud for the user), text enlargement software, or software that allows users to control their computers via voice commands.
Screen readers literally read the contents of the screen to the user, which offers obvious benefits, as well as some surprising challenges. For instance, a screen reader must read the menu options and navigation options for the user, which means it will read all of the text contained ARIA-rolls, alt-tag, title tags and so on. As a result, the same text can be repeated over and over, causing confusion and creating a poor brand experience for the visitor.
SD’s Accelerator identifies when text is redundant, and instructs the screen reader to skip it.
Focus management is a big deal in creating accessible websites, and it took up the bulk of our efforts when developing SD’s SDK Accelerator. Focus, as it applies to web page accessibility, is the outline that highlights an item or element that is selected by a person who doesn’t use a mouse.
Focus management addresses challenges people with disabilities encounter as they navigate sequentially through content. Here’s a prime example: Let’s say you’re on an ecommerce site and you place an item in a shopping cart. Many sites will have an overlay or pop-up image of the mini-cart, which now becomes the center of focus. You can either interact with that mini-cart, or you can go back to page content by simply clicking outside of that mini-cart, which automatically dismisses it. Or let’s say you continue to browse products after you’ve placed an item in your cart. At any point, you can access the mini-cart pop-up by clicking on the shopping cart icon, typically located in the top navigation bar. Once clicked, the mini-cart becomes the focus of your screen, but you can easily dismiss it by clicking on the surrounding page.
Such conveniences are difficult and confusing to people who use a keyboard or screen reader. If using a keyboard, there’s no way to click on the surrounding content to close the overlay. If using a screen reader, the content is out of the expected sequence, andthere is no way to click on the original content.
The challenge, therefore, is to allow disabled people to close the overlay easily. To accomplish this, our Accelerator inserts an X for closing the overlay, and it puts the focus (i.e. outlines) on that X. (The X is a universal cue for closing a page or document.)
We also capture the focus so that the overlay is truly captive, meaning that users are prevented from accidently tabbing through the navigation, which can result in them closing the overlay without realizing it, and getting lost in the page.
Images Embedded in Text
Magento 2 has a new default theme named “Luma,” which is a clean and elegant theme that that features better usability practices than its predecessor, the “Madison Island” theme.
The Luma theme encourages website designers to embed text within hero, masthead and other images. Such text often conveys important information to visitors, but because it is part of an image, it can’t be selected. Assistive devices, such as braille displays and screen readers can only read text that’s selectable. Therefore, a person relying on an assistive device is unable to access any text that’s embedded in an image.
To overcome this challenge, the Accelerator includes numerous CMS content widgets for the drag-and-drop editor in Magento’s visual page builder tool. Essentially, the approach is to allow website designers to create images with text that is overlaid onto the image, not embedded into it. The text can match your brand typography so that the overall impact of the text and image is equally beautiful as if it had been created it in the Luma theme.
And there are additional benefits to this approach. Because the text is actionable, search engines can read it as easily as assistive devices, which means it has SEO value. It also means that the text will load on the page faster than the entire image, which means allvisitors will be able to see the message sooner.
All of the functionality described here are seamless to your website visitors. If they don’t rely on a keyboard or assistive device to navigate websites, they’ll never know you’ve built accessibility into your ecommerce store. Creating a website that allows more people to use it doesn’t require you to make design sacrifices at all.
Written by: Phillip Jackson, Ecommerce Evangelist