7 Tips on Designing for Accessibility

FUNDAMENTALS OF UX | MARCH 5, 2018

7 tips on designing for accessibility

When it comes to Web and UX Design, accessibility usually falls pretty low on the list of priorities. We set out to design a sexy website with seamless interactions, but we often forget to accommodate for users who need a little extra help when navigating on our site.

Making your website accessible is obviously a huge win in terms of User Experience. It means you took the time to understand who will use your website, and how you can design the best possible experience for that audience. It’s especially key when you’re a huge brand and your website is used by millions of users with very unique needs and objectives.

What might come as a surprise is that accessibility also has a very positive impact on your SEO. In other words, if your site is optimized for accessibility, Search Engines like Google will favour your ranking in the search results. That means more people visit your website, generating more business for you.

It’s clear that accessibility is great for both UX and business, but now let’s talk about how you can make your website more accessible. Let’s look at 7 accessibility tips that are easy to implement and will have a major impact on the success of your website.

1.Color contrast

When choosing the color palette for your website, you want to be mindful of the contrast between the foreground and background elements. This is especially relevant when it comes to text. It's important that any text on your website clearly stands out from the background, so that it's easy to read.

A great tool that you can use to check the contrast between text and background color, is the WebAIM Contrast Checker.

2.Use Headings

When designing a website, it's crucial to use headings (h1, h2, h3, etc.) to establish a hierarchy in your content. Not only will this help users identify what's important, but also it will improve the accesibility of your website.

How do headings influence accessibility?
Headings are used by screen readers to navigate through your content. In other words, if a visually impaired user visits your website on a screen reader, they will be able to understand the hierachy of your content without the visual cues. For example, a screen reader will read an h1 heading as "Heading level one + the text in your heading".

To see a screen reader in action, check out the video below.

3.Define Alt-text

The alt-text is a description added in programming to images that appear on your website. Similar to headings, alt-text allows screen readers to identify an image and provide a description for users who are visually impaired.

To ensure an accessible experience on your website, the official Web Content Accessibility Guidelines recommend that you add alt-text to all images on your website that are non-decorative.

In other words, if you have an image that appears in a blog post, you should define the alt-text for it. If there's an image of a gradient behind your text that’s used for purely decorative purposes, you don’t need the alt-text.

4.Keyboard accessibility is key

Not everyone can use a mouse or trackpad, so it’s important that users can navigate your website with just a keyboard. Keyboard accessibility means that a user can jump between elements with the tab key or the four arrows.

This is usually pretty standard in terms of web development, but if you want to test it out on your own website, here's how:

open any page and navigate through elements with the tab key
try scrolling with the arrow keys
use the enter/return key to open links

5.Accesible Web Forms

When it comes to accessible Web Forms, there are three things you need to know:

Use labels
Indicate required fields
Keyboard accessibility

Labels
Labels help users understand what information they need to enter in your Web Form (i.e Name, Address, etc.). These labels usually appear above or to the left of your form fields. From an accessibility standpoint, it’s important that you define the label tag in HTML for each field on your form. That way screen readers can provide visually impaired users with a clear description of the form fields.

Required fields and error messages
Another important accessibility guideline to consider is indicating required fields. If there is a field that users need to fill out in order to submit the form, then you should indicate that this field is required. You can do this by prompting users with an error message when they don't fill out the field or simply including “Required” or “( * )” in the label.

Keyboard accessibility
As we mentioned in the previous tip, users should be able to navigate through the different elements of your website using just their keyboard. On a Web Form, that means users should be able to move from one field to the next with the Tab key. Again, most forms do this by default, but it’s always good to test it out.

6.Descriptive links

The links on your website should clearly describe what users can expect to find at the destination. For example, when users click a “Sign in” link, they can expect to be taken to a form where they will enter a username and password.

In the book Mobile Usability, Jakob Nielsen describes this as information scent. A link with a weak information scent is ambiguous and doesn’t provide users with enough context about what they’re clicking on (i.e Learn more). A link with a strong information scent clearly describes the destination and helps users navigate through the content on your website, making everything easily accessible. An example of a link with a strong information scent, is “Learn more about Apple Care”, which is used on Apple.com.

7.Closed captions

If you’re not familiar with Closed Captions, they’re simply the audio track of a video converted to text. This text appears in sync with the video, making it possible for hearing impaired users to fully understand the content.

If adding Closed Captions to all the videos on your website isn’t feasible, a great alternative is to provide a transcript. This will also get you points in terms of SEO because Search Engines will be able to read and index your content.

These are just a few basic tips for making your websites more accessible. If you’re interested in learning more about accessibility, be sure to check out the official Web Content Accessibility Guidelines, which go into a lot more detail.