Learn how to use Commerce Cloud Digital content slots to launch and maintain rich marketing content.
“Disability need not be an obstacle to success. I have had motor neurone disease for practically all my adult life. Yet it has not prevented me from having a prominent career in astrophysics and a happy family life.”
— Professor Stephen W Hawking
I found this quote in the foreword for the World Report on Disability, and it made me realize how much better the private sector – and a certain company who wants to be a Force For Good – can do when it comes to making the online world more accessible for everyone.
According to the World Health Organization, there are an estimated 253 million people who live with a vision impairment. Over a billion people – 15% of the world’s population – have some form of disability. That’s a lot of people accessing the web differently. If we’re not building websites that make their lives easier, we’re alienating a giant potential customer base.
For the impaired or differently abled, being online can be a sort of haven when the outside world is harder to navigate, especially in the fashion category. Having the ability to order more sizes online and bypassing physical barriers – navigating small aisles, reaching high clothing racks, trying clothing on – helps to allow for easier access and participation in the fashion industry. We need to keep pushing to make physical spaces more friendly to anyone with impairments, because if we’re only focusing on making online accessible, we are forcing a community to the back where they’re further unseen.
But, because we’re an eComm digital agency, let’s talk about what accessibility can – and should – look like online.
The four categories of accessibility
The A11y Project is an open-source site where you can access clear and concise information about, well, accessibility. Despite it being an incredibly complex topic, I think they do a great job making the information easy to consume. They start by slotting accessibility into four different categories, where each category represents a completely different user experience.
Associated conditions: Myopia, color blindness, glaucoma, albinism
Visual impairments can include non-sighted users, users with low-vision, users with obstructed vision, or even simply the aging generation.
Associated conditions: Presbycusis, acoustic trauma, auditory processing disorder, otosclerosis
At first glance, hearing impairments may not seem to have an impact on how we design for the web’s visual medium, but captions and fallbacks for sound-necessary media need to be considered for these users.
Associated conditions: RSI, cerebral palsy, Parkinson’s, muscular dystrophy
Motor impairments change how people navigate their computers and the Internet. People with motor impairments typically use a wide range of assistive technology, from specialized keyboards, to eye trackers, to using single buttons to navigate their computer.
Associated conditions: Down’s syndrome, autism, global developmental delays, dyslexia
We all process information a little differently, but some more than most. Cognitive impairments relate to the ease of processing information.
Temporary disabilities also come into play and need to be considered. We can all fall in and out of this sneaky category at any time – think about driving and using your phone hands-free, or watching a NSFW video at work and needing to leave the audio off.
Designing for visual disabilities
Color blindness and low or total blindness can impact how someone receives your website. Understanding these impairments can give us more insight into how to design more inclusively.
Color blindness in particular affects the fashion industry, and online shopping in particular. Imagine wanting an orange couch, and being met with color swatches that weren’t labeled? You’d abandon your potential purchase in favor for a site that had taken the few minutes to label their colors!
There are three types of color blindness:
Deuteranopia / Dichromacy / Two-color vision
For people with dichromacy, what is intended to be a broad color palette might appear to be made up of different shades of the same hue. If your app uses colors to denote different labels or channels, the user won’t necessarily be able to benefit from that design feature.
Protanopia / Monochromacy / Total color blindness
While uncommon, people with this condition cannot see color at all. So, for example, bright or pastel interfaces with subtle gradients that rely on hues to differentiate features will be very difficult for the user to navigate. Action buttons might be hard to find.
Tritanopia / Anomalous trichromacy / Deficient color vision
With deficient color vision, one of the three cones in the eye malfunctions to varying degrees of severity. This ranges from near-normal color vision to two-color vision in severe cases. Users with anomalous trichromacy might find your logo or design to be less compelling if color is a major factor – especially problematic if the buttons and the text are rendered in indistinguishable colors.
This diagram shows the differences between some of the color blindnesses. Note that the circles and triangles show which colors are indistinguishable with Tritanopia color blindness.
Want to see how your page looks through the eyes of someone who is colorblind? You can check your page here!
Low Vision / Blindness
Navigating the web with little or no vision is surprisingly not that difficult when you have tools to help you. Still, we can work to make it so much easier with some simple changes. Low-vision or blind users typically rely on screen readers and refreshable Braille displays. For those with low but functionable vision, software that magnifies a page can help, too. Some people even use all these tools at the same time. Here’s how they work:
Screen readers are software tools that read aloud the text from a screen or braille display. The user can send commands by pressing keys (on the keyboard or braille display) to instruct the speech synthesizer to read or spell a word, read a line or full screen of text, find a string of text on the screen, announce the location of the computer’s cursor focused element, speak automatically when changes occur on the computer screen, and so on.
Refreshable Braille displays: These displays are pretty expensive, running anywhere from $3,500 to $15,000, but are incredibly useful to anyone who can read Braille. Pins electronically move to represent the copy on the screen. Some displays can connect wirelessly, others by USB. The biggest advantage of a display over a screen reader is that it provides direct access to information. Based on the model, Braille displays can show from 40-80 characters at a time.
One of the biggest obstacles when navigating the web with an auditory disabilities is when there aren’t transcripts for videos or audio. Another is autoplay. Picture opening a page that blasts jarring music or video when you open a page – but you can’t hear it, and to your embarrassment, end up disrupting your surroundings.
There are a ton of different tools for navigating online with a motor disability. Dragon, a voice-controlled software, reads pages similarly to a screen reader, making it essential to code with this in mind. Camera cursor control software like Cameramouse allows the user to control their cursor with just a webcam and the movement of their heads. Sip-and-Puff assistive technology offers control through the breath – the hardware can recognize sips and puffs and translate it into commands such as mouse clicks or keyboard characters. Eye tracking is also common, using a camera placed near the screen to track the movement of the eye to navigate the page.
Learning disabilities such as dyslexia, autism, and global developmental delays can make navigating online tricky, especially where certain design patterns are concerned. Dark patterns are tricky for anyone. With some small tweaks, you can gain some brand loyalty points from treating people right.
Eventually, we all will be disabled – whether through age, temporary illnesses, or injury. By increasing our comfort level with accessibility standards, we solidify that the websites we build will be usable longer, by more people. If you’re going to spend the time and money to update or redo your site, I believe it would be a mistake to not keep some of these little changes in mind that could otherwise cause you to alienate an audience of customers who are ready to buy.
Links to sources and further learning:
- Personal Stories of How People with Disabilities use the Web
- Easy Checks for Web Accessibility W3C
- The A11Y Project
- Dos and don’ts on designing for accessibility (they have cool posters!)
- Stop Designing For Only 85% Of Users: Nailing Accessibility In Design
- 7 Things Every Designer Needs to Know about Accessibility
- Top 10 Tips for Making Your Website Accessible
- How To Design Websites For Blind/Visually Impaired, Deaf, Disabled & Dyslexic Visitors
- Improving The Color Accessibility For Color-Blind Users
- tanaguru contrast finder