Accessibility for Websites

by
Monica Galvan
Accessibility for Websites
Accessibility is rising in importance. Did you know you can be sued if your site isn't accessible? In this article, we’ll dive into what web accessibility is and how to make sure you’re designing with accessibility in mind from the start.

If you’re new to web design, you might think you can design and create a website in any you can imagine it to be. While that’s technically true, there are important factors to consider like the user experience of the site and most importantly, that you’re designing with accessibility in mind. But what exactly does this mean?

What is web accessibility?

Web accessibility refers to designing and developing websites, tools, and technologies that can be used by a wide range of people, including individuals who have visual, motor, auditory, speech, or cognitive disabilities. Specifically, this means you’re designing a website in a way that people can understand, navigate, and interact with it regardless of whether someone has a disability or not. When sites are correctly designed and developed, generally all users have equal access to the information and functionality.

Making your website accessible means you’re including those with cognitive, visual, auditory, motor, and speech disabilities (source)
Making your website accessible means you’re including those with cognitive, visual, auditory, motor, and speech disabilities (source)

Web accessibility also helps people without disabilities. For example, people using smartphones with small screens, older people whose sight is beginning to decline due to aging, people with temporary disabilities like a broken arm, people with situation limitations such as being in an environment where they can’t listen to audio, and also people using slow Internet connections or who have limited access to bandwidth. When we design our websites for better accessibility, everyone in the world has a better chance to access the information we are sharing on our sites.

Check out this video where Ran walks you through what accessibility is and how to apply it in your web design process.

What is ADA?

ADA stands for the Americans with Disabilities Act. The most relevant sections of the ADA in regards to web accessibility are Title II and Title III.

  • Title II requires state and local governments and governmental entities to receive federal funding to provide qualified individuals with disabilities with equal access to their programs, services, or activities.
  • Title III prohibits “places of public accommodations such as restaurants, hotels, movie theaters, museums, and hospitals from disability-based discrimination.”

While the ADA does not clearly address web accessibility, websites and apps are often considered as part of a business which is why if a business website does not pass accessibility, lawsuits can occur.

How do you make a website accessible?

ADA website compliance essentially comes down to making sure your website conforms with the WCAG 2.1 AA standards. ADA covers the legal side to make sure you’re not discriminating against those with disabilities. But what about WCAG? 

WCAG stands for the Web Content Accessibility Guidelines. These guidelines are published by the World Wide Web Consortium (W3C) under their Web Accessibility Initiative (WAI). In a nutshell, the W3C publishes standards to make the web more uniform and run better. If we are all using the same accessibility guidelines, it makes the Internet better and easier for everyone to use.

There are different versions (1.0, 2.0, 2.1) and conformance levels (A, AA, AAA) for WCAG. At a glance, here’s what’s required for each level of compliance.

A chart summary of principles and guidelines for Level A, AA, and AA of ADA compliance
A chart summary of principles and guidelines for Level A, AA, and AA of ADA compliance

The ADA compliance checklist for web designers

Use this checklist to go through your website and make sure it ticks all the boxes for ADA compliance.

Make your website keyboard-friendly

For a website to be accessible, it must be able to work without the use of a mouse. Many assistive technologies rely on keyboard-only navigation. This means you need to be able to use all of your site’s major features with just a keyboard and nothing else, including all pages, links, and content.

The most common way of navigating through a site using a keyboard is with the Tab key. This will help a user jump between areas on a page from links to buttons and forms. Your goal should be to make sure all web content and navigation can be accessed using Tab

Example of how to navigate through a site using only the Tab button on a keyboard (source)
Example of how to navigate through a site using only the Tab button on a keyboard (source)

You can test this yourself easily. If you find you can’t access certain elements or that navigating is difficult, you can pinpoint those issues and address them. WebAIM provides a guide for keyboard accessibility design.

Add alt text to all of your images

Images are a huge accessibility barrier to those with visual impairments. They often rely on assistive technologies such as Screen Readers which are software programs that read the text on the screen using a synthesizer or Braille display. However, these technologies can’t read images or text built within the images.

To solve this, you need to add Alt Text to describe your images to disabled users. Make sure to describe the image as clearly as possible. Here’s an example of how alt text looks in the code of a website.

<img src="pupdanceparty.gif" alt="Puppies dancing">

Have you ever visited a site and seen a bunch of broken or mislinked images? You’ll see something like the below example. This is where that Alt Text comes in handy.

What alt text looks like when a photo doesn’t load on a website
What alt text looks like when a photo doesn’t load on a website


Try to describe what’s happening in the image and how it matters to the story, rather than just labeling it with something like “picture” or worse “IMG_123”. If you don’t add any alt text, some screen readers will simply read the file name to the individual which is the worst experience you can provide.

Create contrast with your colors

One of the most important accessibility rules for a designer to follow is making sure the colors you use lead to an equal accessible experience for all. What does this mean? Make sure there is enough contrast between your foreground and background colors. 

A visual example of accessibility friendly vs not accessibility friend color combinations
A visual example of accessibility friendly vs not accessibility friend color combinations


For this reason, it’s best to stick with a white background on your website. For buttons, be sure to check your foreground and background color with a contrast checker to make sure it passes. 

An example of a foreground and background color passing WCAG AA and WCAG AAA compliance
An example of a foreground and background color passing WCAG AA and WCAG AAA compliance

Don’t use color only for critical information

When you’re trying to communicate something important, show an action, or prompt a response, don’t use color as the only visual indicator. People with visual impairments will have a hard time understanding your content.

For example, when showing errors on the screen, don’t rely on color text alone. Instead, add an icon or include a title to the message. Consider adjusting the font weight or using an underline text style to help text links stand out more. 

Here’s an example of a link hover that doesn’t only rely on visual cues but also transitions from an underline to a rectangle. This action helps those with visual impairments understand this is a link you can click on.

Example of a hover state designed with accessibility in mind (source)
Example of a hover state designed with accessibility in mind (source)


Enable resizable text

Most devices and browsers allow users to resize text which can be helpful for those with visual impairments. However, if you don’t build your site to support this feature, resizing text could break your design or make it difficult to interact with your site.

A good practice is to avoid absolute units, such as specifying text size using pixels. Use relative sizes instead, which enables the text to scale depending on other content and screen size.

Use proper HTML header tags

Make sure to structure the content of your site by using headers carefully. This will make your content easier to understand and improve the user flow. Clear headers help screen readers interpret your pages. This makes it much easier to provide in-page navigation. It’s simple to do, you only need to ensure you’re using the correct heading levels in your content.

How to structure the HTML of a webpage correctly with proper H1, H2, H3, and H4 tags
How to structure the HTML of a webpage correctly with proper H1, H2, H3, and H4 tags

For example, you should only use one H1 per page, usually for the page title. This can be followed by an H2 tag for subheadings and can then be nested further with H3, followed by H4 tags. These should always be used in order, avoid using an H4 directly after an H2.

Design forms for form inputs

You may have fallen into the trend of adding light gray placeholder text to forms but this is one of the biggest mistakes when designing a form. This placeholder text has low contrast so it’s hard to read. People who use screen readers usually navigate through a form using the Tab key to jump through the form controls. The <label> elements are read for each form control. Any non-label text, such as placeholder text, is usually skipped over.

Example for how to properly design a form with a label tag
Example for how to properly design a form with a label tag

Keep labels and use them appropriately in the design of your forms. When designers hide descriptions or directions in their forms, they’re sacrificing usability in favor of simplicity. Add enough instructional text to your forms to create a good experience for all users, with or without disabilities. 

Tools for checking web accessibility

Here are a few tools to help you check the accessibility of your website.

Use a contrast checker for your color combinations

We already mentioned this one earlier but it helps to be reminded. This is especially important for CTA buttons and anywhere you are altering the text or background color. Use a contrast checker tool like this one from WebAIM to make sure it passes. If it doesn’t, just move the sliders until you get a combination that does pass.

Web Accessibility 

This is a free web accessibility test that will determine how closely your website complies with the Web Content Accessibility Guidelines (WCAG) 2.1 standards. Submit your URL to be tested on webaccessibility.com. You’ll receive a compliance score with a list of actionable recommendations. Use these results to improve the accessibility compliance for your site.

Review WebAIM’s WCAG 2 checklist

If you want to dive into a more in-depth checklist of accessibility requirements, take some time to review this one from WebAIM. You can read through each individual guideline along with the accompanying recommendation. 

Ready to learn more about web design?

If you want to learn more about color and how it impacts design, check out our post on What is color theory? Or check out other articles from the Flux blog where you can learn more on web design, Webflow, and freelancing.

If you’re looking for in-depth video tutorials on design, check out our YouTube channel where we publish new videos weekly.

Flux YouTube channel
Flux YouTube channel

If you want to learn more about the web design process from start to finish, consider checking out our program The $10k Website Process. You’ll discover a step-by-step process to design beautiful, high-value websites that achieve strategic goals for your clients. Master the art and strategy of website design, and increase the value of your services, as well as your rates.

FREE WEBDESIGN COURSE IN YOUR INBOX

Start growing your business today with Ran’s High-Value Web Designer Secrets email course that teaches you the three most significant things he’s learned as a freelancer.

Design Files Sale: 29% OFF

00
days
00
hours
00
minutes
00
seconds

Opening Enrollments on

August 24, 2021