All CAES content managers should familiarize themselves with web accessibility best practices. If you haven’t already, check out our Web Accessibility 101 and Accessibility Checklist articles. All of the best practices mentioned apply to WordPress managed sites.
In this article, we’ll go over additional accessibility tips that our WordPress content managers should be aware of.
- How to add alt text to images and image galleries
- Make text legible with high background contrast
- Be careful with image backgrounds
- Include an H1 block when you use “Hide Title”
- Have accessibility questions?
How to add alt text to images and image galleries
Alternative text on images is used to concisely describe images on a web page to visitors who use assistive technology, like screen readers.
You can add alt text to your images with two methods in WordPress.
Add in the media library
While adding the image from the media library, use the Alt Text field on the right side.
Add in the image block’s settings
Another method is selecting the image block after already adding it to the content, and then using the Alt Text field in the block settings on the right.
Image Galleries
For image galleries, be sure to provide the caption text for each image.
Make text legible with high background contrast
The WordPress editor gives the option to change the background color of different elements like cover blocks and buttons.
Our CAES-Extension 2019 template also allows you to change the background color of the header, main menu, and read more buttons. (These options can be set by going to the dashboard, then clicking Appearance > Customize > Colors, and setting the Background Color.)
When you use these options, make sure that there is enough contrast between the text and background.
How do you know if your color choices have enough contrast? Accessibility guidelines set a minimum contrast ratio that our text and backgrounds must meet. In order to be WCAG 2.0 compliant, normal sized text must have a contrast ratio of at least 4.5:1.
The cover blocks below show just how much color choices can affect the legibility of text on its background.
WebAIM Contrast Checker
WebAIM provides an excellent Contrast Checker tool that you can use to quickly check the contrast of your color choices.
In order to use it, you first need to copy the hexadecimal values of your text and background colors.
It may sound complicated, but you can easily find the color values where ever you make color choices in WordPress.
For example, on a cover block you can change the background color using the block’s Color settings. Clicking on the Custom color link will bring up a color picker, which also provides the color value. This is what you would copy for the Contrast Checker tool.
Once you have your two color values copied, you can paste them into the foreground and background fields of the Contrast Checker tool.
After pasting them in, check the Contrast Ratio to make sure you meet the minimum contrast of 4.5:1 for normal sized text, or 3:1 for large text.
On the tool, you can quickly confirm this by making sure WCAG AA has “Pass” next to it.
If not, adjust your colors. You may need to make your background lighter, darker, or adjust your text color.
Be careful with image backgrounds
Image backgrounds can add a modern and interesting look to your website, but they should be used carefully. Ensuring high contrast with photo backgrounds can be difficult since they have a wide range of colors, unlike single color backgrounds.
Background images on cover blocks
WordPress allows you to add banners to a page or post’s content. In the editor these are called cover blocks. To make accessibility easier, the editor includes an overlay feature on cover blocks.
The overlay adds a semi-transparent background color over the photo. This helps improve contrast, and the overlay’s opacity can be adjusted using the block’s settings.
Using a header image with the CAES-Extension 2019 theme
The CAES-Extension 2019 theme allows you to customize the header section – this is where the site title and logo are. You have the option to add a header background image, by going to the dashboard, then clicking Appearance > Customize > Header Image. This should be used with care!
Unlike cover blocks in your page’s content, there is not a built in option to add an overlay onto the image. You need to make sure the image itself has enough contrast against the site title text and logo.
When in doubt, it’s better to use a solid color background (see contrast section above) that you can check with the Contrast Checker.
If you really want to use an image behind your site title, and need help checking the contrast, let the Web Team know.
Include an H1 block when you use “Hide Title”
In some cases you may choose to use the Hide Title option on a page. This option hides the page’s built in title, or H1 heading. It’s useful when you want to feature a cover block at the top of the page for a modern look.
However, this option should be used carefully. H1 headings are an important landmark on webpages that let assistive technology users know where your content begins. So if we remove the built in H1 heading, we need to add one back in by using a H1 heading block.
Basically, if you hide the built in title to feature a cover block at the top of the page, make sure your cover block includes an H1 heading block. The H1 should come before any other content on the page.
Have accessibility questions?
Have any questions about the accessibility of your CAES or Extension website? We’re here to help. You can reach the Web Team at caesweb@uga.edu.