Last week, we looked at accessible text. This week, we want to bring your attention to accessibility and visual content and this will cover visual images used to convey information.
No matter what the visual content, there’s at least two things you need to consider.
- Alternative text
- Contrast, colour and alternatives
In this post, we will first look at alternative text and why it is important. Then we will turn our attention to visual content and how to make it more audience friendly by considering audience needs.
What is ALT text?
ALT text or Alternative text is a title and description that should be attached to your visual content. Visual content can be photos, diagrams, charts, etc., any visual communication.
Why? Well that’s an easy answer. ALT Text benefits users of screen readers and describes to those audience members the content of the visual. This is why it’s important for the title and description of ALT text fields to be completed. It’s inclusive.
What do we mean by title and description of visual images? Any image you insert into a Word document, a presentation or onto a web page (i.e., Canvas), should be given a title and description.
The title can be short and concise. Descriptions can be a sentence or two on what the item is.
For example, below you will see an image. On this web page, the label beneath the image is also the description for the ALT Text which screen readers would pick up.
In MS Word, PowerPoint or other applications where you insert images, simply right-click the visual you have inserted and choose Format Picture (1). Go to the Layout and Properties (2) option in the panel that appears on the right hand side, then enter the ALT Text (3).
Give the image a title and description.
As a side note, software and applications do have accessibility checkers. Why not turn them on and check the accessibility of everything you create?
What if the image is purely decorative?
Decorative images are purely aesthetic and serve no communicative purpose. They’re not part of the main content. The rule of thumb is either exclude them or apply two quote marks “” in the ALT text box to denote a null image (i.e., decorative).
Surely there’s more visual content besides photos?
Yes. Anything that is visual needs the ALT Text to be completed. For example, the following are all visual content:
- charts / graphs
- pictograms
- flowcharts
- photos
- cartoons / illustrations
- GIFs
- video
Audio, whilst not visual content would still benefit from ALT Text attached to the content.
Why else is ALT text beneficial?
There are a number of scenarios where users benefit from text alternatives for different types of media. These include:
- Users may want to save downloading large content or have slow / reduced connectivity
- It might be users are using a text-only browser
- Some users may have vision or cognitive impairment and use text to speech software or screen readers to find out about the content
Technology is not an even playing field but by working more inclusively, the users of different technologies can benefit and it will enhance their learning.
Let’s have a look at contrast and why it’s important.
Why is contrast and colour important?
The Web Content Accessibility Guidelines (WCAG) Level AAA standard requires a contrast ratio of at least 7:1 for normal text, i.e., size 12.
This ratio changes to 4.5:1 for large text with large text defined as size 14 and bold or bigger (i.e., size 18).
The contrast ratio can be defined as the measure of difference in perceived luminance (or brightness) between two colors or tones. This difference in brightness is expressed as a ratio. White text on a white background would be a 1:1 ratio (not viewable with no contrast between the elements) compared to black text on a white background as a 21:1 ratio.
What is the recommendation?
Whilst there is always a minimum standard, in this instance, many people would still have contrast issues at the minimum. It’s better to aim for enhanced contrast whereby the ratio is 7:1 or better for normal text (size 12) and 4.5:1 for larger text (size 14 or bigger).
To get an idea of the ratios in real-terms, please use either of the contrast checkers below to experiment and see results.
- Contrast Checker (by UserWay)
- Contrast Checker (by Coolors)
Whilst both contrast checkers allow you to choose foreground and background colours (i.e., text colour and page colour), the UserWay checker also allows you to see how the results look in greyscale. The Coolors checker also makes suggestions to improve contrast based on the colours chosen.
What about colour elsewhere?
Colour and contrast relate more to the text on whatever colour background it appears on. There are online checkers where you can gauge the contrast of text on background images. One such site is Brandwood.com. Give it a go and see the results.
Albeit, accessible contrast relates to making text and backgrounds more accessible, do apply the concept of colour and contrast to images as well. If you have full colour images, how do they look when the colour is removed? Is the essential detail still there or does the message get lost?
Below, on the left you can see a full colour image of paint going onto a wall. On the right hand side is the same image with the colour information removed. Does this have the same impact?
The image on the right hand side lacks contrast and this is more evident when the colour information is removed.
Why not use colour to communicate?
So far we’ve discussed contrast but not actually colour. What’s the big deal about colour in communication? Well. It comes down to:
- audience members living with visual impairment, i.e., colour blindness, and
- audience members with cognitive issues
By taking care of the contrast and not relying upon colour to highlight messages or draw attention to parts of an image, this benefits everyone.
Audience members with cognitive issues may have colour colour sensitivities and it’s good to be mindful of this.
What is colour blindness?
Without being too technical, colour blindness is where some colours are not perceived by an individual and appear as grey tones. The most common form of colour blindness is red/green followed by blue/yellow and then total colour blindness.
The image below compares a full colour image on the left with red/green colours removed on the right (to assimilate red/green colour blindness).
Whilst the image above poses no danger if a person is asked to point out the red paint and is incorrect, certain professions (for example, airline pilots) have colour vision tests as part of their medicals.
People living with red/green colour blindness will not pass the pilots medical (for safety reasons) and will not be able to fly planes. It comes down to the requirement of reading red/green navigation lights of other aircraft whilst flying at night. As a pilot, if red/green can’t be determined, how would you know if a plane is toward you or going away?
How can visuals be more accessible?
Below you will find an example of colour being used to show the yearly sales per quarter. On the left, the Years are denoted by blue and orange. On the right, the colour information is removed and the contrast is similar. It’s not life threatening but it can be confusing.
To make colour content more accessible for people living with colour blindness, use symbols and/or patterns for charts and graphs. Avoid colour in legends, use pattern instead.
An example of better practice is shown below where colour is not key for communicating the quarterly sales comparison.
Summary
There has been a fair amount of information to digest this week. ALT Text should be applied to all the visual information you use and it doesn’t matter where the visual information appears.
Any software or application which allows for the inserting of visual content also allows for ALT Text to be completed. So whether your are creating a PDF, slides or inserting an image onto a web page, the ALT Text should be there to accompany the visual.
When using visual information, remember:
- Avoid using coloured text to highlight important information, use bold or italics instead
- It is also advisable to avoid underlining text as online users associate this with clickable text, not key information
- The WCAG have contrast accessibility guidelines with size 12 text using an enhance 7:1 ratio and size 14 text (or larger) using a 4.5:1 ratio
- Do consider alternatives to colour only communications, i.e., pattern or symbol where appropriate
- Use accessibility checkers
We do hope you found this post useful and apply some of these considerations to your current practices.
Next time
Our blog post next Monday will look at hacking accessibility in the form of video.
Remember, the DigiKnow blog posts are now released at noon on a Monday.
Please do join us then to learn more and don’t forget to follow us on Twitter: @MDBSelearn.
0 Comments