Skip to Content

Accessibility Tips for WordPress Content Managers

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

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

Select the image you want to add, then fill in the Alt Text field on the right.

While adding the image from the media library, use the Alt Text field on the right side.

Add in the image block’s settings

Select the image block in the editor, then add the alt text in the field on the right.

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

Creating an image gallery.
Provide captions while adding images from the media gallery.

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.

White text on light blue background reads: Is this enough contrast? It's not.
This cover block uses a light blue background (#8ED1FC) with white text (#FFFFFF). The contrast ratio is 1.65:1, which is not enough to be accessible.
Black text on light blue background reads: Changing the text to black makes this easier to read!
This cover block uses black text (#000000) on the same light blue background. The contrast ratio (12.67:1) is more than enough to be accessible.

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.

WordPress editor cover block color settings panel. Red arrow points to custom color link.
A cover block’s Color settings panel. Click “Custom Color” to find the color value.
Color picker in WordPress editor. Arrow points to hexadecimal value.
In the color picker, the color value can be copied from the bottom field.

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.

Contrast Checker
Make sure that the normal and large text contrast ratios pass the WCAG AA level of compliance.

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.

A cover block in the WordPress editor with an image background.
The overlay setting is set to 50% opacity by default. You can adjust this with the setting on the right.

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!

Background image being used in the title section of the CAES-Extension 2019 theme.
The background photo used behind the title in this example has enough contrast.

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.