A Primer to Web Accessibility for Shopify Store Owners
Everyone has a different way of experiencing the world. Sights, sounds, and tactile experiences can be perceived differently by different people, particularly those with disabilities. As a result, the World Wide Web Consortium, an international body devoted to developing common and open standards for the web, has created the Web Content Accessibility Guidelines. Currently on version 2.1, the Guidelines set out web design principles that allow for wider accessibility of websites everywhere.
But how can you go about making your website better and more accessible? What specific changes can you make that allow more people to more easily use your website? Read on below for just a few ideas to improve your users’ experiences.
Color
Color blindness, a common and mostly invisible disability, affects about 8% of men and 0.5% of women globally. The group of disorders that make up color blindness generally don’t render a person completely unable to see any colors. Instead, their ability to pick out and distinguish between certain colors (red and green, for example) is impaired.
From a web design perspective, you’ll want to ensure that correctly perceiving your website is not solely dependent on distinguishing between different colors. For example, don’t set a toggle to merely change between red and green depending on whether its off or on. The switch should change position, as well as color, when it is toggled. (WCAG, 1.4.1)
So, for example, a shopping cart logo shouldn’t merely change from grey to green when there is an item inside. It should also show the number of items contained within (with digits). The icon might also change from an empty shopping cart to a full one.
You’ll also need to ensure that colors have an appropriate amount of contrast, since some forms of color blindness, as well as other visual impairments, can interfere with a person’s ability to perceive low-contrast imagery. (WCAG, 1.4.3)
Adaptable Presentation
Programmatic determination refers to information that allows for software to determine how it is presented (in what sequence, orientation, modality, etc.) based on information supplied by the user. So, for example, text might alternatively be displayed or read out by text-to-speech software depending on the user’s requirements.
As much of your website as possible should be capable of being presented in different ways. (WCAG, 1.3) By allowing the user to determine how your website’s information is presented to him or her, you open up your website to many new people who may not have been able to see text or hear audio, for example.
When designing your store you might, for example, ensure that you include prominent and explanatory images along with text so people with dyslexia can see what the products are. You might also ensure that all of your images have appropriate alt text so screen readers can properly read out descriptions of the images.
Appropriate Text
Something as simple as text spacing can have a tremendous impact on some users with visual impairments. WCAG 1.4.12 requires certain minimum spaces between words, paragraphs, and lines in order to ensure that everyone can easily pick out different words and paragraphs.
Using our app, you can simply and easily increase or decrease these spaces with the push of a button. Additionally, to accommodate someone with dyslexia, you could also increase the font size, use a sans serif font, and add a colored background!
Wrapping Up
All the foregoing barely scratches the surface of the modifications that can be made to a website in order to make it more accessible to the masses. In fact, all three tips are concerned with only one of four different categories of changes in the WCAG: perception. The other three categories, operability, understandability, and robustness, deal with other areas of web design that can have just as large an impact on your users as perception.
We encourage you to take a close look at the WCAG and, insofar as possible, make use of its recommendations, guidelines, and requirements. Your users will thank you.
If you’d like some help making your Shopify store even more accessible, give us a shout at Hopatoo at hello@hopatoo.com. We’re experts in accessibility and passionate about helping others extend the reach of their websites.
Sources:
http://www.colourblindawareness.org/colour-blindness/
https://www.w3.org/TR/WCAG21/#use-of-color
https://www.w3.org/TR/WCAG21/#contrast-minimum
https://www.w3.org/TR/WCAG21/#adaptable
https://www.w3.org/TR/WCAG21/#text-spacing
https://www.w3.org/TR/WCAG21/#operable
