By Kennedy Willingham, Oklahoma ABLE Tech Communications Intern
In today’s digitally powered world, there are numerous ways to communicate and interact with each other. So, how can we find balance between what we want to portray through our digital content and creating that content in an accessible way.
Having accessible digital content is important! It allows all individuals to access and benefit from your content, regardless of their access method! Accessible content leads to equal opportunities, meets legal standards, and provides an improved user experience for all viewers.
One thing to keep in mind as you create accessible content is that the goal is an equivalent experience. By designing things as you normally would, and adding accessibility practices to your process, you’ll be able to do just that!
Use Good Color Contrast
A great place to start your journey in creating aesthetically pleasing, yet accessible, content is by maintaining appropriate color contrast.
The Bureau of Internet Accessibility defines color contrast as “the numerical value assigned to the difference in light between the foreground and the background.” An example would be the colors of your content’s text and background and how easily they can be distinguished from one another.
A great resource to check your contrast values is the WebAIM Contrast Checker. This tool not only includes a contrast checker, but the recommendations for color contrast ratios depending on size and emphasis (i.e., bold, italicized). The most important numbers to remember are:
- Normal text should have a contrast level of at least 4.5:1.
- Large text (14 pt. bold and higher or 18 pt. regular and higher) should have a contrast level of at least 3:1
As an example, the contrast value of the blue background and the white elements on the graphic below is 6.29:1, which meets the WCAG AA criteria!
Alt: White ABLE Tech logo on a blue background and www.okabletech.org underneath it. There are white swirly elements around the edges.
Optimize Graphic Content
This aspect of design accessibility has multiple layers, but don’t get too overwhelmed! Just like a cake, each layer stacks on top of the previous one. So, once a starting point is defined, you’ll catch on in no time!
It’s important you keep your audience in mind when working with graphics, especially those who use screen readers or other assistive technology (AT) to access content. When balancing aesthetics and accessibility in your graphic content, keep these things in mind:
Design simple graphics
Making your graphics simple as a first “layer” will set a good structure as you develop the rest of your content. This isn’t to say you can’t have fun while designing! There’s a way to maintain high visual interest and make your graphics accessible, and that’s done primarily by keeping the amount of text you include in your graphics as minimal as possible.
Think of your graphics like a billboard. You want something that will grab your audience’s attention quickly and draw them in to your written content.
Don’t forget about text alternatives
Text alternative elements are crucial for accessibility! These written descriptions of images, graphics, and videos convey the meaning of the visual elements in your content.
Remember those layers we were talking about? Text alternatives, like alt text, captions, and transcripts are the second layer of your cake! For example, all the text that is included on a graphic should be included in its alt text.
So, if you have blocks of text on your graphics, those can actually be a barrier to folks who use AT to navigate your content. This is because AT can't read text that is locked inside of an image. If you don't add that content to the image's alt text, then people can't access it.
If you still have questions, or need help further understanding, check out this Harvard University article: Write Good Alt Text to Describe Images.
Remember, the more descriptive you are with this “layer,” the better your content will be conveyed to users who are unable to visually interpret it!
Limit Emojis and Other Special Characters
As fun as emojis and other special characters may be, we as content creators must be mindful of how they are translated by screen readers. As was mentioned in Peyton’s blog, Are You Reaching Your Entire Audience? Three Tips to Make Your Social Media Content More Accessible, each emoji has a description that is announced by screen readers.
So, what do we do to find the balance? Here are a few tips:
- Use emojis in moderation. This will limit confusion in your web posts and provide a smoother delivery to screen reader users.
- Place emojis at the end of your written content. This allows for prioritization of content and keeps interruptions to a minimum for AT users.
- Keep emojis in your captions only. Including them in things like alt text can clutter your descriptions.
Other Resources
Visit our Text Alternatives , Writing Content, and Color webpage for a more extensive list of resources in testing your content for digital accessibility.
You can also check out an article from Sprout Social which includes 8 guidelines to make social media posts more accessible.
Oklahoma ABLE Tech is Oklahoma’s Assistive Technology (AT) Act program. As part of the organization’s mission, the digital accessibility team offers training and technical assistance on topics related to digital accessibility, as well as accessibility evaluations of websites, web applications, and other types of digital content. To learn more about digital accessibility, you can visit the Digital Accessibility Program webpage or send an email to abt.a11y@okstate.edu.