How to Make Your Website Accessible

By on November 20, 2017

In this article I explain what web accessibility means and why it matters, and provide a handful of recommendations you can use to make your websites available to a broader audience.

You have an idea for a website. You spend half of your time concerned about how it looks and functions, and the other half focused on implementation. At some point, oftentimes late in the process, you start to ask questions such as:

  • How will the website look on mobile devices?
  • How do I get the website to rank highly in search results?
  • How do I track the effectiveness of my website?

Too often missing from this list are questions around web accessibility, or accessibility is an afterthought. But it’s important to build accessibility into the design and architecture of a website early, as part of the website’s “foundation.” It’s like constructing a house — do you build a ramp or elevator for wheelchair access into the plans, or wait until the house is built to “retrofit” it for wheelchair or walker access to the second floor?

What is web accessibility?

Web accessibility is the practice of making a website accessible to people with disabilities. Those disabilities can range from people who are color blind and can’t easily differentiate between similar colors, to people with motor impairments who can’t use a mouse, to people with dyslexia who have trouble reading large walls of text.

People with disabilities may access and/or interact with content on websites differently than most, so the goal in making a website accessible is to ensure that your content can be accessed in different ways. Here are some disabilities and how users with them may interact with your website:

  • Visual: Users with vision issues may forgo the use of a mouse and rely only on a keyboard to navigate websites. They may also use a screen reader.
  • Auditory: Users who have trouble hearing rely on captions and transcripts when digesting media. This is also useful for users who do not natively speak the language used on the website.
  • Physical: Users with motor issues may have trouble with tasks that require hand coordination, and will sometimes use specialized tools to interact with a website including a customized keyboard/mouse, eye-tracking software, or voice recognition software.
  • Cognitive: Users who have trouble understanding large amounts of text or dealing with complicated website layouts may rely on screen readers, transcripts, and captions to help with processing content.

Why make your website accessible?

Developing a website with accessibility in mind results in a website that can be accessed by a wider audience. A US Census report found that in 2010, 19 percent of the US population (56.7 million people) had a disability. That’s a lot of people. And keep in mind some disabilities can be temporary and sudden. For example, in constructing a house you might think that no one in your family uses a wheelchair, and not consider accessibility issues until someone is injured and on crutches or in a wheelchair and struggles to navigate the steps, doorways and stairs.

Another added benefit to making your website accessible is that a lot of the techniques needed to make a website accessible overlap with ways to optimize your website for search engines.

And beyond the above benefits, it’s also the law. There are several laws, including Section 504 and 508 of the Rehabililtation Act of 1973, which can be summarized the following way:

“No otherwise qualified individual with a disability in the United States… shall, solely by reason of her or his disability, be excluded from participation in, be denied the benefits of, or be subjected to discrimination under any program or activity receiving Federal financial assistance.”

This means that publicly funded universities such as UCLA need to ensure that their services, including their websites, are accessible to people with disabilities. Universities that have failed to meet this standard have faced several lawsuits in recent years.

Accessibility guidelines

There are many things to keep in mind to make a website accessible, but I’ve simplified them into three categories: Design, Code, and Content.

Accessible design

Colors

Think twice about the colors you use when designing a website. Color combinations that may look great to you may prove difficult for visually impaired users. The goal is to ensure there is adequate contrast. Look out for light and dark colored text on backgrounds that don’t provide enough contrast (e.g., a light blue button with white text on top). WebAim’s Color Contrast Checker is a great tool to assist with this.

Links

Make sure your links stand out. Links should be easy to differentiate from the text around them, which can be accomplished by bolding and/or underlining links, in addition to choosing a unique color. If link colors are not unique, users may get confused about what text is and isn’t clickable.

Font size

The size of the text on your website should be larger than you think. Whatever size you may put in your design, you might want to increase it 1 or 2 points more. I’ve found 15px to be a good base font size. Also think about the space between each line and block of text. I’ve found it useful to set line heights to at least 10px higher than my base font size, and space between blocks of text to be 1.5 times as big as the base font size.

Keep it simple

Be careful not to “over-design” your website. Keep it simple. If your design is too unique, users may become frustrated trying to understand how to navigate your website or may get distracted by objects that are flickering or moving, especially moving objects that can’t be paused or controlled.

Accessible code

Semantic HTML

Writing your HTML semantically gets you a long way towards accessibility. To write semantic HTML means to make sure that the HTML elements you choose correlate with the content’s meaning. For example, your navigation should use the <nav> element. Your footer should use the <footer> element. You can differentiate between different sections of a web page by using the <section> element.

Too often developers rely on the <div> element, which is not semantic and does not convey anything about the content within. Only use <div> when there is no semantic element available to better describe your content.

Using semantic HTML enables screen readers to see how a site is coded, “understand” the structure, and communicate important information to users about each part of a page or site.

Alternative text

Images that have important information in them should be accompanied with alternative text (alt text) that describes the image in a way useful to someone who may not be able to see the image.

Headings

When writing your content, it’s a good idea to use subheadings to make the content easy to scan. Those subheadings should use heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The <h1> tag is most often styled to visually be the largest, and heading 6 the smallest, but it’s important to not choose your heading tags based on their specific font size. Instead, choose headings semantically, by their relative importance. A page title should be <h1>, sections that need subheadings should use <h2>, and if you need to break a section into subsections, use <h3>, and so on.

Accessible content

A good rule of thumb is to write content on your website as if you’re targeting someone at a 12th-grade reading level. Users should be able to easily digest your content without having to know all of the acronyms and jargon that you might already be accustomed to in your organization.

You should also make your content easy to scan by using short paragraphs, lists, and sub-headers. It’s useful to imagine your subheadings as a table of contents for your web pages — if you strip out everything else they would function as elements outlining your content. For example, imagine you’re writing content for a page about meal planning. You might use the subheadings “Breakfast,” “Lunch,” and “Dinner,” and within each of these sections of content you might have subheadings such as “Organic,” “Gluten-Free,” and “Vegetarian.”

And lastly, when linking to other pages, be sure that the text that is being linked describes the page it is going to. Don’t say “Click Here to learn more about accessibility.” Instead say, “To learn more about accessibility, visit Web Accessibility In Mind.”

Additional resources

While you can find tons of useful websites from an online search, the links below are good informational resources for learning more about the laws, principles, and techniques behind web accessibility.

Photo courtesy of FreeImages.com/Leonardo Tote. Licensed under terms of FreeImages.com Content License.