How should theme_image() deal with screen readers not reading the image title attribute?

Add tag.

Isn't this the desired correct behavior? The alt text is for a description of the image and the title as a bit of extra info. Most text readers will only parse the alt value as this is the only real important bit of info.

Eg: From http://www.w3.org/TR/html5/

The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; and so forth.

The requirements for the alt attribute depend on what the image is intended to represent. When an a element that is a hyperlink, or a button element, has no textual content but contains one or more images, the alt attributes must contain text that together convey the purpose of the link or button. For most images, the text must be given in the alt attribute, and must convey the same message as the image specified in the src attribute. [There is about 1500 word description on the various uses and requirements here]

Personally, a function should enforce the required attributes (eg: alt) and accept other attributes via the attributes option (eg: title)

<?php
function theme_image($path, $alt = '', $title = '', $attributes = array(), $getsize = TRUE) {
  if (!$getsize || (is_file($path) && (list($width, $height, $type, $image_attributes) = @getimagesize($path)))) {
    $attributes = drupal_attributes($attributes);
    $url = (url($path) == $path) ? $path : (base_path() . $path);
    return '<img src="' . check_url($url) . '" alt="' . check_plain($alt) . (isset($image_attributes) ? $image_attributes : '') . $attributes . ' />';
  }
}
?>

Marking as by design.

If this is an issue with a particular sites requirements, it is easy to implement a custom theme function to overwrite core functionality.

I think that you need to take this issue up with the w3, as html 5 is still in its final draft stages. Drupal should be based on the offical standards and not the recommendations of independant organisations. Rather than bending Drupal to meet these other non-standard recommendations, how about contributing a theme that follows these and try to push this into core as an accessable friendly theme.

Also remember that the title attribute has a vital role in many jscript modules, eg lightbox.

A strong -1 for the change, and marking as a feature request to reduce the number of core bugs to speed up the developement of the Drupal 7.

Can we get some more community input on this?

I guess removing if empty would be a good start. I've been passing in NULL for the title when not needed, but this still creates the empty title attribute:

<?php
function theme_image($variables) {
  $path = $variables['path'];
  $alt = $variables['alt'];
  $title = $variables['title'];
  $attributes = $variables['attributes'];
  $getsize = $variables['getsize'];

  if (!$getsize || (is_file($path) && (list($width, $height, $type, $image_attributes) = @getimagesize($path)))) {
    $attributes = drupal_attributes($attributes);
    $url = file_create_url($path);
-    return '<img src="' . check_url($url) . '" alt="' . check_plain($alt) . '" title="' . check_plain($title) . '" ' . (isset($image_attributes) ? $image_attributes : '') . $attributes . ' />';
+    return '<img src="' . check_url($url) . '" alt="' . check_plain($alt) . '" '. (isset($title) ? 'title="' . check_plain($title) . '" ' : '' ) . (isset($image_attributes) ? $image_attributes : '') . $attributes . ' />';
  }
}
?>

which is getting a bit messy...

<?php
function theme_image($variables) {
  $path = $variables['path'];
  $attributes = $variables['attributes'];
  $attributes['alt'] = $variables['alt'];
  $attributes['title'] = isset($variables['title']) ? $variables['title'] : NULL;
  $getsize = $variables['getsize'];

  if (!$getsize || (is_file($path) && (list($width, $height, $type, $image_attributes) = @getimagesize($path)))) {
    $attributes = drupal_attributes(array_filter($attributes));
    $url = file_create_url($path);
    return '<img src="' . check_url($url) . '" ' . (isset($image_attributes) ? $image_attributes : '') . $attributes . ' />';
  }
}
?>

This makes title optional and removes it if it is not present.

Moving this to the "markup" queue in the hopes that doing so will attract more attention.

Accessibility is important, but I think we should also consider what the title attribute does for SEO. There is an article about that on http://www.searchenginejournal.com/image-alt-text-vs-image-title-whats-t..., but it is from May 2008 so I'm not sure if it is still considered up-to-date. Any thoughts?

I searched for "theme('image'" throughout core, and found that at least in core, the following is true (note that by empty, i mean the value is an empty string, but the attributes are still output in all cases):
1) sometimes both alt and title are empty
2) sometimes alt is not empty and title is empty
3) sometimes alt and title are both set to the same value

I did not find any examples of:
4) title being not empty and alt being empty
5) alt and title both being set, but to different values

Even though they don't exist in core, is there ever a legitimate use-case for #4 or #5? I'm not sure if changing the API of theme_image() is ok this late in D7 development, but in any case, we can add documentation with best-practice recommendations. Or, if there's strong community support for changing theme_image() to reflect the realities of user agents, then perhaps that can still be done.

Re #9: I'm open to community wishes on making it possible to remove the title attribute from the markup entirely, but I'm somewhat -1 on that. Browsers have different interpretations of what it means when an alt attribute exists and a title attribute doesn't (IE uses the alt for the tooltip and Firefox does not), so always having both exist (even if one or both are empty string) seems better to me. Of course, a theme can override theme_image(), but I think Drupal default implementations should strive for maximum cross-browser consistency.

Trying to clarify issue title. Please feel free to improve on it.

I just read a number of blogs, forums and other posts about the topic of alt and title attributes and the consensus seems to be:
- The alt-text is meant as a replacement for (rather than a description of) the image. You never get to see image and alt-text at the same time.
- The title-text is additional information, in many browsers displayed as tooltips.
- For both SEO and usability, the alt attribute is more important than the title attribute.
- Before version 8, IE used the alt attribute for the tooltip. That is fixed: IE8 uses the title-attribute.

Other tings I noticed:
- The title attribute is quite common on links. Hardly any site uses title attributes on images.
- Even sites that have displaying images as their core business (Flickr, Picasaweb, Photobucket, Tinypic) do not use the title attribute on img tags.
- I could not find a good example of an img tag with different values for the title and alt attributes.

Personally, I'm not in favor of completely removing the title attribute because it can serve a specific purpose. On the other hand I don't think it would be right to duplicate the alt attribute as title attribute by default; sometimes you don't want those tooltips popping up everywhere. Maybe we could we add an admin setting somewhere, so the user can choose the title behavior:

Output title attribute:
[ ] No
[ ] Yes; hide if empty
[ ] Yes; use alt text if empty

I do not actually know of any place in Drupal 6 core & below where we need a title on the image, but I can instantly think of multiple modules that require it: Lightbox2, FancyBox, Thickbox, GalleryView, ...

With the move to including some icons, I guess that Drupal is using the title attribute more maybe?

Our non-jscript usage is limited, examples include a little node info block, where the alt is used to briefly describe the icon (e.g. 'user', 'group', etc) and the title has a verbose description / details. For example, one icon title text has the node type, creation date, etc.

A similar use case in out cms where the title acts as the help text for the image action [actually any link or image as title is a global html attribute]. This is displayed on hover globally using jQuery Tooltip. While 98% of these are useful help text to users, we still get some floating in title text from core that just are not helpful as these just clone the alt tag.

I think I'm now in Everett Zufelt camp.

Remove unnecessary title usages and with the change to the theming layer, move the title to the attributes array. At very least, remove it if empty!

It would be strange to eliminate a valid and useful HTML attribute!

Subscribing for now. This function could use some love.

theme_image() is in the process of being cleaned up over here: #555830: Clean up theme_image() to use drupal_attributes() for all attributes and revisit defaults for "alt" and "title". This will take care of empty title tags printing out.

Is there anything else we can do here? theme_feed_icon() was fixed, so it seems the same argument would apply for removing title attributes for these:

./includes/theme.inc:
return theme('image', array('path' => 'misc/arrow-asc.png', 'alt' => t('sort ascending'), 'title' => t('sort ascending')));
return theme('image', array('path' => 'misc/arrow-desc.png', 'alt' => t('sort descending'), 'title' => t('sort descending')));

./modules/color/color.module:
$form[$theme]['screenshot']['#markup'] = theme('image', array('path' => $screenshot, 'alt' => '', 'title' => '', 'attributes' => array('class' => array('screenshot')), 'getsize' => FALSE));

./modules/dblog/dblog.admin.inc:
WATCHDOG_WARNING   => theme('image', array('path' => 'misc/watchdog-warning.png', 'alt' => t('warning'), 'title' => t('warning'))),
WATCHDOG_ERROR     => theme('image', array('path' => 'misc/watchdog-error.png', 'alt' => t('error'), 'title' => t('error'))),
WATCHDOG_CRITICAL  => theme('image', array('path' => 'misc/watchdog-error.png', 'alt' => t('critical'), 'title' => t('critical'))),
WATCHDOG_ALERT     => theme('image', array('path' => 'misc/watchdog-error.png', 'alt' => t('alert'), 'title' => t('alert'))),
WATCHDOG_EMERGENCY => theme('image', array('path' => 'misc/watchdog-error.png', 'alt' => t('emergency'), 'title' => t('emergency'))),

./modules/forum/forum-icon.tpl.php:
<?php print theme('image', array('path' => "misc/forum-$icon.png")) ?>

./modules/image/image.admin.inc:
$output .= '<a href="' . url($original_path) . '?' . time() . '">' . theme('image', array('path' => $original_path . '?' . time(), 'alt' => t('Sample original image'), 'title' => '', 'attributes' => $original_attributes, 'getsize' => FALSE)) . '</a>';
$output .= '<a href="' . file_create_url($preview_file) . '?' . time() . '">' . theme('image', array('path' => file_create_url($preview_file) . '?' . time(), 'alt' => t('Sample modified image'), 'title' => '', 'attributes' => $preview_attributes, 'getsize' => FALSE)) . '</a>';

./modules/system/system.admin.inc:
'#markup' =>  theme('image', array('path' => 'misc/watchdog-error.png', 'alt' => t('incompatible'), 'title' => $status_short)),
$screenshot = $theme->screenshot ? theme('image', $theme->screenshot) : '<div class="no-screenshot">' . t('no screenshot') . '</div>';

./modules/update/update.report.inc:
$icon = theme('image', array('path' => 'misc/watchdog-ok.png', 'alt' => t('ok'), 'title' => t('ok')));
$icon = theme('image', array('path' => 'misc/watchdog-warning.png', 'alt' => t('warning'), 'title' => t('warning')));
$icon = theme('image', array('path' => 'misc/watchdog-error.png', 'alt' => t('error'), 'title' => t('error')));
$icon = theme('image', array('path' => 'misc/watchdog-warning.png', 'alt' => t('warning'), 'title' => t('warning')));

./themes/seven/template.php:
return theme('image', array('path' => $theme_path . '/images/arrow-asc.png', 'alt' => t('sort ascending'), 'title' => t('sort ascending')));
return theme('image', array('path' => $theme_path . '/images/arrow-desc.png', 'alt' => t('sort descending'), 'title' => t('sort descending')));

Let me know what you guys think.

@Jacine No title is fine (or blank as is the case of many of these). I suppose the code would be a bit lighter if there was a bit less irrelevant PHP.

If the alt==title then that's OK according to the JAWS folks. The title does allow folks to hover over an image with a mouse and get some additional information which can be useful when the image isn't sufficient to convey what it does. The sort ascending/descending is a good example where text helps add context to the image.

Which I believe just leaves:

./modules/system/system.admin.inc:
'#markup' =>  theme('image', array('path' => 'misc/watchdog-error.png', 'alt' => t('incompatible'), 'title' => $status_short)),
$screenshot = $theme->screenshot ? theme('image', $theme->screenshot) : '<div class="no-screenshot">' . t('no screenshot') . '</div>';

where the alt is different & less useful than the title. Perhaps they should both be "t('incompatible') . ': ' . $status_short" so that more information is conveyed effectively to screen readers.

Good examples though!

Ah, ok. Great ;)

I'm definitely on board with the removing the empty titles in these examples. I'll try to squeeze in a patch for that and the 2 issues you identified this weekend.

Hey, sorry for taking so long to get to this.

As it turns out, we've only got one thing to fix here. To avoid confusion, I've created a new issue here #913146: alt attribute for incompatible module image on module listing page needs improvement. to take care of this: theme('image', array('path' => 'misc/watchdog-error.png', 'alt' => t('incompatible'), 'title' => $status_short))

theme('image', $theme->screenshot) was a false alarm. $theme->screenshot has proper alt/title attributes, so it's fine.

Also, since theme_image() was fixed in #555830: Clean up theme_image() to use drupal_attributes() for all attributes and revisit defaults for "alt" and "title", I'm marking this issue closed.