Want to create interactive content? It’s easy in Genially!

Get started free

Accessability

Katlyn Paslawski

Created on April 10, 2021

Start designing with a free template

Discover more than 1500 professional designs like these:

Math Calculations

Interactive QR Code Generator

Interactive Scoreboard

Interactive Bingo

Interactive Hangman

Secret Code

Branching Scenario: Academic Ethics and AI Use

Transcript

Design & AccessIbility

How to design online learning with accessilbity in mind

Text Formatting

Apply text formatting to create headings and subheadings. This adds structure to allow the document to be navigated with assistive technology.

Font CHoice

Typefaces such as Verdana, Tahoma, Trebuchet MS and Georgia were designed specifically for the web. These fonts are also compatible across many devices. Font styles overall should be larger, taller in height and increased letter spacing for the best reading experience.

TIP: comprehension and speed of reading can be increased by increasing font size, using all caps and regular lettering width.

Colour Contrast

Use of colour for course material should maintain a high contrast between the background and foreground. Check to ensure accessibility of the colour combinations by using WebAim Contrast Checker.

Images

Images and icons require alt text to be readable by those who are visually impaired. The goal is to describe the information in the image, not the image itself.

TIP: Decorative images that do not contain information can have empty alt text or be marked as decorative in Word.

Visit WebAim Contrast Checker!

Hyperlinks

Create hyperlinks that are accessible for all users by describing the contents of the link rather than the link itself. Be sure to describe the link rather than writing “click here” as the screen reader will read exactly what is written.

References

Haskey, A. I, & Stahl, A. (2014). Making online learning accessible for students with disabilities. Teaching Exceptional Children, 46, pp. 70-78.

Scacca, S. A reference guide for typography in mobile web design. Smashing Magazine. Retrieved from https://www.smashingmagazine.com/2018/06/reference-guide-typography-mobile-web-design/