Auto Alt Attributes To Featured Images

The WCAG standards are very specific about adding alternative attributes to image links. The alt attribute provides alternative information for an image if a user for some reason cannot view it (e.g. if the user is using a screen reader).

WordPress adds a level of complexity to the situation in that when a user adds an image to the either a post or page he/she can enter their own alt attribute.

The developer now has a couple of choices to make.

  • Leave the alt attribute in the hands of the user. This will cause a problem in attaining the accessibility-ready tag on a WordPress theme. A user can also forget to add the attribute or choose to leave it out.
  • Use a filter to add a default alt attribute to all featured images (e.g. Featured image). There are two downsides to this method:
    • The alt attributes will have no real meaning to a screen reader user. They will know it is a featured image but they will not know which featured image.
    • The default attribute will overwrite any alt attribute the user might have added.
  • Use a filter to add a more meaningful default alt attribute to all featured images (e.g. Featured image for —[the title of the post or page]). There is still a downside to this method:
    • The default attribute will overwrite any alt attribute the user might have added.

When faced with this question I normally choose the third method. Just how do I make this happen?

Filter

Add a filter to functions.php or the file where your theme adds functions.

if ( ! function_exists( 'Your_domain_add_img_alt' ) ) {
	/**
	 * Adds meaningful alt attribute to featured images.
	 *
	 * @param string $html The post thumbnail HTML.
	 * @param int    $post_id The post ID.
	 * @param string $post_thumbnail_id The post thumbnail ID.
	 * @param string $size The post thumbnail size.
	 * @param string $attr Query string of attributes.
	 * @return string returns string with alt added.
	 */
	function your_domain_add_img_alt( $html, $post_id, $post_thumbnail_id, $size, $attr ) {

		if ( is_page() ) {
			$post_title = get_the_title();
			$html = preg_replace( '/(alt=")(.*?)(")/i', '$1Featured image for the page ' . esc_attr( $post_title ) . '$3', $html );
		} else {
			$post_title = get_the_title();
			$html = preg_replace( '/(alt=")(.*?)(")/i', '$1Featured image for the post ' . esc_attr( $post_title ) . '$3', $html );
		}

		return $html;

	}
	add_filter( 'post_thumbnail_html', 'your_domain_add_img_alt', 10, 5 );
}

The filter makes provision for both WordPress pages and posts. Please replace the your_domain bits with your theme’s real domain name.

That’s it, that is all it takes. All of this is unnecessary if you used the Stix Starter theme to build your theme as it has already been included.

Thanks for visiting.

Arnold.

Start the Conversation

Your email address will not be published. Required fields are marked *


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.