Good Design is Accessible: Foundations of Accessibility

Meggan Van Harten is Design de Plume’s Strategic Leader and our accessibility expert.

She actively promotes accessibility through mentorship, teaching both clients and students the importance of inclusive design.

According to the 2017 Canadian Survey on Disability (CSD), 6.2 million Canadians aged 15 and older have a disability. Accessible design isn’t just another box to tick for moral or legal reasons; it’s a necessity when using graphic design to communicate with a diverse audience that is approaching our content in different ways.

By considering our use of colours, typography, language, and even the delivery method for the content, we can create graphic design work that is as accessible as possible for the intended audience. Today, we’re sharing a few important accessibility tips from Meggan to help your communications serve the full spectrum!

Alt text is a short written description of an image. Screen-reading software can read out loud these descriptions to people, making it possible to experience a website or document fully. For alt text to be useful, focus on the following:

• Write a detailed and useful description, rather than focusing on too many keywords
• Add context to your description by referring to the page topic and including relevant details to make your alt text more specific
• Omit filler words such as “image of” or “photo of,” and keep your description to 125 characters or less

A good list presents important information succinctly. To make your list accessible to all people, it must be designed with screen-reading software in mind. When designing lists, keep the following points in mind:

• Use bullets or numbers to structure your list
• Use recognized glyphs for bullet lists to ensure that a screen reader recognizes the icon as a bullet
• If a bullet requires additional information, nest it under the primary bullet using the appropriate glyph or numbering convention (ex. 1.a, 1.1)

Colour contrast refers to the difference in brightness between the foreground and background of a document or image. When designing text and backgrounds, use contrasting colours to make the text more legible for colour-blind and/or low-vision people, as well as for those who are interacting with your content in different circumstances (for example, outside on a sunny day).

In most instances, the recommended contrast ratio for digital content is 4.5:1. Factors such as font size, information hierarchy, or text emphasis may influence your decision to diverge from this recommended ratio (for example, a 3:1 ratio for large-scale text).

By using multiple tools to verify our designs, we can understand how others might experience our content and detect errors in advance.

Listen to your document through a screen reader to check for errors or inconsistencies. While using screen-reading software to verify a document, Meggan kept hearing the words “yin-yin” repeated over and over again, even though these words did not appear in the text. This was due to a bullet encoding error. She was able to correct this issue before it affected the end user.

Typography is the art and technique of arranging type to make written language legible when displayed. Good typography can significantly increase the accessibility of your content. Keep these points in mind when selecting a typeface for your project:

• Focus on the legibility and readability of the font
• Typography issues can arise when a font has characters that look virtually identical (i.e. 1, l, I)
• Some users may also swap letters vertically or horizontally if they look too similar (i.e. w/m, b/d, q/p)
• Use text decorations, shapes, and patterns to call out certain parts of the text. Use capitalized text sparingly, and avoid relying on colour to indicate importance

Headings communicate the structure of the content in your document or webpage. A good heading structure makes it possible for people to interact with your content clearly and logically.

• Add headings throughout your content and nesting them according to semantic structure (e.g H1, H2, H3, H4) will make your content easier to navigate
• When designing, consider adding text, text decorations, shapes, and patterns to denote differences or emphasize certain sections of the content
• Avoid relying on colour alone or capitalized text to indicate importance

Tables are used to organize data in a grid. To make your table accessible to all users, we must keep visually-impaired users in mind.

Include a summary of the table and describe the table’s findings and/or the results of the analysis. Describe the conclusions that can be drawn from the data and why these are relevant to the rest of the document or webpage.

Accessibility in design often begins with the language used to communicate the content. When writing for accessibility, choose clarity over complexity. Here are some tips when writing content:

• Consider your audience when writing and create content that is suitable for the broadest audience possible
• Use short, common words.
• Write in simple sentences and paragraphs. Break your text up into clear sections, but avoid complicated paragraph and heading structures that might confuse readers
• Choose simple language over jargon or technical language. If you must use specialized language, provide a glossary
• When sharing data or research, write a summary of the conclusions or takeaways for readers
• Use a readability checker tool to understand how your work will be perceived by different audiences

There are also different ways to test your project’s contrast. For more information, please check out the RGD’s AccessAbility 2: A Practical Handbook on Accessible Graphic Design.

Don’t forget to follow Design de Plume on Instagram for more accessible and inclusive design tips!