Accessibility in visuals: Designing for diverse learners

When it comes to learning, great design is inclusive design. Visuals play a powerful role in making learning materials engaging and memorable, but without thoughtful accessibility, they can unintentionally exclude learners with diverse needs. By designing visuals with accessibility in mind, you create a more equitable learning experience for everyone. Let’s explore how to make your visuals work for diverse learners.

Check your colour selection

Not everyone perceives colours the same way. Colour blindness and low vision can make certain combinations or contrasts ineffective.

Address this by:

• Choosing colour-blind-friendly palettes (e.g., avoid red and green together).

• Use texture, patterns, or labels in addition to colour to convey meaning (e.g., striped bars for emphasis).

• Ensure strong contrast between text and background—test it with tools like WebAIM’s Contrast Checker.

https://colourcontrast.cc/

Provide text alternatives

Learners who use screen readers or have visual impairments might miss out on essential visual information.

Address this by:

• Adding descriptive alt text to all images, graphs, and diagrams. For example, instead of “Chart of sales growth,” write “A line graph showing a 20% increase in sales from January to June.”

• Providing long descriptions for complex visuals, like infographics or flowcharts, in a text format.
  

Use readable fonts

Some fonts are difficult to read, especially for learners with dyslexia or low vision.

Address this by:

• Using sans-serif fonts like Arial, Verdana, or Open Dyslexic, which are clearer and easier to read.

• Maintaining a font size of at least 12–14 points for body text and larger for headings.

• Avoiding all caps or italics for large sections of text—they can be harder to decipher.
  

Overloading screens

Too much information or visual clutter can overwhelm any learner, much less learners with cognitive disabilities or attention disorders.

Address this by:

• Simplifying layouts by focusing on one concept per screen.

• Using white space strategically to give content breathing room.

• Breaking down complex visuals into smaller, digestible sections.

  
  

Design for keyboard and screen reader navigation

Interactive visuals, like clickable maps or drag-and-drop activities, may not be usable by learners relying on keyboards or screen readers.

Address this by:

• Testing to ensure that all interactive elements can be navigated with a keyboard.

• Adding text descriptions or captions to interactive visuals so learners using assistive technology can understand the content.

• Test interactive features with accessibility tools to identify potential barriers.

  
  

Include multiple modes of representation

Visuals alone may not work for all learners.

Address this by:

• Providing transcripts or written explanations alongside videos and animations.

• Providing text or audio descriptions of complex images, such as process maps.

  
  

Visit the cast.org website to learn about universal design for learning principles and multiple modes of representation.

Test and iterate

Well-intentioned designers can miss the mark if not tested with diverse users.

Address this by:

• use accessibility audit tools like wave and codepen to identify issues in your design

• conduct usability testing with a diverse range of learners to gather feedback

• continuously upskill and improve your products based on feedback and new accessibility guidelines.

  
  

Accessibility isn’t an afterthought—it’s a fundamental part of designing effective learning materials. By creating visuals that accommodate diverse learners, you ensure that everyone can engage with and benefit from your content. Inclusivity isn’t just the right thing to do; it’s the key to better learning outcomes.