Accessibility and inclusion: Displaying text over images
This month, we review best practices when displaying text over images, whether using the image content block or features in the newer Gutenberg editor.
At all times, ensure images in your media library have proper alt text
Text alternatives are required for all images on our website, and the image content block as well as Gutenberg editor blocks use the “alt text” that is added as an attribute to the image in the WordPress media library. The best time to add this text is when uploading a new image— that ensures that there is alt text available when that image is used again in the future.
Image content block
Using the image content block to add visual interest to your page is a great feature of our website. At the same time, accessibility concerns must be addressed when making use of this feature.
- Use an accessible layout option: The most accessible layout option displays the text below the image. If using the image content block as a link, both the image and the text become the clickable link. Of the options that superimpose text on the image, the bottom left or bottom center options benefit from higher contrast due to a shaded opacity layer. Centering text in the middle of an image is not recommended, and should be used with simple graphics rather than photos.
- View at different browser widths: Because mobile devices have a much narrower display, it is important to review the image content blocks at different widths. You can get an approximation of a mobile device view for your website by narrowing your desktop web browser as much as it will allow. You may find that your text no longer fits in the image at that size, or is difficult to read.
Gutenberg editor features
The newer Gutenberg editor is an option that Digital Communications has been evaluating with some content editors over the last year offers greater flexibility when displaying text over images, and great care must be taken to ensure text is readable and accessible with these features. Some guidelines when using these blocks include:
- Use bold, headline fonts: “light weight” fonts with fine lines will not have sufficient contrast ratio.
- Avoid smaller text sizes: the text should be twice the size as the body text on a page for readability.
- Add an opacity layer: an opacity layer can be used to “dim” the image, which is a helpful style choice.
- Place text inside a box over the image: Placing a box around the text is a great way to ensure your text is readable when body text paragraphs are needed.
- Add a drop-shadow to text: Digital Communications can provide the style sheet (CSS) syntax for your text to have a drop-shadow, increasing readability.
You can view many of these options in use on the University of Maine homepage, which utilizes the Gutenberg editor for layout.