WordPress Ideas — Auto-populate Alternative Text to match Title unless otherwise specified

Morten Rand-Hendriksen
Member

When uploading images to WordPress, the title tag is required whereas the Alternative Text tag is not. This is misleading and results in millions of photos hosted on WordPress sites being posted with invalid tags.

In WordPress the title tag is required to give the image a name for the Media section. On the internet the alt tag is required to provide an alternate description for the image. An image without an alternate tag is not only invalid HTML, it's inaccessible and bad code overall.

Because the red required star only appears next to the title tag, people are under the impression the alt tag is optional. It is not, at least not when it comes to web standards and accessibility.

There is a simple solution here: Auto-populate the alt tag with the text from the Title field. Then if the poster wants to change the alt tag manually she can do so, otherwise the image will have an alt tag and be valid.

Posted: 5 years ago #
Jen
Inactive

We would never do this.... the title field is auto-populated from the file name. Alt tags need to be descriptions of what is in the image for accessibility. If we auto-populated alt tags with GSC0000098798.jpg, that would be terrible.

Posted: 5 years ago #
Morten Rand-Hendriksen
Member

Then at least add an asterix or comment in the alt field. The way it displays now makes users who are not familiar with web standards think that the title tag will do the job. As a result they inadvertently make inaccessible sites. I've had this conversation with several people and they are always surprised to learn the title tag will not do what the alt tag does.

There are a couple of alternate solutions here:

As per web standards the alt tag should be different under different circumstances:

If the image carries a message of its own the alt tag should be descriptive (standard)
If the image is for visual illustration only it should be null or carry the title of the post itself
If the image is a link pointing to another file or page it should carry the name of the target

For part two and three there could be automation built in: The image automatically gets an alt tag matching the post title or in the case of an image with a link the alt tag automatically grabs the title from the target post, page or image. The challenge is the first instance, but even there grabbing the post title is still better than leaving the field empty.

At the very least the field should have an asterix or a form field text reading "Remember to add an alternate description" or "Alternate description for when the image doesn't work" or "The Alternate description is mandatory" or something like that. As it stands users are given the false belief that the alt tag is optional and through this they are learning to break web standards and create inaccessible sites. A quick random walk through WordPress.com sites shows you that the alt tag is pretty much never used. This is problematic.

Posted: 5 years ago #
Sang-Min Yoon
Inactive

Is there any updates on this? I don't understand why Alternative Text is not a required field.

Posted: 5 years ago #
Alec Rust
Member

I don't understand this either. Seems vital to me.

I've opened a bug to fix the incorrect labelling of this field (http://goo.gl/ylkVQ) but there's clearly room for improvement here.

A new WordPress user should be forced to add an alt attribute, and they should understand why and what the difference from "Title" is.

Posted: 5 years ago #

12345

try using this php :

/* image SEO reminder */
class image_seo_reminder {
	private $allowed = array(
		'a' => array(
			'class' => array(),
			'href' => array(),
			'rel' => array(),
			'title' => array(),
			'target' => array()),
		'span' => array(
			'class' => array(),
			'title' => array()),
		'em' => array(),
		'strong' => array(),
		'u' => array(),
		'code' => array(),
		'sup' => array(),
		'sub' => array(),
		'cite' => array(),
		'strike' => array(),
		'br' => array()
	);
	public function __construct() {
		add_action('admin_init',array($this,'admin_init'),99,0);
	}
	public function admin_init() {
		add_filter("attachment_fields_to_edit", array($this,"alt_text_field_reminder"), 15, 1);
		add_filter( "manage_media_columns", array($this,'img_columns'),10,1);
		add_action('manage_media_custom_column',array($this,'print_img_columns'),10,2);
	}
	public function img_columns($columns) {
		$columns['image_alt'] = __('Alternate Text');
		$columns['post_excerpt'] = __('Caption');
		return $columns;
	}
	public function print_img_columns($name, $post_id) {
		$none = '<span style="color:#dd0000;">'. __('Empty') .'</span>';
		switch($name) {
			case 'image_alt' :
				$alt = stripslashes(get_post_meta($post_id, '_wp_attachment_image_alt', true ));
				echo !empty($alt) ? $alt : $none;
			break;

			case 'post_excerpt' :
				$attachment = get_post($post_id);
				if(!is_object($attachment) || is_wp_error($attachment)) break;
				echo (!empty($attachment->post_excerpt)) ? trim(wptexturize(wp_kses(stripslashes($attachment->post_excerpt), $this->allowed))) : '' ;
			break;
		}
	}
	public function alt_text_field_reminder($form_fields) {
		if (isset($form_fields['image_alt']) && is_array($form_fields['image_alt']) && isset($form_fields['image_alt']['helps'])) {
			$form_fields['image_alt']['helps'] = $form_fields['image_alt']['helps'] . '<br /><abbr title="required" class="required">*</abbr>&nbsp;' . __('Alt text is actually <strong>mandatory</strong> if you care about SEO of your website!','ewpfi_lang');
		}
		return $form_fields;
	}
}
$image_seo_reminder = new image_seo_reminder ;

Posted: 4 years ago #

sergeliatko
Inactive

12345

this version of the php is better looking/working

/* image SEO reminder class
 by serge liatko
 updated version 0.2
*/
class image_seo_reminder {
	private $allowed = array(
		'a' => array(
			'class' => array(),
			'href' => array(),
			'rel' => array(),
			'title' => array(),
			'target' => array()),
		'span' => array(
			'class' => array(),
			'title' => array()),
		'em' => array(),
		'strong' => array(),
		'u' => array(),
		'code' => array(),
		'sup' => array(),
		'sub' => array(),
		'cite' => array(),
		'strike' => array(),
		'br' => array()
	);
	public function __construct() {
		add_action('admin_init',array($this,'admin_init'),99,0);
	}
	public function admin_init() {
		add_filter("attachment_fields_to_edit", array($this,"alt_text_field_reminder"), 15, 1);
		add_filter( "manage_media_columns", array($this,'img_columns'),10,1);
		add_action('manage_media_custom_column',array($this,'print_img_columns'),10,2);
	}
	public function img_columns($columns) {
		$columns['image_alt'] = __('Alternate Text');
		$columns['post_excerpt'] = __('Caption');
		return $columns;
	}
	public function print_img_columns($name, $post_id) {
		$attachment = get_post($post_id);
		if(!is_object($attachment) || is_wp_error($attachment)) return;
		if(substr($attachment->post_mime_type, 0, 5) == 'image') {
			switch($name) {
				case 'image_alt' :
					$none = '<span style="color:#dd0000;">'. __('Empty') .'</span>';
					$alt = stripslashes(get_post_meta($post_id, '_wp_attachment_image_alt', true ));
					echo !empty($alt) ? $alt : $none;
				break;

				case 'post_excerpt' :
					echo (!empty($attachment->post_excerpt)) ? trim(wptexturize(wp_kses(stripslashes($attachment->post_excerpt), $this->allowed))) : '' ;
				break;
			}
		}
	}
	public function alt_text_field_reminder($form_fields) {
		if (isset($form_fields['image_alt']) && is_array($form_fields['image_alt']) && isset($form_fields['image_alt']['helps'])) {
			$form_fields['image_alt']['helps'] = __('Alt text is <strong>mandatory</strong> if you care about SEO of your website!','ewpfi_lang') . '&nbsp;<a href="http://wordpress.org/extend/ideas/topic/auto-populate-alternative-text-to-match-title-unless-otherwise-specified/" target="_blank">'. __('Read More') .'</a>';
			$form_fields['image_alt']['required'] = true;
		}
		return $form_fields;
	}
}
$image_seo_reminder = new image_seo_reminder ;

Posted: 4 years ago #

Ipstenu (Mika Epstein)
Lead Plugin Wrangler

You may want to test that with WordPress 3.5, which has revamped media.

http://core.trac.wordpress.org/ticket/21176 was resolved.

Posted: 4 years ago #
sergeliatko
Inactive

12345

ok , i will, thanks

Posted: 4 years ago #
Alec Rust
Member

Have you had a chance to test this in 3.5 yeat sergeliatko?

Posted: 4 years ago #

RSS feed for this topic

Reply »

You must log in to post.

WordPress.org

Ideas

Auto-populate Alternative Text to match Title unless otherwise specified

Reply »

Rating

Status

Tags

Code is Poetry.