Tips and Tricks
Accessibility: The Good, the Bad, and the Ugly of Graphics
If you are viewing this from an email, you’ll note the beautiful infographic below that has been embedded into the layout of our email template. If you are viewing this from the Tarleton website (all of these emails reside at the Tips and Tricks section of the CMS Tutorial Website), you’ll note that it has been embedded into our website template. Maybe you are looking at this from your desktop computer. Maybe you are looking at this from your mobile device. These different points of view, along with those of disabled users, can determine how well your graphics have been implemented.
What are the good, the bad, and the ugly of adding graphics?
The Good: Graphics are used to convey thoughts and feelings. Sometimes they are used to educate and inform. Graphics provide a splash of color otherwise not included on a largely text-only website. They engage your users. They provide calls to action.
The Bad: Graphics can be distracting from your message. They can be misleading. They can also discourage your users from viewing your content. Sometimes graphics can be hard to read or understand. In the case of our educational institution, they can sometimes be inappropriate, unprofessional, and not support the mission of Tarleton State University. At our worst, they can infringe on privacy, copyrights, and trademarks.
The Ugly: One of the biggest accessibility issues reported across Texas agency and university websites is inaccessible graphics. This includes the misuse of graphics where alternative text should be used along with the misuse of alternative text to describe these graphics.
The above example from WebAIM (Web Accessibility in Mind) is inaccessible. You might be thinking this is ironic, since the information specifically describes ways for web designers to make websites more accessible. No worries. Accessible examples are shown later on.
Why is it inaccessible?
- All relevant, content-related images must have alternative text. There is so much content on this image that needs to be translated to text, it would need its own page to describe it. Alternative text is used to provide descriptions that don’t go to an entirely different page. Most screen reader users suggest a small character limit for these descriptions: about the length of a Twitter tweet (less than 140 characters). This image goes beyond that character limit just based on the amount of text on the image.
- All content should be readable (or legible) on any device. Imagine if this was posted on Facebook or Twitter (or any number of other social media sites). If you selected it on your mobile phone, the first thing you’d notice is that you cannot read the text. The second thing you’d notice as you tried to zoom in on the image is that the application won’t allow you to navigate to all parts of the image. Because the text is built flat on the image, a user cannot highlight it, copy it to another application, or enlarge it to become more readable. Should any of the colors not contrast well for a color blind user, they cannot change the colors of the text to view it, since they cannot select it.
What should you consider when creating web graphics?
First and foremost, think about what “web” means in reference to graphics. This is not what you typically see off a brochure or magazine. Brochures are meant to be printed, not viewed from a browser. They serve an entirely different purpose from web graphics. Web graphics support a message that must be flexible enough to be read on any device.
WebAIM made an accessible version of this infographic that can be viewed from a browser. If it seems kind of boring with just some text and graphics on the side, also note that a more colorful and accessible version of this infographic was also referenced on their website.
Web technology has improved in ways that allow us, in Web Services, to provide you with more accessible graphics, should you want to get similar results to this example. However, there are some things you can do on your own:
- Separate images from text on your graphics. For most content, consider images as the main focus and place the text on the side as actual text – not another graphic.
- If you must have text on your images, use it in extreme moderation. Remember your alternative text will have to include all the text seen in the graphic, and you have a small “Twitter tweet” character limit to remain in.
- When using text in a graphic, take note of the contrast of the foreground and background. Do not use dark colors (e.g., purple and black) next to each other. The same goes for two very light colors. Do not use colors that color blind users cannot differentiate together (e.g., red and black or red and green).
- If you need to put a lot of text in a graphic that must be viewable via a browser, such as a diagram or graph, provide a link to a page dedicated to describing the graphic.
- If you want to provide users with a flyer or brochure off your website, consider making these linked accessible PDF documents where the text can be read by a screen reader. Users who want to print these documents off will get better results from a PDF document versus images embedded into a web template.
Graphics are encouraged on your websites if used strategically. To show you there is no hate for infographics from your Web Services team, here are some more infographics specifically about web accessibility.
WebAIM has a lot of great resources on web accessibility. I encourage you to check out these two articles from them as well:
Technical / Legal Stuff
- Section 508 Subpart B §1194.22 (a) - Text Equivalents: A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content).
- Section 508 Subpart B §1194.22 (c) - Color: Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
- TAC §206.70 (c) - Alternate Text-Only Versions: An alternative version page, with equivalent information or functionality, must be provided to make a website comply with the provisions of this section, when compliance cannot be accomplished in any other way. The content of the alternative page must be updated whenever the primary page changes.
The Web Content Accessibility Guidelines (WCAG) 2.0 makes this a little easier to understand:
- WCAG Success Criterion 1.1.1 - Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
- WCAG Success Criterion 1.3.3 - Sensory Characteristics: Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
- WCAG Success Criterion 1.4.1 - Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.