Categoría: Accesibilidad

El atributo alt (texto alternativo) tiene la función de describir una imagen en la etiqueta HTML <img>. Debes tomarlo como un atributo obligatorio para accesibilidad web y SEO.

Cada imagen que publiques debería sí o sí tener una descripción en su atributo alt por tres razones:

1. Harás tu web más accesible para personas con alguna discapacidad visual, el atributo altes utilizado por los lectores de pantalla y navegadores para invidentes.
2. Por SEO, ayudarás al posicionamiento de tu sitio.
3. En el caso de que haya algún problema por el que no se puede mostrar la imagen el navegador mostrará el texto del atributo altDe ahí lo de texto alternativo.

No debes confundirlo con el atributo title que los navegadores lo utilizan a modo de tooltip.

Cómo añadir el atributo alt en WordPress

Cuando añadimos una imagen en WordPress tenemos opción de incluirlo en un campo. Bien desde la Biblioteca multimedia

o desde el editor

Si no completas ese campo el resultado será un alt vacío: alt=""WordPress no lo coge ni del nombre del archivo ni del título.

Cómo añadir alt a todas las imágenes de WordPress

Si no quieres hacer este trabajo de forma manual puedes automatizarlo, generar un texto alt para todas las imágenes de tu WordPress, las antiguas y para todas las que publiques desde ahora.

Puedes utilizar el plugin SEO Friendly Images aunque lleva más de años sin actualizarse aún tiene más 200.000 instalaciones activas-

O bien puedes añadir en tu archivo functions.php este código que buscará todos los alt vacíos, la cadena alt=""en el contenido de tus páginas y entradas y los sustituirá por alt="Título de la página o entrada nº imagen" Si pusiste manualmente el altno cambiará nada.

function add_alt_tags( $content ) {
  preg_match_all( '/<img (.*?)\/>/', $content, $images );
  if ( ! is_null( $images ) ) {
    foreach ( $images[1] as $index => $value ) {
      if ( preg_match( '/alt=""/', $value ) ) {
        $new_img = str_replace(
          'alt=""',
          'alt="' . esc_attr( get_the_title() ) . ' '. $index . '"',
          $images[0][$index] );
        $content = str_replace(
          $images[0][$index],
          $new_img,
          $content );
      }
    }
  }
  return $content;
}
add_filter( 'the_content', 'add_alt_tags', 99999 );

* Este código lo publicaron hace un tiempo los amigos de Nelio Software pero le he hecho algunas modificaciones para que funcione correctamente.

Como hemos comentado esto es para las imágenes de tus entradas, páginas y Tipos de entradas personalizadas (CPT) pero en un WP hay más imágenes a las que añadir el atributo alt.Por un lado las imágenes de tu tema, para ello haz una búsqueda de las <img> en los archivos de tu tema y asegúrate de que tienen el atributo alt y por otro las imágenes destacadas.

Cómo añadir alta las imágenes destacadas en WordPress

Las imágenes destacadas la suelen utilizar los temas en la página de inicio, en el sidebar, en el footer, en las páginas de archivo, etc. En esta entrada hablamos de todo lo concerniente a las imágenes destacadas en WordPres

Normalmente se hace uso de la función the_post_thumbnail o get_the_post_thumbnail en ambas funciones le puedes añadir los atributos que quieras al <img> que genere.

Para añadir un alt con el título de la publicación busca esas 2 funciones en los archivos de tu tema y añade el array entero

the_post_thumbnail( 
'large', 
array( "alt" => esc_attr( get_the_title() ) )

);

o si ya existe añade el alt separado por coma

the_post_thumbnail( 
'large', 
array( 'itemprop' => "image", "alt" => esc_attr( get_the_title() ) )
);

Cómo añadir el atributo ALT a las imágenes de Woocommerce (actualización 30/01/18)

Enrique nos pregunta en un comentario cómo añadir el atributo ALT a los productos de WooCommerce.

Para WooCommerce nuestro código anterior no funciona porque las imágenes no están dentro del content. Una solución sería este plugin Seo Image Optimizer for WordPress & WooCommerce y otra bien implementar este código visto en How to automatically apply woocommerce product title to all product images alt tags?

add_filter('wp_get_attachment_image_attributes', 'change_attachement_image_attributes', 20, 2);

function change_attachement_image_attributes( $attr, $attachment ){
// Get post parent
$parent = get_post_field( 'post_parent', $attachment);

// Get post type to check if it's product

$type = get_post_field( 'post_type', $parent);
if( $type != 'product' ){
    return $attr;
}

/// Get title
$title = get_post_field( 'post_title', $parent);

if( $attr['alt'] == ''){
    $attr['alt'] = $title;
    $attr['title'] = $title;
}

return $attr;
}

Actualización 31/03/18

En los comentarios Juan Carlos López (muchas gracias) nos deja este otro script

if (!(is_admin())) {
function jclconsultor_add_alt_tags($content) {
preg_match_all(‘//’,$content,$images);
if (!is_null($images)) {
$the_bloginfo= get_bloginfo(‘display’);
$the_title	= ucwords(esc_attr(get_the_title()));
foreach ($images[1] as $index => $value) {
$img	= $images[0][$index];
$img_alt = ‘ alt=”‘.$the_title.’ – ‘.$the_bloginfo.'” ‘;
$img_title	= null;if (strpos($img,’title=””‘)===false){$img_title=’ title=”‘.$the_title.’ – ‘.$the_bloginfo.'” ‘;}
if (preg_match(‘/alt=””/’,$value)) {
$img_new=str_replace(‘alt=””‘,$img_alt.$img_title,$img);
} else {
if (strpos($img,’alt’)===false){$img_new=str_replace(‘<img','<img'.$img_alt.$img_title,$img);}
}
$content = str_replace($img,str_replace(' ',' ',$img_new),$content);
}
}
return $content;
}
add_filter('the_content','jclconsultor_add_alt_tags',99999);
}