Millions of People Can’t Use Your Website (Why Accessibility Matters)

According to the World Health Organization, 1 in 7 people have some form of disability. That’s over 1 billion people. These disabilities range relatively minor vision impairments like color blindness and dyslexia to partial paralysis and cognitive impairments. For many of these individuals, navigating the internet is an essential part of their daily life, and yet, their condition makes many sites completely unusable. Don’t let yours be one of them.

Accessibility is Essential

Accessibility isn’t just a nice thing to have, it is a foundational part of any website. The American court system agrees, as there were 2258 accessibility lawsuits in 2018, almost triple the amount of the previous year. Your website is being held to the same legal standard as your building: it has to be accessible to everyone.

Beyond the legal ramifications, making your website universally accessible makes business sense too. The W3C points out that in the US, the annual discretionary spending of people with disabilities is over $200 billion. That’s a lot of potential customers to be missing out on.

It should go without saying, but we also want to point out that building accessibility into your website is also simply the right thing to do. People shouldn’t feel like they are excluded from something just because of a condition they have. It’s a tough world out there, let’s make it a little easier on each other.

How Do I Make My Website More Accessible?

There are dozens of great resources on the internet that will give you a deep dive into how to build and design a fully-accessible website. Here, however, we are going to hit some basics and things you should be thinking about as you either build or review your site.

Color

Did you know that roughly 300 million people in the world suffer from color blindness? For context, the current U.S. population is 327 million. There are many different types of color blindness with different levels of severity, but designing for all of them is actually relatively simple.

First and foremost, be aware of color contrast. Colors that are too close together are going to bleed into one another for those that have difficulty distinguishing between them, which isn’t ideal from a form or function standpoint. This goes for backgrounds, buttons, text, pictures – pretty much everything. There are lots of great tools out there to help you double-check contrast such as ContrastChecker.com and WebAIM’s Contrast Checker.  Alternatively, you can download a plugin like Color Oracle, which will apply a full-screen filter so you can see first-hand how your site will look to people with various kinds of color blindness.

Never convey information through color alone. Everyone loves a pretty infographic, but it doesn’t do your reader much good if they can’t distinguish what each part of your pie chart represents. Label everything or add patterns to the different parts of your graphs to help differentiate each section. You can even design the graph in grayscale first to make sure it works before adding color to it.

Font

Your font choice should always go beyond just what looks nice. First, you need to make sure your fonts are large enough to be easily read by people with visual impairments on every platform. This is especially true for mobile versions of sites, which appear on much smaller screens. This can be easily done by using the correct markup (more on that shortly).

Another thing to consider is that people with dyslexia have issues reading certain types of text. Both italics and sans serif fonts are more difficult to comprehend because dyslexia causes the brain to blend the characters together without clear start and endpoints. It seems like a small thing, but these little quality-of-life improvements have a big impact on those who need them.

Markup

Headings help differentiate where the content starts and the hierarchy of a page. Visually, there are a few different ways to achieve this, but if you aren’t using the right HTML markup you’re going to leave vision-impaired users completely confused.

This is because blind people use screen readers to navigate the internet. These readers scan a page and communicate it to the user so they can “hear” the site. Screen readers use the HTML markup to identify the structure of a page, allowing users to just hear headings if they want and get to the part of the page they are interested in without listening to the whole thing. It’s essentially the auditory equivalent of scanning. Incorrectly using markup can also interfere with special characters like italics and bold. Some screen readers won’t identify these as emphasized, or worse, skip the word entirely. WebAIM has a good explainer of semantic structure here.

Screen readers also use alt tags to describe pictures to users. Make sure you are writing good descriptive tags for your images so that people who visit your site aren’t lost when they reach a primarily visual element like a picture.

The best way to make sure your site works well with a screen reader is to download one and test it out. There are lots of good free screen readers out there, so there’s no excuse not to.

Design

It is always important to consider where your website is most likely to be viewed. Many applications are rolling out a Dark Mode because more and more people are scrolling through their phones in bed at night and are experiencing light sensitivity issues. This probably isn’t the healthiest habit, but we’re all guilty of it.

Your site also needs to be easy to navigate with just a keyboard. Trackpads and mice are difficult or flat out impossible to use for the visually impaired and those with fine motor skill disabilities. You should be able to use the tab button to logically navigate your site from top to bottom, left to right. Try to avoid overly complicated menus and dropdowns, which is honestly just good design advice regardless of accessibility.

Final Checks

Once you think you’ve gotten your site where it needs to be, it’s time to go over the ADA Website Accessibility Checklist. This is everything your website needs to have to ensure that it is able to be used by everyone. It’s relatively short, only 26 items, but each one is extremely important.  If you need some help evaluating your site, you can also use a free program like the WAVE Web Accessibility Evaluation Tool.

It really isn’t that hard to create a website that is accessible by everyone. By just making some thoughtful choices, your website can reach, literally, millions of more people. And you’ll be making the world just a little bit better for them while you are at it.