Over the past weeks and months, countless informational and tracking websites have been created to help people stay up-to-date on statistics, restrictions, health and safety precautions, news and announcements, and more. In the form of dashboards, infographics, charts, and graphs, resources ranging from a local focus to the global picture continue to pop up every day — and a lot of the information is very visual. To make this critical data available to more people, there are some key accessibility practices that must be followed.
Like any form of web content, there are standards that should be applied for improved accessibility for people with a variety of disabilities that might impact how they use the web. Captions, for example, are critical for conveying audio information. Those practices should continue to be followed. The key considerations outlined here, however, are specific to how visual the COVID-19 content has been and some basics that content creators should keep in mind.
Images (and anything that isn't text) must have a text alternative
Screen readers can be pretty customizable and some of what they can do, and how they do it, is kind of complex. However, on the other, you can largely understand how they work and make your products more accessible by knowing one simple point: they look for and communicate text.
Anything, whether it is in an actual image file or in any way uses the way something looks to give people the information, needs that information available and easy to find in text.
Text and text alternatives need to make sense
This is so obvious it shouldn't even be listed here, right? Maybe in concept, but in practice this warrants a big reminder.
Just because something is already text or alt text has been provided doesn't mean it's necessarily helpful or in a format people can easily use.
- Maybe there is a dynamic chart that is always pulling in the latest data into its feed and the developers have already made sure that the data points are text, making them available to screen readers. That's a great start, but it's only a start: what else is available in the structure that's available to screen readers that lets a user know what that data point refers to and how it relates to any other information? Random text without context falls short.
- Alt text for images and other non-text content needs to be accurate and descriptive. If an infographic displays a lot of information, but has alt text of something like "infographic showing latest numbers," then that text is the entirety of the information that would be available to a screen reader user. Any alt text isn't good alt text; accurate and descriptive alt text is good alt text.
- Alt text needs to be complete. So often, content creators will take the time to provide pretty good alt text for visual information, but not realize to include everything that's important. For example, maybe there's a video or a poster that has all of the on-screen information duplicated in text except for one critical piece — something that happens all the time and takes away from the usefulness of the whole thing. A lot of times these oversights will be on-screen elements like web addresses the user is supposed to visit, phone numbers they're supposed to call, or maybe a speaker's or organization's name. Without this critical information being available in text, many people will not have access to it.
Images of text should have limited use
As noted, text is naturally pretty accessible to screen readers; images are naturally not. This is one reason that containing a lot of important information inside an image should usually be avoided.
But there are other reasons, too, and they have to do with the actual visual presentation and the ways images of text can make that difficult for many people. If someone needs to adjust font, size, or color to make content readable to them, they can't do that to an image. If someone needs to magnify or pinch content to make it larger or take a closer look at a specific area, images can blur and the information remains in a fixed position, instead of wrapping or adjusting to match user preferences and device differences. Real text, however, is much more flexible in all of these ways, and using real text can be the difference between whether or not some people can access the content.
Colors need sufficient contrast
Color contrast is what determines whether or not most people will be able to read the information. As critical as proper color use is to accessibility, it's just as easy to figure out if you're meeting the standards.
- Learn more: What is color contrast?
- Check color contrast for free: a11y® Color Contrast Accessibility Validator
Most content should meet a minimum color contrast ratio of 4.5:1.
Colors are great, just not on their own
Designers are using colors heavily to show trends and other information visually and quickly. As long as the color has sufficient contrast, there's nothing wrong with using color in this way — but color alone can't convey information.
Red can't be the only way to let someone know they're looking at a danger zone. Green can't be the only indicator that the status of something is in a desired place. Not everyone perceives color or detects it in the same way, so it can't be the only visual cue that conveys meaning.
But how do know if a color is being used to convey meaning? Pretend it isn't there. Does the information still make sense? Is everything you're made aware of by the presence of color still apparent in the absence of color? If yes, then it's likely this standard has been satisfied.
Get a free scan or contact us if we can help
You can start with a free and confidential website accessibility scan or contact us for a 30-minute consultation.
