Design for the web should address all visitors’ needs in interacting with and understanding a site’s content.

A black and white illustration of a cat-loving website designer working at their desk in a wheelchair. There is a website page mockup on their screen.

Good design has always been the marriage of form and function.

Make it beautifully purposeful.

Design serves a purpose. As website designers, our work lives within the boundaries of what visitors need to accomplish. Our goal is to make sites useful – and ideally enjoyable – to everyone that visits.

To design for accessibility, we must pay close attention to typography, colour, and structure. We also need to think about how people are represented in the images we select and how a site adapts across devices.

Design

Typography

One of the biggest impacts on website accessibility is the typeface the designer chooses. It can make the difference in how quickly and accurately a visitor can consume your content (referred to as readability).

Some of the most common typefaces are also the most readable and readily available. These typefaces include Arial, Calibri, Helvetica, Times New Roman, and Verdana, to name a few.

A lot of what makes these typefaces more readable is that they are the most familiar to us, and we’ve become better at decoding them. We can choose other fonts in our designs, but we should keep in mind the features of the most accessible typefaces when doing so.

When choosing a typeface for your client’s website design:

  • For highest readability, opt for letterforms that are consistent and balanced. Watch for character widths that are overly wide or narrow and avoid letterforms that vary in width.
  • Select fonts with an x-height of ⅔ to ¾ of the cap height. Keeping the ratio between uppercase and lowercase letterforms within this range improves readability.
  • Rank readability over legibility on longer blocks of text.

Design

Colour

Colour is a core element of design, but websites can’t rely upon it as the only means of conveying information and remain accessible. For example, when using colour to differentiate data points on a chart, add labeling or use obvious patterns to provide context for visitors with various vision types.

When using colour for text, use a contrast checker tool to ensure you are staying within contrast ratio standards. In general, a contrast ratio of 4.5:1 is ideal for normal text, 3:1 for large text.

Design

Structure

Clear information architecture and content structure makes websites easier to skim, navigate, and understand.

Consider responsive design to ensure a consistent experience regardless of how visitors access site content.

The following structural considerations help readers track lines of text and recognize letters and words through shape and consistent format. These structural features make a big difference for visitors with restricted visual fields.

  • Spacing: Maintain a line height of at least 1.5 times the font size. Split line lengths over 100 characters into columns.
  • Alignment: Flush-left alignment allows the eye to quickly find and read each line of text. Use all other alignments sparingly.
  • Formatting: Reduce the use of ALL CAPS text as it is harder to read and understand the letters. If used, limit to a few words of text. Bold, italic and underline create visual distraction and should only be used when necessary.
  • Predictable layouts: Visitors scan websites so ensure the structure, hierarchy and visual flow of the page is clear and consistent. If you include a help or chat function in the design, make sure its placement is consistent across all web pages to make it easy to find.
  • Minimize visual clutter: Every piece of content on a page should serve a purpose. Decorative images, links, and content create barriers for visitors to access meaningful content.

Design

Buttons/Labels

Accessible links and buttons help guide visitors through a website and increase responses to your calls to action.

  • Text links: Be sure to present links with a visual cue. The most commonly recognized way to indicate that a piece of text is a link is by underlining it. Avoid using only colour changes to show text links. An alternate solution is presenting a link with an arrow that shows an underline when the visitor hovers over it. However, remember that hover states do not appear on mobile devices.
  • Buttons: Treat buttons that signal an important clickable action consistently across the site. Use high contrast text and design buttons at a minimum of 44 pixels high.
  • Calls to action (CTA): Increase the accessibility and effectiveness of CTAs by using short, action-oriented text and high contrast visible buttons. Add negative space around a CTA to reduce cognitive load and allow users to clearly focus on the action you want them to take.

Design

Images

There are many aspects to consider when selecting images for use on a website.

On the technical side, pay attention to image contrast levels, especially when using an overlay or text.

Select purposeful images that illustrate a range of experiences, settings, and people. Choose images that empower those of different abilities and backgrounds. Models should represent real people rather than those portraying a disability.

Design

Data/Charts

Meaningful visual aids like data and charts can be helpful to illustrate complex ideas so long as the design is easily understood.

  • Colour Choice: Choose colours that provide enough contrast so that visitors with visual impairments can distinguish them with ease. The site WhoCanUse is a helpful resource for the best colour combinations.
  • Whitespace: How you use whitespace – also called negative space –  in your design is almost as important as your content. Careful use of whitespace can help to group similar elements, reduce visual clutter, and improve readability.
  • Labelling: Designing with accessibility in mind means not relying on colour alone to separate content. As a quick test, see if you can understand the content when viewing it in greyscale.

Use labels, patterns, and data view alternatives (such as a table) to reach more visitors by improving readability and usability.

Design

Videos & Animation

When including movement in your design, be sure to provide visitors enough time to read any copy. Provide a text alternative and give visitors the controls over the movement settings. The ability to pause or hide content can help to limit distractions and avoid potential seizure, dizziness, or nausea triggers.

When using text and overlays in a moving image, assess the type, colour, and contrast treatments within the video itself.

Design

Forms

When we ask visitors to provide information, we need to offer clear direction and structure to make it accessible.

When building a form, be sure to:

  • Label all inputs
  • Use placeholder text as a descriptive field example
  • Include instructions for formatting and indicate required fields
  • Include descriptive error messages and feedback

Design community resources

The community

External Link

Your Interactions Make Me Sick

This article provides perspective on why movement, noise and other website interactions can create an accessibility issue, particularly when they can’t be controlled by the user.