Emily Paterson

Learning Experience Designer

Educational Materials: Making Learning Accessible

Duration: May-August 2023

Overview: Educational materials designed to help students create accessible websites on a popular e-portfolio platform.

Emily is talking and the caption "Everyone deserves to be included in." is below her.

Background:

As an intern for the non-profit Teach Access, I was asked to create an introductory video and tip sheet to support the awareness of digital accessibility for one of their partner organizations, Digication, which is an e-portfolio platform utilized by over 7,000 schools. 

At this point, Digication’s platform had a few built-in accessibility features, such as a space to add image alt text or video captions, but it did not provide any additional instructions on how to properly use these features nor did it emphasize the importance of doing so.

Audience & Challenge:

As an e-portfolio tool, Digication is primarily used by university students who wish to showcase their work and achievements to a professor, prospective employer, and/or admissions officer. Coming from a variety of fields, these students likely have a limited understanding of what digital accessibility is and why it’s important. By catching students at this critical point in their lives, these educational materials have the potential to make a big impact in ensuring future products and services are created with accessibility in mind. 

Goal:

I aimed to write an engaging video script, using plain language, to explain why accessibility matters to a student audience. To accompany that video, I also wanted to create a detailed tip sheet that outlined accepted best practices for digital accessibility with a specific focus on how to implement these on Digication.

Creation of the Video:

Aiming to create a video script to last around two minutes, I first began by taking a deep dive into Digication’s existing communications. Their catchphrase is “Make Learning Visible,” which I thought would make a great starting point for discussing that not everybody can perceive information in a visible way. 

“For example, someone with a visual disability may have trouble seeing a photo that showcases your science project. Or someone with hearing loss might not be able to engage with your video that depends solely on your voice to explain something.“

By explaining these common barriers for users with disabilities, I aimed to contextualize the need for accessibility practices to avoid excluding these users from student websites.

“With over one billion people with some form of disability, it is crucial that your website will match the needs of this significant proportion of the population.“

As I continued, I also wanted students to note that these accessible practices will ensure that their target audience (employers, admissions offices, etc.), regardless of their abilities, will be able to engage with the work that they are showcasing online. 

“And keep in mind that everyone benefits from accessible practices! By making text large enough to read or adding captions, we all get to understand and enjoy things more clearly and easily.“

Once the script was written and edited, I then had the opportunity to act as the video spokesperson when we filmed in August. As someone more used to being behind the scenes, I appreciated the challenge to exercise my presence in front of the camera. After filming, the video was then edited by the team at Digication. 

Emily sits at a table in an office room while being filmed on a phone camera.
Behind the scenes photo of me filming the video!
The finished video on Digication’s site

Creation of the Tip Sheet:

As I embarked on creating an accessibility tip sheet, I knew that I wanted to blend existing best practices with instructions on how to implement these practices on Digication. Drawing largely upon the Web Content Accessibility Guidelines (WCAG), I aimed to synthesize these guidelines into a few broad tip categories that would be most relevant to users creating an e-portfolio:

  • Color Contrast
  • Text Styles
  • Added Context
  • Heading Styles
  • List Styles
  • Tables
  • Capitalization
  • Alternative Text
  • Multiple Avenues for Multimedia
  • Unusual Words, Idioms, Abbreviations, and Acronyms
Page of 1 of the Make Learning Accessible: Digication Tip Sheet. Color Contrast. Text color should strongly contrast against the page background so that it is readable by those with moderate visual impairments and in various light conditions. Use a Contrast Checker tool to determine the contrast ratio of your text. Try to achieve a 4.5:1 ratio for normal text and a 3:1 ratio for larger text (18pt+). Text Styles. Instead of relying only on color to emphasize text or indicate meaning, try to utilize different text styles (bold, italics, underline) to include people with colorblindness or low vision. For example, when creating a link to an external site on your website, ensure that you indicate that it is a link by underlining it (in addition to changing the color). Added Context. Use descriptive titles, headers, and link text to provide context to your work. For example, link text should indicate what you are linking to (ex: “My Short Film”) rather than something generic like “Click here.” Heading Styles. Use headings to indicate a hierarchy of content. To do so, click on the button with an uppercase and lower case T and choose between “Heading” or “Paragraph.” For titles, select “Heading,” instead of just making text bold or increasing the font size. This practice is especially helpful for people who are visually impaired and use screen readers, which are devices that convert text on a screen to speech.
Page 2 of Make Learning Accessible: Digication Tip Sheet. List Styles. When writing a list, try to use a bulleted or numbered list style. This type of properly formatted list will help people who use screen readers to quickly navigate through your website. Tables. Be intentional when putting content into a table. Ensure that you are properly formatting your columns and rows and appropriately naming your headers. Do your best to simplify your table usage as complex tables can be difficult to follow for screen reader users, who have to remember the headers as they listen to all of the content. Capitalization. Try to be intentional with your capitalization. Capitalizing all the letters in a word or an entire sentence can be difficult to read. It will also make a screen reader read out each letter individually instead of the word itself. Alternative Text. Write alternative text (alt text) for images, graphs, and charts. Alt text provides a textual description of a visual element on a website so that screen reader users can understand its purpose. If the image is purely decorative and does not relate to the content, do not add alt text. To write alt text for an image on Digication, click on the “Module Settings” cog button to the right of the image. Then, open the dropdown menu “Image Settings.” Toggle the button from “Off” to “On” for “Alt text.” Write a description of the image that best describes the visual content.
Page 3 of Make Learning Accessible: Digication Tip Sheet. Multiple Avenues for Multimedia. When it comes to multimedia, like video, audio, and other interactives, try to ensure that there are multiple sensory paths to engaging with the content. For example, a video may require subtitles and/or a transcript to ensure that it can deliver the same information to a user who is deaf or hard of hearing. To add captions to a video you upload onto Digication, you must also upload a subtitle file (in the form of a .vtt text file). This can be created using a text editor, such as Notepad or TextEdit. Subtitle files must be formatted in a very specific way; watch this video for more information. Unusual Words, Idioms, Abbreviations, and Acronyms. Provide context to words or phrases that may be unfamiliar. Not everyone has the same vocabulary, so defining unusual words and idioms will ensure a shared sense of understanding. Additionally, be sure to indicate what you mean by certain abbreviations and acronyms at least one time before using them. For example, the World Health Organization (WHO).

For all of these tip categories, I gave an overview of what they entailed and how a user could generally adjust their content to become more accessible. For three of the categories (heading styles, alternative text, and multiple avenues for multimedia), I also wrote step-by-step instructions for locating and practicing these accessibility features on Digication. These instructions were previously non-existent for users.  

Impact

As the foundational creator of both the video and tip sheet, I had been eagerly waiting to see how my work would be integrated within Digication’s platform!

In April 2024, Digication announced a new feature that flags accessibility issues, including images without alt text or videos without captions. Before they can publish their website, users will have to address any of these issues. At that point, my video is introduced alongside a drop-down menu of the tips that I wrote. These educational materials have the chance to reach and educate the millions of students that use the platform. It’s an exciting moment for me to play a role in building a future where accessibility is at the forefront of people’s minds. 

Accessibility Feature on Digication; it includes the titled content from the tip sheet that I created.

Emily Paterson

Learning Experience Designer

Send me an email at

emilyypatersonn[@]gmail.com