How to Make E-Commerce More Accessible | BoF Professional, News & Analysis
Right now brands and retailers are pouring money into their e-commerce businesses as they cater to the rising tide of shoppers who want to buy from them online. Yet many interested customers can still find it difficult — in some cases impossible — to shop these sites.
People with conditions such as blindness and low vision, limited use of their hands or certain cognitive issues can find themselves effectively barred from shopping across a substantial share of e-commerce. One study of the e-commerce channels of 33 well-known retailers found 31 had accessibility issues.
“Very few e-commerce sites are fully accessible,” said Rob Russell, a senior user-experience auditor and accessibility expert at the Baymard Institute, the research group that conducted the study. “The vast majority, 90 percent or more, have at least some inaccessible parts of their sites and just make it difficult for users to either navigate the site, find and evaluate information related to products or proceed through the checkout process.”
That’s because many companies fail to consider the user experience of shoppers with disabilities, who may use assistive technologies such as screen readers or rely on their keyboard instead of a mouse or trackpad to get around online.
Very few e-commerce sites are fully accessible.
It’s true that fixing these issues can be costly and time-consuming. But not addressing them can put companies at risk of being sued, and they may also miss out on sales to a large group of potential customers — some 36 million globally in the case of blindness alone, a number expected to rise as populations age. One estimate concluded UK retailers were losing billions in sales by not making their sites accessible.
“Why limit yourself to the audience and the customer base that has no disabilities?” said Lucy Grego, who is blind and serves as the web accessibility evangelist at the University of California, Berkeley.
Information Shouldn’t Only Be Visual
There are a number of issues companies need to keep in mind to make their sites accessible.
Retailers often lean on photos to convey much of the information about a product, which isn’t a problem in itself. It becomes an issue when those photos aren’t accompanied by thorough descriptions in their alternative, or alt text, which is the field accompanying a photo on the back end of a web platform that’s available for describing the content of the image. Screen readers can read this text, allowing users relying on means other than vision to know what’s depicted in an image, but it’s only useful if it’s descriptive.
“I probably spend more time than most people reading reviews and different things and doing research just because everybody else gets to see this image of the product,” said Chris Danielsen, director of public relations for National Federation of the Blind.
I probably spend more time than most people reading reviews and different things and doing research just because everybody else gets to see this image of the product.
Companies also need to add alt text for any other information embedded as an image. A retailer may add a size chart as an image but not add alt text containing the displayed information, or a banner promoting a sale that doesn’t have alt text with the dates and details.
Accurate labels for buttons and form fields where users enter information are crucial too. A screen reader has to be able to identify the labels, and the purpose of each element should be clear.
“When there are multiple colours of a certain item, 99 percent of the time I’d have to say that’s not labelled properly,” Greco said. “It will be showing you black, blue, green and orange, and all I get is ‘button, button, button, button.’”
Consider Different Ways of Navigating Your Site
Retailers should remember that not all shoppers interact with their sites using a mouse or trackpad. Many with conditions that affect their sight or motor skills use their keyboard.
“I was talking to a blind friend of mine a couple of weeks ago and she was almost in tears because she had identified the product she wanted, she had filled in all the information she was supposed to, but then when she went to hit submit, the button just didn’t work because she was using the ‘enter’ button on her keyboard and not the mouse,” Danielsen said.
A site doesn’t have to be completely non-functional on a keyboard to be a problem. Take the main navigation on a page, usually on the top or left-hand side, which is ostensibly there to make it easier for shoppers to get around a site. It can include a large number of links keyboard users have to toggle through to get to the main content on the page, and every time they go to a new page they have to repeat this process. Sites with this sort of navigation should add what’s called a skip link to let users go directly to a page’s main content area.
Tooltips, which are messages that may pop up when a user hovers over a graphical element with the cursor, are also supposed to be helpful. A user on a keyboard, however, will have to tab to that element. “In some cases, there’s not an alternative to that mouse hover state,” Russell said, and keyboard users “can’t access that information.”
Accessibility Is In the Details
Numerous other issues can crop up. The legalese used for terms and conditions can be difficult to understand for shoppers with cognitive conditions. Hyperlinked text is often highlighted, but that can reduce its contrast with the page behind it, making it unreadable for users with low vision. Retailers can address these issues by making sure language is clear and easy to understand, and that all text has sufficient contrast with its background.
Danielsen and Greco both noted that properly used HTML headers are important for making a site more generally easier to browse and that retailers need to consider their checkout process, which can have its own obstacles.
“This is another one we frequently see,” Russel said. “Someone might be going through a checkout flow and they enter the credit card number incorrectly. There’s inline validation that kicks in as soon as the user leaves that field that’ll inform the user there’s an error. But care has to be taken to ensure that information is displayed in a very obvious fashion, and then to ensure it’s also conveyed through a screen reader if somebody is using that.”
How To Take the First Step Toward Accessibility
These issues are not always simple to fix. Gina Bibby, a partner at law firm Withers Bergman and head of its fashion-technology practice, said she’s represented multiple clients who’ve faced lawsuits alleging their e-commerce sites or apps failed to comply with the Americans with Disabilities Act. Most companies in that position will hire an auditor to identify problems. The work is often ongoing since sites are constantly being refreshed with new products and content. Tommy Hilfiger, for example, says it has a third-party company do regular testing of its site.
“There’s a significant amount of work involved,” Bibby said of the process of remediating a site. “There’s a large commitment of money and a large commitment of IT resources.”
For small companies, it can present a challenge. Often brands and retailers haven’t considered the issue either until they’ve been threatened with a lawsuit. “I think it’s a lack of education,” Bibby said.
Greco gave her own recommendation for those looking to make their sites more accessible. “The easiest solution to making sure things actually work really well is hire a person with a disability,” she said. “Have a real user validate for you that it works.” It’s a point companies should remember when they run focus groups as well.
The easiest solution to making sure things actually work really well is hire a person with a disability.
Russell said more are adopting third-party plugins that use code such as JavaScript to automatically change the way a site displays, with the promise of making it instantly accessible. Both he and Danielsen cautioned against solely relying on them as a solution, while Greco argued it’s best to avoid them altogether. These overlays can actually conflict with the settings users of assistive technologies have enabled on their computers, making it harder for something like a screen reader to work with a page and drawing criticism from disability advocates.
One point many agree on is that making a site accessible is beneficial to all users. Good alt text on images makes for better search-engine optimisation since web crawlers use that metadata in their rankings, and a simple, uncluttered, logically structured site with good product descriptions is going to be easier to use for anyone browsing it.
Related Articles:
The Adaptive Fashion Opportunity
How Can Fashion Better Address the Needs of Disabled People?
