The CALS WordPress theme handles most of the technical stuff for accessibility, but it’s still up to you as a site admin or content editor to make sure your images and other content are accessible to everyone who visits your site. Here are some tips to help you make sure each page on your site provides a usable experience for everyone.
Images
All images on your site should have “alt text” defined unless they are purely for decoration. Screen readers use this text to describe the image to users with visual impairments.
Writing good alternate text
Writing good alt text for images is crucial for accessibility and SEO. Effective alt text should be concise yet descriptive, providing a clear explanation of the image’s content and purpose. Avoid using phrases like “image of” or “picture of,” and instead focus on the essential details that convey the image’s context. For example, if the image is of a person speaking at a conference, a good alt text might be “Speaker addressing audience at tech conference.” This helps users who rely on screen readers understand the image and its relevance to the content.
- W3C – Deciding whether you need to use alt text
- NNGroup – How to write alt text
- NNGroup – Maintaining usability with alt text
How to add alt text in WordPress
Adding alt text to your images in WordPress is easy. When you upload an image in the media library, you’ll see a panel on the right with “Attachment Details.” There will be a field for “Alt Text” where you can add your image description.
Alternatively, if you are looking at an image in the WordPress page editor, you can select the image block and find “Alternative Text” in the block settings in the right panel.
TIP: Easily identify missing alt text on a page
If you are using the CALSv4 theme, while you are in the editor, you will see a red warning icon in the top left corner of any images.
Remember: not all images need alt text and this should only be used as a reference to quickly see which images are missing descriptive text. Refer to the guidelines above when making a judgement.
TIP: Quickly check your media library for missing alt text
The CALSv4 WordPress theme has a built-in feature for you to easily identify missing alt text from your photos.
To find this feature:
- Go to your WordPress dashboard and choose Media to open the media library.
- In the top left, you’ll see two icons: one for a list view and one for a grid view. By default, your library will be open in the grid view with all of the images/media prominently displayed. You’ll want to switch to list view for this feature.
- You’ll see a table layout with a preview of the file and other information about it. In the far right column, you’ll be able to see the alt text. If a photo is missing alt text, you’ll see “Missing Alt Text.”
- To add or change the alt text, hover over the table row and select edit, then fill in the alternative text field.
Remember that not all images need alt text. Refer to the guidelines above when making your judgement.
Headings
Headings should appear in the page in hierarchical order from <h1> to <h4> without skipping levels. This is important because it provides a clear structure, making it easier for screen readers to navigate and understand the content. Consistent heading order ensures all users can quickly find and comprehend the information they need.
Good
- Heading 1
- Heading 2
- Heading 3
- Heading 3
- Heading 2
- Heading 2
- Heading 3
- Heading 4
- Heading 3
- Heading 2
Bad
- Heading 2
- Heading 1
- Heading 2
- Heading 4
- Heading 3
- Heading 2
- Heading 4
- Heading 2
- Heading 4
- Heading 1
How to set the heading level in WordPress
In the CALSv4 theme, your site title is the <h1> element. When adding the heading block to your page, you have the ability to choose from heading levels 2-4.
To choose the level:
- Add a heading block to your page.
- With the heading block selected, find the heading level button in the pop-up toolbar. It will look like H2, H3, or H4, depending on the current heading level selected.
- Choose the desired heading level from the dropdown.
What if I want to change the visual style of the heading?
While it is important to maintain hierarchical order in the code, there may be some times where you need an <h4> to appear larger than an <h3> element. In this case, you can use the WordPress block editor to override the default heading styles.
To add your own styles:
- Select the heading block.
- Find the block settings panel on the right side of the screen. Switch to the styles tab
- Here, you’ll see options to change the color and typography size.
Colors
Using colors on your page is a great way to make your content stand out. However, it is important to make sure your foreground colors provide enough contrast with the background so all users are able to see your content.
In general, the CALSv4 color options are tested to provide enough contrast, if you use the right ones. The darker two red and blue colors, for example, are tested for contrast on a white background. If you are not sure about the contrast on your page, you can use a tool like the WCAG color contrast checker or the WebAIM Color Contrast Checker to ensure that your color selections pass minimum color contrast ratio requirements.
This text has enough contrast.
This text does not have enough contrast.
Links
When creating links in WordPress, it’s important to use meaningful link text that clearly describes the destination or purpose of the link. Avoid generic phrases like “Click here” or “Learn more,” as they don’t provide enough context for users, especially those using screen readers. Instead, use descriptive text such as “Read our accessibility guidelines” or “View the event schedule.”
Having links open in a new tab can also be disorienting for users who are navigating with a screen reader, so it should generally be avoided. However, there are some cases where it may be necessary or helpful, such as if you have an article or form on your page that should not be interrupted by opening a resource.