Chapter 3. Designing for All

Accessibility 101

You’ll find that almost every e-learning platform is 508-compliant, meaning that it is accessible and meets 508 guidelines. Essentially, Section 508 of the Rehabilitation Act states that any institution receiving federal funding, including schools and universities, must provide disabled users “access to information comparable to the access available to others.”1 Two notes of caution here. First, although a tool may be accessible, many of its features may not be. Often interactivity options like drag and drops are not compliant; neither are videos that don’t have captioning. Additionally, to make a tutorial accessible using most e-learning tools will require additional development. Articulate Storyline is 508-complaint, but you must individually add accessibility information to any element on the screen that conveys information. As a best practice, you should integrate this additional work into your workflow, and not treat it as something to add later in the development process. Second, these guidelines are the minimum that you should use in any tutorial. The Web Content Accessibility Guidelines (WCAG) are stricter than the 508 guidelines. For example, Section 508 and WCAG both call for captioning of audio content, but WCAG also calls for audio controls like the ability to stop, pause, and adjust the volume of audio.2 For a complete list of WCAG guidelines, see the General Services Administration’s “Guide to Accessible Web Design and Development.” Many of these guidelines may not be relevant to tutorials, so I have included here the most useful accessibility tips for tutorial development.

Guide to Accessible Web Design and Development

https://www.section508.gov/content/guide-accessible-web-design-development/

Text Alternatives

Some users may use a keyboard or a screen reader like JAWS to go through your tutorials. As a result, you must include text alternatives for any elements on the screen that need to be read by the screen reader. We are pretty familiar with alt tags for images but may not be so familiar with alt tags for buttons, multiple-choice questions, and boxes. Any element on the screen that is not purely decorative must have a tag that can be read by a screen reader.

Video

Videos should have both closed-captioning and a video transcript. Including a transcript not only allows for the use of screen readers but also allows the learner to go at their own pace and choose how they would like to access the content. There are a number of free and paid captioning services. However, the free ones, like YouTube, tend to lack accuracy. Rev, a paid service that costs $1.50 per minute, claims to have a 99 percent accuracy rate.3 As a best practice, add captioning only when you are certain you will not be making any additional changes to the video. Learners should also be able to control the video and adjust the volume. Additionally, a video with sound should not start automatically, but rather the learner should choose when to start the video.

Rev

https://www.rev.com/

Tab Order and Focus

Users with visual impairments and those with motor skills disabilities may not be able to use a mouse or trackpad. Instead they use the tab key or space bar to move through a tutorial. The tab key will read any elements on the screen that have an alt tag. However, as part of the development process, you must decide in which order the tags will be read and also which elements do not need tags and will be ignored. Similarly, you will need to decide what to do about interactive options that cannot be used with a tab key or space bar, such as drag and drops, slides, and matching questions. You should either avoid these features or include an equivalent alternative.

Tables

Tables are a great way of organizing and presenting content. However, they are not automatically accessible. Individuals using screen readers do not automatically know that a table is present. To make tables accessible, you will need to add a description for the table, headers for rows and columns, and HTML markups for individual cells.

Color

Designing for all means designing for a spectrum of vision disabilities from individuals with low vision to those with color blindness. Some color combinations may look good together from a design standpoint but may be difficult to see. Black and white has the highest contrast, but from a design point of view that combination is rather boring. The WCAG provides standards for minimum text and background contrast and ratings from AAA to Fail.4 For normal size text, you want to achieve an AA rating. You can easily check the contrast ratio of your text with the WebAIM Contrast Checker. On the topic of color, you don’t want color to be the only way that you communicate information. For example, if you have two buttons, a green one for Yes and a red one for No, you should also include the words Yes and No. In addition to words, you can also give the two buttons different shapes to further communicate information.

WebAIM Contrast Checker

https://webaim.org/resources/contrastchecker/

Universal Design: Going beyond Accessibility

Universal design differs from accessibility in that it is broader and not aimed solely for individuals with disabilities but rather for all individuals. Originally created by architect Ron Mace, universal design is “the concept of designing all products and the built environment to be aesthetic and usable to the greatest extent possible by everyone, regardless of their age, ability, or status in life.”5

The seven principles of universal design are

1. Equitable Use
2. Flexibility in Use
3. Simple and Intuitive Use
4. Perceptible Information
5. Tolerance for Error
6. Low Physical Effort
7. Size and Space for Approach and Use6

Some examples of designs that incorporate these principles are sidewalk curb cuts, doors that open automatically, scissors that can be easily used by right- and left-handed individuals, adjustable desks, and Ikea assembly instructions. So how is this all related to creating tutorials? Related to universal design and based on the science of how people learn, Universal Design for Learning (UDL) focuses on minimizing barriers to learning for all learners.7 Learners come to us with diverse motivations, diverse educational preparedness, and diverse linguistic and cultural backgrounds. The UDL guidelines provide educators with a means for meeting the needs of all learners in the same educational situation. The UDL principles are

1. Provide multiple means of engagement [how students interact with teacher, the content, and other students]
2. Provide multiple means of representation [how learning materials are delivered to the learners]
3. Provide multiple means of action and expression [how students show they achieved the learning outcome]8

Let’s take a closer look at how these principles can be used in the design of a tutorial.

1. Multiple means of engagement: Like the library guides and websites we create, our information literacy tutorials are accessed by users with many different motivations and often, in the case of tutorials, little intrinsic motivation. To better motivate and engage students, allow students to choose from a number of different topics and levels. For example, a tutorial on keywords and searching can be taught in the context of any research topic. Having the student choose the topic that interests them most will lead to more motivation to complete a tutorial.
2. Multiple means of representation: In addition to building engagement so that learners finish a tutorial, this principle focuses on effectiveness of tutorials. Although the theory of learning styles has been shown to be little more than a myth, learners may have preferences for how they wish to consume content.9 Additionally, not all students will have access to the same technology or have the same technology skills. If using video or any type of interactivity in a tutorial, you will also want to include a text and images version or even a plain text version.
3. Multiple means of action and expression: Ideally this principle means students have the option to show what they have learned with and without the use of technology. For example, some learners may create a presentation with slides, others may want to write a paper, and others may want to give an oral presentation. With online tutorials, learners are limited by the tool the tutorial is created in. However, learners should be given the option to choose how they will be assessed. Many tools allow for a number of different interactive options and question forms, including text response boxes, multiple-choice questions, hot spots, and matching. Some learners may also prefer interacting with other students. Tools like Padlet allow users to see what others have written on a topic and add their own content in the form of virtual sticky notes.

Padlet

https://padlet.com/

Making It Even More Universal

Bad navigation can render an otherwise great tutorial almost useless. Navigation should be intuitive, and the learner should not have to think about how they will move through a tutorial, answer a question, or exit the tutorial. They should readily know which parts of a tutorial are interactive, which text is hyperlinked, and what will happen when they click a particular element. Learners should always have a way to move back and forth through a tutorial and return to the beginning. Not allowing the learner to move back and forth can lead to decreased motivation. However, some learners may move through content too quickly and skip vital information. If possible, allow more advanced learners to move more freely through a tutorial while restricting the movements of novice learners. A common navigation issue is double navigation, where there are two different ways to move through a tutorial, such as a menu and an arrow, which can confuse learners. Any double navigation should be removed. If your tutorial is visually complex and includes some type of game that needs instructions, learners should be given the option to skip through the instructions. You should also include a Help or a Hint button where users can get extra help if needed. Again, as much as possible we want to avoid boring and frustrating the learner. If your course has several different parts that users must complete, include a road map or path so they can see what they have completed and what lies ahead.

Culturally inclusive teaching “is an approach to teaching that incorporates attributes and characteristics of, as well as knowledge from, students’ cultural background into instructional strategies and course content to improve their academic achievement.”10 As librarians, we teach all students from traditional freshmen to first-generation immigrants to foreign graduate students. Additionally we build our tutorials without ever having met our learners. This makes it much harder to design tutorials that reflect who our students are, but it is possible to create tutorials that are more inclusive. Having created tutorials for students from across the globe, I have come up with the following best practices:

• Avoid any slang, lingo, or jargon, especially library jargon.
• Avoid references to popular culture, current events, US history, and other topics that are overly US-centric.
• If you are using images or characters, make sure they are racially, ethnically, and religiously diverse and represent different sexual orientations and gender identities.
• Avoid images that show stereotypical roles of women and men.
• Do not use topics that could be considered taboo in other cultures.
• Avoid topics that could cause stress based on past trauma.

Notes

1. General Services Administration, “IT Accessibility Laws and Policies,” last modified July 2020, https://www.section508.gov/manage/laws-and-policies/.
2. General Services Administration, “Guide to Accessible Web Design and Development,” last modified March 2019, https://www.section508.gov/content/guide-accessible-web-design-development/.
3. Rev, “Closed Captioning Services,” under How It Works: Step 2, accessed May 2, 2022, https://www.rev.com/services/closed-captioning-services.
4. Nothing Magical, “Guide,” Contrast, accessed January 14, 2022, https://usecontrast.com/guide.
5. Center for Universal Design, “About the Center: Ronald L. Mace,” accessed January 1, 2022, https://projects.ncsu.edu/ncsu/design/cud/about_us/usronmace.htm.
6. Centre for Excellence in Universal Design, “The 7 Principles,” accessed December 24, 2021, https://universaldesign.ie/what-is-universal-design/the-7-principles/.
7. CAST, “The UDL Guidelines,” ver. 2.2, accessed November 11, 2021, https://udlguidelines.cast.org.
8. CAST, “UDL Guidelines.”
9. Joseph (Mick) La Lopa, “The Difference between Bigfoot and Learning Styles: There May Be Better Evidence to Support the Existence of Bigfoot,” Journal of Culinary Science and Technology 11, no. 4 (2017): 356–76; Paul A. Kirschner, “Stop Propagating the Learning Styles Myth,” Computers and Education 106 (March 2017): 166–71, https://doi.org/10.1016/j.compedu.2016.12.006.
10. T. Howard, “Culturally Responsive Pedagogy,” in Encyclopedia of Diversity in Education, ed. James A. Banks (Thousand Oaks, CA: Sage, 2012), 550–52.