English
​
Answer:

Smiling adult swimming in lake with dog.

Did you know?

Typefaces and fonts impact reading performance for individuals with varying disabilities. According to a well-known 2013 study by Rello and Baeza-Yates, the best typefaces or fonts for people with a learning disability such as dyslexia are sans serif, monospaced, and roman type fonts.

6

Sources:

1 https://www.freepik.com/free-vector/font-concept-illustration_11608215.htm#query=font&position=4&from_view=author

2 https://webaim.org/techniques/fonts/

3 https://www.freepik.com/free-vector/ui-ux-design-concept-illustration_31054806.htm#page=7&query=design&position=34&from_view=author

4 https://www.w3.org/TR/WCAG21/#contrast-minimum

5 https://www.freepik.com/free-vector/click-here-concept-illustration_10838504.htm#query=website&position=31&from_view=author

6 https://www.dyslexia-reading-well.com/support-files/italian_study_on_fonts_2013.pdf

What about information and visual layout in design?

A smirking feminine-presenting person with a head scarf, long sleeve dress is posting their food dish image on their phone.

Image by storyset on Freepik

1
and re-colored by Byte author.

1. Use alternative text descriptions for images.

Use alternative text descriptions, also known as alt text, for all appropriate images in your digital courses, lesson, PDFs and other materials. Refer to WCAG 2.1 or other local or national guides for more details and exceptions.

2

A smirking feminine-presenting person with a head scarf, long sleeve dress is looking at a food dish image on their phone.

Image by storyset on Freepik

3
and re-colored by Byte author.

2. Use short descriptions and minimize information lines for content.

When possible, use 1-2 lines of text in lists or chunk paragraphs for easier readability, especially for learners with screen readers that hear the text. Try not to use too many filler words.

4

An imam is leading a mosque prayer mass on a television screen with a speech bubble and two people are following along.

Image by storyset on Freepik

5
and re-colored by Byte author.

3. Use accurate text alternatives with audio or video media.

According to WCAG 2.1 AA, always include accurate text transcripts with audio and closed captioning (also known as subtitles) to videos.

6

A computer screen is showing the HTML code of a website and each code part is showing designated text, images, and analytics.

Image by storyset on Freepik

7
and re-colored by Byte author.

4. Use headings and their levels in a logical order.

People that use screen readers benefit from programmatically tagged headers. The World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) advises to order most important headings at rank 1 <h1> to least important at rank 6 <h6>.

8

Did you know?

Universal design for learning (UDL) is a model that values an accommodating and flexible learning environment to reach as many diverse learners as possible.

9
UDL is relevant when building any lesson, design, graphic, or any other material for learning!

Sources:

1 https://www.freepik.com/free-vector/image-post-concept-illustration_9233828.htm#&amp;position=14&amp;from_view=user

2 https://www.w3.org/TR/WCAG21/

3 https://www.freepik.com/free-vector/annotation-concept-illustration_12781046.htm#query=short%20descriptions&amp;position=3&amp;from_view=author

4 https://webaim.org/techniques/fonts/

5 https://www.freepik.com/free-vector/mosque-online-service-concept-illustration_32044573.htm#&amp;position=3&amp;from_view=user

6 https://www.w3.org/TR/WCAG21/#audio-description-prerecorded

7 https://www.freepik.com/free-vector/software-integration-concept-illustration_18352184.htm#&amp;position=12&amp;from_view=user

8 https://www.w3.org/WAI/tutorials/page-structure/headings/

9 https://teaching.cornell.edu/teaching-resources/designing-your-course/universal-design-learning

Take Action

A winking feminine-presenting person with dark melanated skin and curly hair is raising a thumbs up to a certification.

Image by storyset on Freepik

1
and re-colored by Byte author.

Get started on making your learning designs more accessible:

Did you know?

There are many resources and departments dedicated to accessible instructional design. If possible, check out your learning and teaching center at your work or other state or country departments that can provide more insights. Because this Byte is for educational purposes, not all accessible design practices were addressed.

Source:

1 https://www.freepik.com/free-vector/certification-concept-illustration_12704417.htm#page=7&amp;query=website&amp;position=1&amp;from_view=author
Rumie logo

This logo isn't an ad or affiliate link. It's an organization that shares in our mission, and empowered the authors to share their insights in Byte form.
Rumie vets Bytes for compliance with our Standards. The organization is responsible for the completeness and reliability of the content.
Learn more about how Rumie works with partners.

License:

Two smiling people, one feminine and one masculine presenting, are using sign language to communicate outdoors in nature.

Image by storyset on Freepik

and re-colored by Byte author.

When we think about how things are designed from an accessibility lens, often many learners or users are left out.

How would your life be impacted as a learner if you couldn't hear? What would be helpful?

In this situation, clear-plastic face masks are a great tool for more accessible learning.

Two smiling people are wearing clear-plastic face masks and using sign language to communicate in an office setting.

Image by storyset on Freepik

and re-colored by Byte author.

Create a more accessible space to make sure all your learners fully benefit from your learning content!

Did you know?

Specific learners may need accommodations. Always refer to a learner's official accommodations list that you receive from your disability services center and make the appropriate adjustments to your learning designs. Remember to keep this information confidential.

Why is accessible design important?

A feminine-presenting person of in a wheel chair is at the front door of a building with stairs and no accessible ramp.

Image by storyset on Freepik

and re-colored by Byte author.

Example #1 — an architectural design that doesn't have accessibility in mind:

Imagine going to your new class, but there is no readily available ramp to get to the main front door with your wheelchair.

Instead, you find stairs and now have to look for a ramp or elevator around the building which could make you late and miss part of the lecture.

This isn't great because it takes longer time to reach the side ramp than the main stairs.

Accessible architectural design and learning design aren't that different.

These two types of design share similar goals, such as creating environments that accommodate the diverse needs of people in our community that we interact with.

A student with ADHD is sitting in a chair looking away while having a conversation with a teacher next to them.

Image by storyset on Freepik

and edited by Byte author.

Example #2 — learning design that does have accessibility in mind:

Imagine going to training as a learner with attention-deficit/hyperactivity disorder (ADHD) and getting a handout of the class notes from your instructor at the beginning of class to follow along.

This is great because you might often have trouble paying attention to auditory lessons for a long period of time and you might miss some key spoken words.

Did you know?

Accessible learning design asks for your empathy. When we think about how things are designed from an accessibility lens, often many learners are left out. Think about a time during class where you felt invisible. How does that impact your motivation for going to this class? Did you feel like you belonged?

Accessible design requires empathy.

Two diverse and young smiling, eco-friendly millennial adults are posing at a walking street sign to take a selfie.

Image by storyset on Freepik

and re-colored by Byte author.

More than ever, it's common to encounter people with invisible disabilities.

...an invisible disability is a physical, mental or neurological condition that is not visible from the outside, yet can limit or challenge a person’s movements, senses, or activities.

— Invisible Disabilities Association

Regardless of someone's identity, including age, they may have a physical, mental, or neurological disability that can't be seen by just looking at them. It's very important to always reflect on our own biases and lean into empathy to seek understanding.

A content male-presenting elderly man sitting in a wheel-chair is looking at window birds that their friend is pointing at.

Image by storyset on Freepik

and re-colored by Byte author.

Empathy allows you to understand learner barriers and limitations.

Empathy (noun): the action of understanding, being aware of, being sensitive to, and vicariously experiencing the feelings, thoughts, and experience of another.

— Meriam Webster Dictionary

Empathy is a tool that will allow you to be a better designer from the beginning of your design process by considering the abilities, disabilities, preferences, limits, culture, socioeconomic class, and life circumstances of all of your learners.

A world glove is above a diverse set of smiling people from all over the world standing in a front line.

Image by storyset on Freepik

and edited by Byte author.

Inclusive learning design with accessibility at the forefront reaches more learners.

...an inclusive design approach is one that perceives disability as a mismatch between our needs and the design features of a product, built environment, system or service.

— The Inclusive Design Guide

Accessibility is always the right thing. It provides equitable learning experiences, reaches more learners, and benefits everyone, including you as an educator.

There are often legal requirements for accessibility compliance in design. Avoid re-designing a finished product without consulting an accessibility specialist in your learning organization!

Did you know?

Accessible design doesn't mainly focus on disability. Accessible design should also include people with different religions, culture, languages, financial situations, data limits, technologies, and more! Imagine living in the middle of nowhere and the only option is 3G connectivity on your low-tech phone within your budget. It may make loading images and experiencing the web slower and more selective.

What are common accessible learning design practices?

A masculine-presenting person with glasses in business casual clothing is standing and testing fonts in a design programs. Image by storyset on Freepik

and re-colored by Byte author.

1. Use reader-friendly typeface and fonts.

There is no single typeface or font that is the standard for accessibility, since every person has unique needs. It's recommended to avoid cursive and use simple fonts like:

  • Arial

  • Tahoma

  • Verdana

  • Helvetica

  • Time New Roman

Two people, one masculine-presenting and one feminine-presenting, are designing the layout of a website article.

Image by storyset on Freepik

and re-colored by Byte author.

2. Use colors with high-contrast between text and background.

Visual ability is on a spectrum. Select text and background color mindfully. According to Web Content Accessibility Guidelines (WCAG) 2.1 AA, it's best to use images of text and text with a 4.5:1 contrast ratio with some exceptions, such as text in logos.

A smiling feminine-presenting person with dark melanated skin is clicking on a website button that says "CLICK HERE".

Image by storyset on Freepik

and re-colored by Byte author.

3. Use meaningful website link descriptions.

When designing and writing for accessibility, it's critical to think about how people that use screen readers, such as blind learners, experience your designs in class, especially for website links.

Flaticon Icon

Not accessible:

  • Vague descriptions

  • Entire website URL links

  • Same text for different links

  • "Click here", "Learn more" or "Read this"

Flaticon Icon

More accessible:

  • Longer descriptions

  • Meaningful word choice

  • Unique text for each link

  • More specific language

Quiz

Which of the following is a strong alternative text description for an image?

Did you know?

Typefaces and fonts impact reading performance for individuals with varying disabilities. According to a well-known 2013 study by Rello and Baeza-Yates, the best typefaces or fonts for people with a learning disability such as dyslexia are sans serif, monospaced, and roman type fonts.

Subscribe for more quick bites of learning delivered to your inbox.

Unsubscribe anytime. No spam. 🙂

What about information and visual layout in design?

A smirking feminine-presenting person with a head scarf, long sleeve dress is posting their food dish image on their phone.

Image by storyset on Freepik

and re-colored by Byte author.

1. Use alternative text descriptions for images.

Use alternative text descriptions, also known as alt text, for all appropriate images in your digital courses, lesson, PDFs and other materials. Refer to WCAG 2.1 or other local or national guides for more details and exceptions.

A smirking feminine-presenting person with a head scarf, long sleeve dress is looking at a food dish image on their phone.

Image by storyset on Freepik

and re-colored by Byte author.

2. Use short descriptions and minimize information lines for content.

When possible, use 1-2 lines of text in lists or chunk paragraphs for easier readability, especially for learners with screen readers that hear the text. Try not to use too many filler words.

An imam is leading a mosque prayer mass on a television screen with a speech bubble and two people are following along.

Image by storyset on Freepik

and re-colored by Byte author.

3. Use accurate text alternatives with audio or video media.

According to WCAG 2.1 AA, always include accurate text transcripts with audio and closed captioning (also known as subtitles) to videos.

A computer screen is showing the HTML code of a website and each code part is showing designated text, images, and analytics.

Image by storyset on Freepik

and re-colored by Byte author.

4. Use headings and their levels in a logical order.

People that use screen readers benefit from programmatically tagged headers. The World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) advises to order most important headings at rank 1 <h1> to least important at rank 6 <h6>.

Did you know?

Universal design for learning (UDL) is a model that values an accommodating and flexible learning environment to reach as many diverse learners as possible.

UDL is relevant when building any lesson, design, graphic, or any other material for learning!

Take Action

A winking feminine-presenting person with dark melanated skin and curly hair is raising a thumbs up to a certification.

Image by storyset on Freepik

and re-colored by Byte author.

Get started on making your learning designs more accessible:

Did you know?

There are many resources and departments dedicated to accessible instructional design. If possible, check out your learning and teaching center at your work or other state or country departments that can provide more insights. Because this Byte is for educational purposes, not all accessible design practices were addressed.

License:

Your feedback matters to us.

This Byte helped me better understand the topic.

#learning-to-learn

#learning-strategies

#practical-skills

#info

#education

#k-12

#applying-concept

#learning-approaches

New Bytes

We publish fresh Bytes daily, we can send you a notification when that happens.

​

Did you know?

Typefaces and fonts impact reading performance for individuals with varying disabilities. According to a well-known 2013 study by Rello and Baeza-Yates, the best typefaces or fonts for people with a learning disability such as dyslexia are sans serif, monospaced, and roman type fonts.

6

Sources:

1 https://www.freepik.com/free-vector/font-concept-illustration_11608215.htm#query=font&amp;position=4&amp;from_view=author

2 https://webaim.org/techniques/fonts/

3 https://www.freepik.com/free-vector/ui-ux-design-concept-illustration_31054806.htm#page=7&amp;query=design&amp;position=34&amp;from_view=author

4 https://www.w3.org/TR/WCAG21/#contrast-minimum

5 https://www.freepik.com/free-vector/click-here-concept-illustration_10838504.htm#query=website&amp;position=31&amp;from_view=author

6 https://www.dyslexia-reading-well.com/support-files/italian_study_on_fonts_2013.pdf

What about information and visual layout in design?

A smirking feminine-presenting person with a head scarf, long sleeve dress is posting their food dish image on their phone.

Image by storyset on Freepik

1
and re-colored by Byte author.

1. Use alternative text descriptions for images.

Use alternative text descriptions, also known as alt text, for all appropriate images in your digital courses, lesson, PDFs and other materials. Refer to WCAG 2.1 or other local or national guides for more details and exceptions.

2

A smirking feminine-presenting person with a head scarf, long sleeve dress is looking at a food dish image on their phone.

Image by storyset on Freepik

3
and re-colored by Byte author.

2. Use short descriptions and minimize information lines for content.

When possible, use 1-2 lines of text in lists or chunk paragraphs for easier readability, especially for learners with screen readers that hear the text. Try not to use too many filler words.

4

An imam is leading a mosque prayer mass on a television screen with a speech bubble and two people are following along.

Image by storyset on Freepik

5
and re-colored by Byte author.

3. Use accurate text alternatives with audio or video media.

According to WCAG 2.1 AA, always include accurate text transcripts with audio and closed captioning (also known as subtitles) to videos.

6

A computer screen is showing the HTML code of a website and each code part is showing designated text, images, and analytics.

Image by storyset on Freepik

7
and re-colored by Byte author.

4. Use headings and their levels in a logical order.

People that use screen readers benefit from programmatically tagged headers. The World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) advises to order most important headings at rank 1 <h1> to least important at rank 6 <h6>.

8

Did you know?

Universal design for learning (UDL) is a model that values an accommodating and flexible learning environment to reach as many diverse learners as possible.

9
UDL is relevant when building any lesson, design, graphic, or any other material for learning!

Sources:

1 https://www.freepik.com/free-vector/image-post-concept-illustration_9233828.htm#&amp;position=14&amp;from_view=user

2 https://www.w3.org/TR/WCAG21/

3 https://www.freepik.com/free-vector/annotation-concept-illustration_12781046.htm#query=short%20descriptions&amp;position=3&amp;from_view=author

4 https://webaim.org/techniques/fonts/

5 https://www.freepik.com/free-vector/mosque-online-service-concept-illustration_32044573.htm#&amp;position=3&amp;from_view=user

6 https://www.w3.org/TR/WCAG21/#audio-description-prerecorded

7 https://www.freepik.com/free-vector/software-integration-concept-illustration_18352184.htm#&amp;position=12&amp;from_view=user

8 https://www.w3.org/WAI/tutorials/page-structure/headings/

9 https://teaching.cornell.edu/teaching-resources/designing-your-course/universal-design-learning

Take Action

A winking feminine-presenting person with dark melanated skin and curly hair is raising a thumbs up to a certification.

Image by storyset on Freepik

1
and re-colored by Byte author.

Get started on making your learning designs more accessible:

Did you know?

There are many resources and departments dedicated to accessible instructional design. If possible, check out your learning and teaching center at your work or other state or country departments that can provide more insights. Because this Byte is for educational purposes, not all accessible design practices were addressed.

Source:

1 https://www.freepik.com/free-vector/certification-concept-illustration_12704417.htm#page=7&amp;query=website&amp;position=1&amp;from_view=author
Rumie logo

This logo isn't an ad or affiliate link. It's an organization that shares in our mission, and empowered the authors to share their insights in Byte form.
Rumie vets Bytes for compliance with our Standards. The organization is responsible for the completeness and reliability of the content.
Learn more about how Rumie works with partners.

License:

Recommended Bytes

🍪 We use technical and analytics cookies to ensure that we give you the best experience on our website. more info