When designing and developing for the web it’s important to be creating products that are fully functional for all users, which includes users with disabilities. These disabilities can include auditory, cognitive, learning, neurological, physical and/or visual disability.

It’s important to keep in mind that creating rich web experiences for all users allows for a better user experience and by law, “Beginning January 1, 2021: all public websites and web content posted after January 1, 2012 must meet WCAG 2.0 Level AA”.

Here are some important ways to design and develop accessible websites. Applying these will help bring you and your team up to compliance while you ask yourself time and time again, “is this work inclusive?”

Animation

Too many moving pieces, flashing content, even parallax effect can cause motion sickness to some users. Look at your design and see if those animations are too distracting. Ask your colleagues, friends, family, etc. to give you feedback regarding how the effects impact how much they enjoy the site.

This parallax effect comes from Digital Hands. The image moves based on your cursor location. This type of effect cannot be turned off and the user is forced to interact with it. Via webydo.

Colour and Contrast

When using a lot of colour in your designs, it’s important to remember that 1 in 12 men and 1 in 200 women globally are colour blind, and colours mean different things culturally. For example, we understand green as success and red as an error, but in Chinese culture, red symbolizes good fortune and joy.

An example of 4 different types of colour blindness: “normal vision”, deuteranopia. tritanopia, and protanopia and the colour swatches individuals see.

If you are using colour, please do not use it to express actions, and when possible use descriptive text or visually understandable symbols (a triangle could represent caution). A good example of this is an error message for required fields in forms. If you are going to use colour to symbolize an error also include descriptive text.

According to the Web Content Accessibility Guidelines (WCAG) 2.0 a contrast ratio of at least 4.5:1 should exist between a background and its text. This applies for text that is less than 24px (not bold) and less than 19px (bold). For larger text, a ratio of 3:1 is appropriate.

To test your design, you can use High Contrast Analysis tools to see which colours work well together (see below).

Fonts

Because screen dimensions are always changing, it’s always important to have fonts that are legible to everyone no matter the screen size. Try to stick with fonts no smaller than 16px; even a minimum of 18px is appropriate.

As for line height, the default is 1.2 but According to the Web Content Accessibility Guidelines, it should be at least 1.5 within paragraphs in blocks of text.

In this example, the top represents the default line height (1.2) style when developing a site. Below is the recommended line height (1.5) according to the WCAG. The latter is more visually appealing, giving each line more room to breathe.

Images

Include good descriptive text and for alt text, do not describe the image in detail (leave that to the caption/ descriptive text underneath), but instead what the image is e.g. company logo.

Work by Henri Matisse – La perruche et la sirène, year 1952 ” Matisse executed this work by snipping forms from paper coloured in one hue. The total work contains cut-out forms in contrasting colours on a white surface. He began this method in 1940, but in his last years this medium dominated all his work. The imagery of this piece consists of leaves, pomegranates and two forms that appear only once.” Via Artsy

Keyboard

Some people may only navigate the web using a keyboard due to dexterity or mobility issues, so it’s important that your site can easily be navigated through by tabbing through the content. Always remember to include proper focus areas, which allow for visual cues of selected content.

Test the default focus area style for best practice. If none exist:

1. create your own in the CSS

2. within the HTML add a tabindex of 0. ie: <h1 tabindex=“0”>This now has a focus state</h1>

3. implement using javascript focus() method ie: const modal = document.getElementById(‘modal’); modal.focus();

Additionally, primary items should be visible, while secondary items can be shown via hover. This not only makes a site easier to navigate via keyboard but also more functional.

Tools

There are many tools out there that make it easier to design and develop for accessibility and are available to start using right now!

Chrome: if you are already using Chrome, you have a major resource. Run an audit on a webpage to show how accessible it is.

Running an audit on your website via Chrome is easy. Open Developer Tools, Mac: Command+Option+J Windows/Linux: Control+Shift+J, Click on ‘Audits’ to the right in the top menu, Press ‘Perform Audit’. Choose the items you would like to Audit and when ratified with your selection, press ‘Run Audit.

For Developers: download the developer version of Chrome, Chrome Canary. This has a feature that allows you to inspect an element and let you know if the colour/image/text meets accessibility standards.

aXe: chrome extension. aXe will let you know how serious the violation is, what WCAG guideline is being violated, and details about the element in question.

Colour Contrast Analyzer: Chrome Extension. Self-explanatory

WAVE Evaluation Tool: Browser extension. What’s nice about WAVE is it offers a real-time analysis of your site and using a screen overlay to show what passes/fails for accessibility.

NoCoffee: (Chrome extension) Want to see how users see your site with different visual impairments? Install this extension.

These are just a few tools available. Explore online to find the best tools available that will help bring your site up to compliance!

---

About the Author

Evan Pizzolato, based in Toronto, Ontario, began his career as a web designer and transitioned into a front-end developer, combining his love of design and coding. Working on projects of all sizes, he has incorporated many user experience principles into his work over the years.

His unique set of skills in user research, information architecture, content strategy, and usability testing has not only improved overall satisfaction from clients but also allowed for a deeper understanding of the values of users. Evan is hard working, friendly, and passionate and these core values can be seen in all areas of his work.