Building Accessible WordPress Themes – Featured Images
Published: | No Comments
Reading Time: 4 minutes
Featured images are typically added to WordPress themes on the blog index page, the archive pages for specific categories or tags, and maybe the search results pages too. In some themes, they are also included at the top of individual blog posts, or maybe even in pages too.
Being images, theme authors need to ensure that they always carry appropriate alternate text. But what should that alternate text be? The answer is determined by whether the featured image is used as a link or not.
This blog post will look at the various options and show how the WordPress functions can be used to set the alternate text to an appropriate value in all situations.
This blog post is one of a series spurred by my ‘How to Build an Accessible WordPress Theme’ presentation delivered to WordCamp London on 7th April 2019. The presentation slides can be found here, and the accompanying Accessibility Checklist here.
Retrieving the featured image in a WordPress theme
Within a WordPress theme you can retrieve the full image element (<img>) for a featured image using the get_the_post_thumbnail() function. A full explanation of the get_the_post_thumbnail function can be found here, including a list of the parameters that can be used.
A typical call to this function would look like this:
// Get the featured image $thumb = get_the_post_thumbnail($post_id, 'thumbnail', $imgArgs);
Specifying the alt attribute for the featured image
The bit we’re interested in here is how to use the function to set the alternate text for the image. That can be done by setting an appropriate attribute (the alt attribute) in the array for the third parameter of the function. For example:
// Set up the array for the third parameter $imgArgs = array( 'alt' => 'Whatever you want the alternate text to be' );
If you don’t specify the alt attribute for the function, the function will return whatever the alternate text is currently set to within the WordPress admin media manager. This could be empty, or set to whatever someone thought appropriate when that image was added to the site.
So for better control, it’s always best to specify what you want the alternate text to be in the function arguments.
What should the alternate text be?
As mentioned above, the best choice of alternate text depends on whether the featured image is going to be a link to the individual blog post or not.
Featured image is not a link
On my own site, the featured images are not links to the individual blog posts.
If on the blog index page, and archive pages, you don’t want the featured image to be a link to the post, then the best option is to set the alt attribute of the image to an empty string – “”. This is a convention to indicate to screen readers that the image is there just for decoration.
So when the function is called, set the alt attribute parameter to ” – for example:
// Set up the array for the third parameter $imgArgs = array( 'alt' => '' ); // Get the featured image $thumb = get_the_post_thumbnail($post_id, 'thumbnail', $imgArgs);
Featured image is a link to the blog post
Wherever an image is a link to somewhere else, the alternate text should be set to the link destination rather than a description of what the image actually contains.
So if we want the featured image to be a link to the blog post, our function call should contain the title of the blog post as the value for the alt attribute – example:
// Set up the array for the third parameter $imgArgs = array( 'alt' => get_the_title( $post->ID ) ); // Get the featured image $thumb = get_the_post_thumbnail($post_id, 'thumbnail', $imgArgs);
However, if the featured image is within a link to the blog post along with some text then our requirements may be slightly different.
Suppose our required result in the blog index page was something like this:
<a href="/blog-title/"> <img src="my-featured-img.jpg" alt="???"> <h2>Blog Title</h2> </a>
Here, both the featured image and the blog title heading are both within the same link. This is a valid construct which avoids having ‘redundant’ multiple links to the same destination.
In this case, the blog title heading text suffices as the link text, and when calling the get_the_post_thumbnail function we should set the alt attribute of the featured image to an empty string – as per our example above when the featured image was not a link.
Repeating the blog title here causes over-announcing for screen reader users.
A note about title attributes
In the list of possible attribute parameters that can be passed into the get_the_post_thumbnail function, there is also one for the title attribute for the image.
Using the title attribute on an image is not considered good accessibility practice now, since sighted keyboard users and touch users never see them, and they can cause duplicate announcements for screen reader users if used alongside the alt attribute.
For this reason we recommend ensuring that the featured image ends up with a null title attribute:
// Set up the array for the third parameter $imgArgs = array( 'alt' => '' 'title' => '' ); // Get the featured image $thumb = get_the_post_thumbnail($post_id, 'thumbnail', $imgArgs);
What do you think?
I hope you’ve found this blog post useful. If you have any comments or questions please use the Comments section below.
And if you’d like to hear about future blog posts on building accessible WordPress themes, why not subscribe to the blog?
Other posts on building accessible WordPress themes
- How to Build an Accessible WordPress Theme Apr 28th, 2019
- Accessibility Checklist Apr 7th, 2019
- How to Find an Accessible WordPress Theme Jan 15th, 2016
Share this page (Links open new windows/tabs)
There are no comments yet - would you like to leave one?
Like to leave a comment?
Please note: All comments are moderated before they will appear on this site.
Previous post: How to Build an Accessible WordPress Theme
