In the last few years, interactive media has gone from a futuristic novelty (remember Netflix’s hit Black Mirror episode, Bandersnatch?) to a practical way to engage audiences across a wide range of industries. It is now being used in entertainment, eLearning, and eCommerce.
While interactive media can be both fun and useful, it presents new challenges for creators to ensure that the gamified aspects of the content can be accessed and understood by everyone.
At VMG Studios, it’s our belief that everyone should be able to enjoy the same content regardless of differing physical and cognitive abilities. Creative content that can be understood by all is not just considerate for those who require assistance, it is a smart business decision that allows the widest audience possible to understand your message.
As VMG graphic designer Kay La Belle says, “Good design is accessible and not always what you would expect. It goes beyond how it looks. A good designer will make it look cool; a great designer will make sure everyone can easily understand it.”
This article will outline ways to ensure your interactive media is accessible for people of all walks of life and abilities.
Understanding Accessibility in Interactive Media
As interactive media becomes increasingly prevalent, so does the importance of making it accessible to those who may find difficulty engaging with the interactions.
Legally required accessibility standards are categorized as either WCAG AA, which is used to reach the widest general audience, or WCAG AAA, which is a more targeted criteria for specific physical disabilities. VMG Studios uses WCAG AA accessibility standards by default unless the target audience specifically contains a higher concentration of people with known disabilities.
For example, if we were creating an interactive presentation for the AARP, we would opt to use WCAG AAA standards because the AARP will likely have a lot of members who are visually impaired.
A lesser-known method of accessible design targets people with invisible disabilities. Invisible disabilities include things like autism, general learning disabilities, dyslexia, PTSD, and ADHD. This is a much newer field of study and does not have legal requirements yet, however, it certainly adds value from a business perspective.
Invisible disabilities are extremely common among the general population. Peer-reviewed UX studies have shown that there is a much higher ROI for digital products that were designed with invisible disabilities in mind.
Here are a few examples of strategies used to design for accessible interactive media that target both physical and invisible disabilities:
- Use colors that have a 4.5:1 contrast ratio in compliance with WCAG AA standards to assist the visually impaired.
- Provide relevant alt text for all images and buttons so they can be parsed by a screen reader.
- Include closed captions for videos.
- Enable “tabbing” through the interactions to negate the need for precise on-screen selection.
- Guide the user using UX techniques utilizing a combination of visuals, instructions, and layout.
- Use words and visuals in tandem whenever possible. For example, if you’re instructing the viewer to attach a file, include a paper clip icon so the button meaning can be surmised.
- Create multiple cues to prompt the user, such as a hover function over buttons to indicate that they should be clicked.
- Avoid using vague directives like “Learn more” or “Continue” and instead use literal calls-to-action like “Download PDF” “Take Quiz” or “Next Page” to instruct the viewer.
- Read all instructions and answer options as they appear on screen to make sure the same information is being provided both through audio and visual.
How to Make Your Content More Accessible
While the recommended accessibility deliverables vary from project to project depending on the content, project type, and intended audience, VMG Studios typically recommends the following for most projects, including interactive media, to make the content more accessible.
Include Closed Captions and/or Subtitles
Closed captioning (CC) is the text version of a video’s audio track that is overlaid on screen to assist those who are deaf or hard of hearing to understand the video’s content. Closed captioning not only shows you what’s being said but also describes other sounds and context clues that help a viewer follow the scene.
For example, if an Amazon delivery driver is knocking on the door to deliver a package, closed captioning would include this text on the screen (Door knocking). If someone is yelling, the text would say (Yelling). It even gives cues for silence (Silence) and music (Energetic music plays).
Closed caption files for videos are delivered separately as a Sidecar (.srt) file so they can be turned on and off by the viewer. Interactive and web deliverables will have closed captions delivered as a WebVTT (.vtt) file.
When designing graphic overlays, we also take into consideration “caption safe areas” at the bottom of the screen. This ensures that when viewers turn on captions, they won’t miss anything important behind the text.
This differs from subtitles, which are burned into the video (not toggled on and off via settings) and are typically used to translate for viewers who don’t speak the video’s language.
We can include subtitles upon request; however, it is beneficial to have this information prior to the project kick-off since adding subtitles to the video affects how the video is shot and how graphics are overlaid into the video in post-production.
Descriptive Audio
Descriptive audio assists and informs those who are visually impaired by providing an audio play-by-play of the actions, characters, scene changes, on-screen text, and anything else of importance to provide context for the video if it can’t be watched.
We create these files by first writing a script of the final video’s audio track. Then, we write and record soundbites describing what is happening on-screen and insert those into the pauses within the audio track so the viewer can still hear everything happening in the video while also listening to the descriptive audio.
The descriptive audio is always recorded using a different voice talent than the video’s voiceover artist so there is no confusion as to who is speaking.
Oftentimes, we use a voice of the opposite sex, as well, to assist in differentiating between the voices. We then export and deliver this as a separate video mp4.
Color Blindness Testing
While most brand guidelines already take the color blindness spectrum into consideration, it’s still incredibly important to intentionally design in a way that makes the visuals distinctive for those who struggle with color differentiation.
This means that our designers work within a certain color story to avoid colors that are often indiscernible to the color blind.
For example, we wouldn’t choose to put red and green together, since one of the most common types of color blindness is Deuteranopia, or red-green color blindness. One of our producers happens to be color blind, so after we run the images through the contrast checker, we often reach out to him for extra color quality assurance!
READ: BRAND COLOR PSYCHOLOGY: MEN VS. WOMEN
Case Study: Interactive Program
Now that you understand the various elements of accessibility, here is an example of how they’ve been applied to an interactive course created by VMG.
A tech giant came to VMG Studios to develop an online, pre-required training course to educate employees about important inclusion and diversity topics. This training was designed as a precursor to in-class training that allowed for deeper dives into the topics.
VMG Studios recommended an engaging, entertaining way to educate their employees by developing an interactive eLearning program. The course was set in one of the company’s own spaces where the products, ads, and content came to life with professional, on-camera talent.
To ensure that we were incorporating more than just the storefront, we started, transitioned, and ended the course modules with a warehouse employee on-camera working on their computer. This enabled us to make sure that we were engaging all audiences within the company, which made the course itself inclusive.
Additionally, VMG Studios incorporated video provided by the company within each module, which featured real department leaders and executives discussing the importance of diversity and inclusion with their teams and how it improves the business overall.
When designing the course, VMG took accessibility into account to ensure that it would be easily understood by the majority of viewers.
Closed captions were provided for all videos included in the course, and the interactions were planned with user accessibility in mind.
This means that the selected types of interactions are straight forward and able to be completed by most users. For example, fill-in-the-blank questions aren’t very accessible since allowing a user to enter in their own answer opens up too high of a probability for error. Instead of responding based on understanding the concept, the question then depends on the user’s knowledge of the English language, causing programmatic bias.
Also, the instructions on the screen were exactly the same for those listening to the voice-over of the course, so everyone receives the same information regardless of how they’re consuming the content. Multiple choice questions, which are regarded as the most accessible kind of interaction, and the corresponding answers were also read in the voice-over. Multiple-choice questions also reaffirm what the user already knows, which causes a release in dopamine, in turn improving learning retention and propelling the user to move forward.
Additionally, when programming the course, we included keyboard shortcuts for the interactions, so success isn’t dependent on an on-screen action. The user could also tab through the interactions instead of relying on clicking to move forward.
Visually, the course buttons were created to be large enough with high contrast so those with vision impairments could see them. Boxes were also highlighted after they were selected, which confirms for the viewer that they were selected. If the user has very low vision, the entire course was able to be read by a screen reader.
While VMG did take accessibility into account when creating the course, there are other strategies that can be implemented to take it one step further. A descriptive audio track could have been included to fully convey what was happening on screen to those unable to see for themselves.
The Importance of Accessibility in Interactive Media
Having a disability shouldn’t exclude people from hearing your message, since everyone deserves to have the same opportunities to watch, learn, and engage with all media.
While designing for accessibility does create an additional layer of consideration within a project, ultimately, it only improves the design, because design without utility is futility.
Promote equality within the content you share while expanding your message’s reach by planning for, and including, accessibility best practices within your content. If you need assistance getting started, VMG Studios is happy to help.
Click the image below for a free closed captions vs. subtitles cheat sheet
