Problem/Motivation
Comaring the implementations for image_style and responsive_image the handling of the #alt key is really confusing and inconsistent.
While image_style expects a separate #alt parameter at first level (read the code comments):
/**
* Implements hook_theme().
*/
function image_theme() {
return [
// Theme functions in image.module.
'image_style' => [
// HTML 4 and XHTML 1.0 always require an alt attribute. The HTML 5 draft
// allows the alt attribute to be omitted in some cases. Therefore,
// default the alt attribute to an empty string, but allow code using
// '#theme' => 'image_style' to pass explicit NULL for it to be omitted.
// Usually, neither omission nor an empty string satisfies accessibility
// requirements, so it is strongly encouraged for code using '#theme' =>
// 'image_style' to pass a meaningful value for the alt variable.
// - http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.8
// - http://www.w3.org/TR/xhtml1/dtds.html
// - http://dev.w3.org/html5/spec/Overview.html#alt
// The title attribute is optional in all cases, so it is omitted by
// default.
'variables' => [
'style_name' => NULL,
'uri' => NULL,
'width' => NULL,
'height' => NULL,
'alt' => '',
'title' => NULL,
'attributes' => [],
],
],
[...]
it doesn't even work to set #alt on responsive_image:
/**
* Implements hook_theme().
*/
function responsive_image_theme() {
return [
'responsive_image' => [
'variables' => [
'uri' => NULL,
'attributes' => [],
'responsive_image_style_id' => [],
'height' => NULL,
'width' => NULL,
],
],
[...]
responsive_image even more uses the HTML attributes array to get the alt attribute:
if (isset($variables['attributes'])) {
if (isset($variables['attributes']['alt'])) {
$variables['img_element']['#alt'] = $variables['attributes']['alt'];
unset($variables['attributes']['alt']);
}
if (isset($variables['attributes']['title'])) {
$variables['img_element']['#title'] = $variables['attributes']['title'];
unset($variables['attributes']['title']);
}
$variables['img_element']['#attributes'] = $variables['attributes'];
}
(responsive_image.module, L201)
Steps to reproduce
Proposed resolution
I would expect consistent #alt attribute on responsive image instead of using the #attributes array.
Maybe with a fallback.
Remaining tasks
User interface changes
API changes
Data model changes
Release notes snippet