When you’re learning a new concept or process, whether for work or school or fun, do you retain information better when you see a picture that represents what you’re learning? What about when you hear the information in a lecture, or get hands-on experience? Or, maybe you’re a learner that excels at grasping written content.
We all comprehend and retain information in different ways, but there are generally four primary learning styles: visual, auditory, kinesthetic, and verbal. In this four-part series, we’ll discuss each learning style and the digital accessibility considerations that will allow you to create both memorable and inclusive content. In part one, we address the visual learning style.
What is visual learning?
You want to create content on your website that will have a lasting impact, so you decide to include diagrams, illustrations, videos, and infographics. That’s what it means to target the needs of visual learning.
Visual (spatial) learners typically grasp content best when color, layout, and images are strategically used to drive a message. This might include supplementing written content with graphical representations of information. For example, on a website about a new kind of software, you might use screenshots of the program in action, rather than simply discussing the steps to use it. Or, you may use a graph to represent the benefits of the software.
You might also consider how to structure information on a webpage, making good use of headings and how the information is displayed. Headings can break up information into small chunks and point readers to a particular section you want to call out. They can link to other webpages or be placed in a callout box to call attention to important information.
Another strategy is to use visual cues. In an ad intended to sell the same software, color choice, text, and call-to-action buttons can be strategically placed to influence purchasing decisions. A sidebar, for example, can include a different font, color, and placement than the rest of the information.
What's accessibility got to do with it?
It’s important to consider how people with differing abilities and learning styles will perceive or interact with your content. If you’re targeting a segment of learners but aren’t including accessible content, your message may not reach a large portion of your audience. The good news is that there’s no need to forgo your visual content strategy. All you need to do is work a few small steps into your process to optimize content for your entire audience.
Creating accessible images
Images and diagrams offer an effective way to illustrate meaning to visual learners. They’re also useful for breaking up content and supporting text, an important consideration for people with dyslexia, for example.
However, you’ll also need to make your images accessible to people with visual disabilities. A primary way of doing this is through alt text. Alt text describes the function and appearance of an image and is integrated into HTML code. Writers of alt text should usually try to keep it concise but descriptive.
Using our software example above, if your website included a screenshot of menu options, you could ask yourself questions about the subject matter, the purpose, the aesthetics, and anything else of note in the picture to create the alt text. WCAG 2.1. suggests considering the following questions for deciding what text to include as your alternative to an image:
- Why is this non-text content here? (example: Why are the menu options in the screenshot? What are you trying to convey?)
- What information is it presenting? (example: Are the menu options settings options, account information options, or something else?)
- What purpose does it fulfill? (example: What’s the point of the screenshot? Why are these menu options featured?)
- If I could not use the non-text content, what words would I use to convey the same function and/or information? (example: How does the user access the menu options? What else about the screenshot is relevant to understanding it? Do the aesthetics, layout, or other items in the screenshot play a role in being able to understand the menu options or their purpose?)
If an image or logo is used as a link, it should still include alt text that describes the function and information presented. When an image is linked and serves as a navigation mechanism, should be in the same place on every page and always lead to the same location.
Accessibility in color
When creating visually stimulating content, color is important for helping people retain information. In e-learning courses, colors are sometimes assigned to words, phrases, feelings, or objects. Often those colors are already closely associated with the chosen concept. For example, red might be used for the word stop or green for tree.
Color also helps us remember companies or activities. In a virtual environment, the white ‘F’ in the blue box might bring to mind the social media platform Facebook. A black magnifying glass icon usually indicates we can search for something on a website.
But people with differing visual abilities don’t always perceive color in the same way. While color contrast is necessary, color itself can’t be the sole visual means of conveying information. For example, your website should never require someone to distinguish a color in order to complete a task. Avoid using language like, "the green box" or "the yellow tab" as the only ways of providing instructions. Provide clear labels or text instead, for example, "Box A" or the "Products" tab.
The colors you choose are just as important as their function or what they represent. They should have strong contrast to enable people to distinguish text and content from its background. Color contrast refers to the saturation of a color and the difference in light between the color and its background. For example, white text on a black background provides sufficient color contrast.
WCAG success criterion 1.4.3 provides the minimum contrast requirements. Be sure to test your color combinations to ensure their accessibility and make sure your site allows users to customize text color, use high contrast mode, or other tools that provide visual assistance.
Creating accessible videos and webinars
Videos are often used in training, educational, and marketing content to enrich understanding, explain information, or demonstrate concepts, products and services. Whether or not we primarily retain information through visual modalities or abilities, many of us can remember movies, cartoons, and commercials. For example, companies may use instructional videos to train employees because they’re generally effective teaching methods that help workers learn new tasks.
You can make your prerecorded videos and webinars accessible to your audience in a few simple steps:
- Include volume and caption controls on video players as well as appropriate color contrast so that controls can be easily located.
- Enable videos and webinars to operate with a keyboard, screen reader, or other assistive technology.
- Provide audiences the ability to pause or hide animations, audio, and moving, blinking, or flickering content, especially if it lasts beyond five seconds. It can be distracting, and for people with certain seizure disorders it can be dangerous. Flashes should stay below the three flashes threshold.
- Include audio descriptions, captions, and transcripts.
About audio descriptions
Using our software example, your website may include a prerecorded video or webinar that demonstrates your program. You might need to insert audio descriptions throughout that explain what’s on the screen.
Audio descriptions are essentially the verbal version alt text. They’re separate audio tracks with a voiceover that describes the action, characters, and scenes of a video or the on-screen content of a webinar. If your software’s menu options are featured on video like they were in the image discussed above, the audio description may be very similar to the alt text.
For prerecorded webinars, speakers may discuss information in a series of bullets on the screen and by using charts, graphs, or other images. Audio descriptions for webinars serve the same purpose as for videos. However, webinar audio descriptions will need to mention any bullet points a speaker skips over, any text in a chart or diagram or other image that’s not explained by the speaker, or any text on the screen the speaker doesn’t acknowledge.
Transcripts and closed captioning
Transcripts and closed captioning are required for videos to be accessible to people with auditory disabilities. Transcripts should be available for all prerecorded videos, including animated and multimedia videos, as well as webinars, and include:
- All spoken words
- Any text that appears on-screen
- Relevant actions, gestures, sounds, or changes of scene
Transcripts should be easy to locate, such as near the video or any links to it. You’ll want to identify each speaker by name, if possible, or indicate in some way who the speaker is, similar to how speakers are identified in a written interview. Think of a transcript as the written component to both audio and visual elements of a video.
Closed captioning is the best text-based option for displaying verbal content on-screen during a video.
Coming Up in Part Two…
In part two of our four-part series, we’ll discuss accessibility considerations for reading/writing learning styles.
