Design

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.

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.

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.

Navigation connects visitors with your content. Make it easy for visitors to access web pages in multiple ways, including primary and secondary navigation as well as through breadcrumbs that tell visitors where they are on the site.

When using icons in the navigation, make sure they are:

• At least 44×44 pixels
• High contrast

Predictable design features help visitors navigate a website. Use the same navigational mechanisms across pages and provide advanced notice when the site does not follow a familiar pattern. For example, include an icon or text indicating when a link will take a visitor away from the website to another one.

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.

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.

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