Accessible content design for learner variability: Visuals

The placement of visuals on any document, presentation or page should be carefully considered. Randomly placing visuals can interrupt the flow of the text and make the content harder to follow. It is best to avoid fitting text around images. Consider being consistent in your approach, allow sufficient space between the text and the visual and place the visual where the flow is not interrupted. Avoid placing text over any background image or visual, where possible.

Firstly, ask yourself if the image is required. If it is only for decorative purposes and has no meaning, ensure it is tagged as decorative, but it might be better to remove it entirely. Where a visual conveys a message, provide a text equivalent and describe the meaning or what is represented. In a simple visual, present the content and function, not necessarily a description. A useful tip is to think about if you had to remove the image, what text would you put in its place?

The alt text should contain the same message you are trying to convey to a person who cannot see the image. If the image contains text, that text should also be included in the alt text tag. Every image that is trying to convey information should have proper and specific alt text so that screen reader software can convey the message to the user. Screen readers cannot read images, so it is important to describe it, so it is searchable and informative where a visually impaired learner has the same experience as everyone else. The Benetech training tool, ​POET is a great place to start to practice writing descriptions or alternative text for visuals​ and to understand when and how to write them, along with very practical suggestions and ideas.

If you have a detailed visual that represents a lot of data or information providing a description, notes, transcript or audio version will significantly enhance the accessibility of the material. However, it is important to note that when providing an audio version, good practice would be to also include closed captions. Transcripts allow learners to easily navigate through the content and locate specific information quickly.

For an infographic or detailed visual to be fully accessible it needs a title of the visual, t​he structure of the content (the colours, ​pictures and number of sections/layout) and the key information provided in each section (repeat the text contained within the image) so the user has an equitable experience. A screen reader user cannot read or comprehend images or visuals. They rely on Alt tags or a transcript or audio file provided. This is the same when describing a visual, be mindful of the traditional way of saying “refer to figure 4.2 or “as you will see here”, but instead focus on the use of more descriptive language.

Low-contrast text is difficult to read on a desktop but even more so on a mobile device. Readability requires sufficient contrast between foreground text and its background. Low contrast text can be illegible and inaccessible. If there is text over-layed on top of an image, ensure the text is readable and that the text is included in the Alt Text also. If the text is unclear it might be more accessible to use a heading or remove the text completely. The W3C recommends the following contrast ratios for body text and image text:

• Small text should have a contrast ratio of at least 4.5:1 against its background. A ratio of 7:1 is preferable.
• Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

You can check the contrast of your foreground and background colours by using a Contrast Checker.

Ensure your visual is of high quality and clearly visible. Where you are exporting an image to embed in a document or on a VLE page, ensure that it is of high enough resolution and that it does not appear pixelated on screen. If including a scanned image or screenshot, it is important to include an Alt tag or description.

Scanned documents such as scanned PDFs, photocopies or photographs are largely inaccessible. For scanned images, ensure you add an alternative text description. To improve the accessibility of scanned text it needs to be converted in to a readable format (through the use of OCR, Optical Character Recognition). Some scanners can do this automatically, and there are some third party tools that can convert scanned text to readable text. You can also do this for some types of PDFs, by using tools available in Microsoft Office suite.

Use a minimum of size 12 pt font for any text within an image, as any text smaller than that will be very difficult to read. Sans serif fonts are more accessible for any digital medium, so try to use these consistently (using the same font throughout or the same font family), rather than mixing fonts or using bold to create emphasis.

Depending on the software you are using to design a visual, or embed one into other content (such as Word documents or PowerPoints), try to remember to use built-in accessibility checkers. All checkers have limitations, so it is better to think about accessibility in the design phase and learn best practices. However, most MS office applications come with built-in accessibility checkers. The built-in accessibility checker in Canvas will also identify and help you resolve issues with visual content such as images and tables.