Did you know that worldwide, one billion people are vision impaired? Or that 5% of the world’s population has disabling hearing loss? Would it surprise you to learn that 1 in 8 men are color blind? Or that 14% of all public school students are receiving special education services?
Do some of the above statistics feel shocking to you? They definitely surprised a few of us. When you live in a society that treats impairments like they’re exceptions to a homogeneous rule, the sheer normalcy implied by a statistic like 1 in 8 can throw you off. That’s the trouble with norms, though: we all have a few variations of one type or another, and pretending there are people who meet all the criteria for a universal “average” doesn’t work. We’re just a large collection of people with very different needs.
That’s why it’s in your best interest, as a business owner or marketer, to accommodate as many differences as possible. Aside from just being the right thing to do, making your website accessible is a sound business decision given the number of customers who need some type of accommodation. Would you build a website that doesn’t appear on the Safari web browser, sending 15% of U.S. internet users to a competitor? Then you should care about color blindness — the population of color blind people in the U.S. exceeds the number of people who use Safari.
Of course, most people don’t intentionally design barriers into their website; they just don’t know what makes a website accessible. There’s a good reason for that, too. Unlike ADA compliance for buildings or sidewalks, there isn’t a legally-defined set of standards for ADA-compliant websites (W3C WAI has the most functional and trusted set of web standards available, but legislation hasn’t quite caught up to them yet).
That leaves ecommerce site managers feeling like they’re facing a daunting challenge: how can someone design for web accessibility when they’re limited not by their desire to be inclusive, but by a lack of technical know-how and/or clear guidelines?
Fortunately, the solutions are easier than you might think. This post will demystify web accessibility and teach you what to double-check for, so you can make sure your products and content are reaching as many prospective customers as possible.
Web Accessibility Tools and Resources
Before we begin, it’s worth mentioning that you don’t have to do everything by yourself. There are so many free, accessibility-related browser extensions on Google Chrome that Accessibility is a full category in their web store. A few we like in particular are:
- WAVE Evaluation Tool – No tool can exactly replicate the subjective experience of viewing a web page, but this tool does a pretty good job of scouting out and highlighting potential pain points so you can fix them.
- Accessibility Web Assistant – This extension is actually for people with disabilities; it adjusts variables like font size and color contrast on hard-to-read web pages and provides other features like text-to-speech. The tool is still useful for design purposes, however, because you can install it on your browser and view your own web page to see what sort of changes are being made and adjust your design accordingly.
- NoCoffee Vision Simulator – If you’re more of a hands-on (or eyes-on…sorry) learner, you can view your website through this simulator to get a feel for what vision-impaired people are actually seeing. You’ll then be able to make adjustments based on a more personal understanding of the experience.
For paid tools, Accessibe can’t be beat (our one and only complaint is that you’ll never remember how to spell it). This tool, which integrates with most ecommerce platforms, takes the guesswork out of accessibility by adding a button to your web page that lets people tailor the browsing experience to their own personal needs.
We use Accessibe, which is why you’ll see a circular blue accessibility icon in the lower right-hand corner of each page of our website. Go click on that button and play with some of the toggles to watch how the site adjusts for each need. A tool like this is the creme de la creme of accessible design, because it allows each person to meet their personal needs without forcing you to make potentially conflicting design decisions.
How to Make Your Website More Accessible
Whether or not you decide to let tools take some of the guesswork out of the process, it’s a good idea to ground yourself in the principles below anyway so you’ll develop an intuitive feel for designing with the end user in mind (oh, and that’s another cool part of accessibility — it leads to better a better user experience for everyone, not just for disabled folks).
Here’s what to pay attention to in order to design a more accessible, user-friendly web experience for your customers:
Fonts, Colors & Contrast
Font size and color are two of the most obvious places to start when it comes to accessibility, because these choices impact visibility and readability site-wide. As you select your fonts and primary/secondary colors, keep the following tips in mind:
- Use large enough text to meet a variety of reading needs — It’s easy to forget that while 10-point font may be perfectly readable to you, it can be a nightmare for far-sighted people. When it’s time to set your CSS parameters for your various text types (H1s, H2s, body copy, etc), make sure your smallest text is a decent size. It’s okay if the text feels a little larger than you think it should be; it won’t look that way.
- Choose font colors that contrast with the background — No, that doesn’t mean using blue on orange or some other eyesore of a color combination. There’s a reason why colorful backgrounds died with Geocities websites: they’re difficult to read for vision-impaired and non vision-impaired audiences alike. Top-of-their game designers can get away with exceptions to the rule, but the rest of us are safest sticking with a white (or very light) background and black (or very dark) text. Conversely, very dark backgrounds with white text are also doable.
Be careful with gray text on a white background and other choices that come baked into the template you’re using; theme designers can sometimes opt for what looks pretty over what’s most usable.
- Don’t rely on color alone to convey information — If you’re using color alone to highlight text, direct people to a certain place on the page, indicate where links are, or as a label, remember that color blind people will miss those cues and may find their experience very confusing. There’s nothing wrong with using color as an indicator; just pair it with another indicator like a shape, pattern, or text.
For example, here’s how the project management pros at Trello let color blind people use labels:
- Choose eye-friendly fonts — If you’ve ever noticed that font family recommendations tend to pair fancy header fonts with very simple, sans-serif body fonts, it’s because sans-serif fonts are far easier on the eyes. Large chunks of serif font are fatiguing for the reader.
If you don’t believe us, just experiment with the “Do as we say, not as we do” example that is the Grow With Studio blog (updating this is on the to-do list, we swear). While the serif typeface we’re currently using for our body copy isn’t bad, if you click on the Accessibe icon and toggle to “Readable Font” under “Content Adjustments,” you might notice there’s a difference.
Content Formatting and Readability
- White space is your friend — Web content writers are the bane of the English teacher’s existence, and I say that as both a web content writer and a college writing professor. If you’re writing a book or academic paper, meaty and well-formed paragraphs are highly encouraged — it’s not uncommon for thesis paragraphs to become bloated 400-word monstrosities. Those monstrosities are considered proper and correct by academic standards, because they contain all the content necessary to make a point, support it, and conclude the idea.
Over here in the wild west of web content, massive paragraphs are a great way to make your reader bounce. Not only do large blocks of text look awful, but they can also be overwhelming for people with cognitive disabilities, ADHD, or anyone who has two thumbs and happens to be writing this post.
Give your content room to breath. White space is integral to good design in general, but it’s especially essential when you’re formatting your content. Any time you find yourself looking at a large paragraph, break it into two.
There is such a thing as taking this practice too far — there’s a popular SEO writer whose posts and emails are a series of one-sentence paragraphs, which is just as grating as a massive post-length paragraph — but in general, readers crave frequent paragraph breaks and skimmable content.
- Make use of headers, lists, bullets, and other formatting options — Another great way to make content skimmable is to make use of the design elements that break up your copy and delineate hierarchy. Any time you have a lot of paragraphs in a row, see if you can add a header (H2, H3, H4, etc) and turn part of the content into a new section. Bullet points, numbers, and bold font serve a similar purpose and are excellent for skimmability.
- Break your text up — Ultimately, you’re looking for ways to break your text up, highlight your main points, and add variety so the reader’s attention stays hooked. And your text styling isn’t the only way you can accomplish this! You can also break up your text with pictures, video embeds, icons, charts, illustrations, screenshots, and more.
- Feature a variety of content formats for your audience — A key point about accessibility that we’ll keep returning to is that the goal isn’t to bend to someone else’s needs or make one type of user your only priority; it’s simply to provide options. The more options you can provide and the more needs you can meet, the better.
On that note, remember that we all have different learning styles and preferences, disabled or not. Some of us are visual learners; others are verbal. Some people would rather read a news article than watch a video, and others are the opposite. Some people love listening to podcasts and audiobooks, while others don’t get the appeal. The more formats and options you provide, the more likely you are to produce content that really resonates for someone.
Just a few of your options include:
- Blog posts
- White papers
- Product demos
- Comparison graphics
- Interactive content (quizzes, tools, calculators)
- Q & As
- The list goes on
The same rule applies for customer support. It’s ideal to offer a mix of ways to contact you so people can call, text, email, or live chat you depending on their needs and preferences.
Don’t put in hard work creating readable, user-friendly text without checking to make sure it looks just as great on your phone! If your website uses a legacy theme or template that isn’t responsive or mobile-optimized, upgrade to a responsive design…yesterday. If you’ve created your website in the past five years, there’s a good chance that you’re already responsive.
Having a responsive design doesn’t guarantee that the transition between desktop and mobile goes seamlessly, though. Hard/custom-coded elements, images with text on them, and images in general will all need a manual check to make sure they’re easily viewed on a mobile device. The good news is, HTML text tends to become more readable on mobile, becoming the sole focus of the screen as other design elements are pared away.
Transcriptions and Alt Text
- Transcribe videos and audio for hearing-impaired users — If you do have videos or other types of audio, add transcriptions for your hearing-impaired users. You can get some decent transcription software for a relatively cheap price, but you’ll probably want to put human eyes on it afterwards to correct any errors.
- Add descriptive alt text to your images — Adding alt text that describes each image might get some buzz for its SEO potential, but its actual purpose is much more important. Blind people who are using screen readers to understand the page aren’t going to see any of your images — you have to provide the context they need by describing the image for them. Incidentally, this is also why adding image alt text can sometimes have a small SEO benefit: search engines can’t see your images, either.
- Be careful with pdfs, infographics, and image-based text — On that note, it’s all too easy to forget that any text you include in the image itself (as opposed to HTML text you add as an overlay) can’t be read by search engines or screen readers. If you’ve designed a beautiful infographic full of great information, it’s not going to be useful for blind people until you reiterate the content in the body copy of the same page. Search engines and screen readers are getting more advanced when it comes to image recognition, but HTML copy is still your safest bet.
All of our usability recommendations also align with the usability needs of the average user. For people with cognitive disabilities, ADHD, or autism, these factors are even more important because of the specific processing styles at play.
- Once you’ve established an information hierarchy, keep it consistent — Users are good at rapidly picking up on patterns in your design and anticipating what’s next. The browsing experience can get confusing very quickly if you’re using five different layouts for a particular type of page (category pages, for example); multiple colors and shapes for your CTA buttons; or otherwise breaking the consistency of a pattern you’ve already set up.
This also extends to cues and indicators that have already been established by the industry at large. For example, users associate underlined words with hyperlinks, so underlined text that isn’t clickable can cause confusion.
- Make sure each page has a clear focus — What is the purpose of the page? How are you going to create a logical flow and pull the eye’s attention to the correct places? Try not to bombard the user with pop-ups, ads, competing offers, or anything else that distracts them from reading the page and taking action. That doesn’t mean you can never include a pop-up — everything in moderation, of course! When you do include them, make sure the user has a clear way to close out and return to they were doing before.
- Make sure navigation is clean and easy — Is your site organized into logical categories? Does the navigation make it easy to find specific internal pages? On long pages of content, do you include a table of contents or jump links to make it easy to move around? These are all great ways to help users find the information they need.
- Add labels or instructions to form fields — The next time you use a form on a website or arrive at an ecommerce store’s checkout, pay attention to how the form looks and behaves. This is one area where deviating from the expected norm can create tons of confusion, including an inability to recognize that you’re offering a form at all. Make every box clear and well-outlined, and label each field with the information you want the user to enter.
- Just say no to autoplay — If you’ve ever clicked on an article at work hoping to take a quick reading break between other tasks, only to have an auto-playing video start blaring out of your speakers for the whole office to hear, then you already understand why autoplaying videos are the bane of the browsing experience. For people with autism or sensory processing disorders, startling sounds and distracting movements are even worse.
To make sure your website accommodates people with ASD, give your users the ability to control their browsing experience as much as possible. Don’t startle people with videos that play automatically, overwhelm them with pop-ups, force your text to autoscroll, or otherwise remove the feeling of control and ease from the experience.
- Provide options and listen to your customers!
Designing with an eye for accessibility can feel daunting, but it doesn’t have to be. In most instances, designing the experience you would want to have will also line up with the experience people with different needs want to have. In the cases where that’s not true and an item like using alt text, for example, isn’t top-of-mind, you can keep a list of best practices and check your work against it. Remember, the goal isn’t to bend to the needs of one particular group of people; it’s to provide the options and flexibility that accommodate as many different types of people as possible.
And if you overlook something important or don’t get it quite right, trust your customers to tell you what they need. Very few people can launch a perfect website right out of the gate! Stay open to customer feedback so you can make adjustments on an ongoing basis. Before long, you’ll be the ecommerce store of choice for a full range of customers.