Esta clase pertenece al curso de HTML y CSS, y partiremos desde la clase anterior. Si no sabes de dónde partimos, te ruego revises las clases anteriores. Aquí veremos una introducción a la accesibilidad web en HTML, haciendo especial énfasis en las imágenes. E importante: la accesibilidad no es sólo para los discapacitados visuales, sino que facilita el acceso a la información de tu web para todo tipo de usuarios (con discapacidad o no).
¿Qué encontrarás aquí?
¿Qué es la accesibilidad web?
La accesibilidad web se refiere a lo accesible que es la información para todos nuestros usuarios. ¿Quién va a visitar nuestra web? Ni idea. Quiero decir, podemos tener un público objetivo, eso está claro (por ejemplo, si mi página web es de resultados de fútbol, pues tendré un público objetivo que le gusta el fútbol). Eso está claro. El tema es: ¿en qué condiciones nos visitan nuestros usuarios? Ni idea.
Nuestros usuarios pueden tener una discapacidad física o cognitiva, temporal o permanente, de cualquier tipo: desde tener discapacidades visuales o auditivas a tener un brazo roto, por ejemplo. Y no sólo eso: ¿Qué ocurre si un usuario visita nuestra página web desde una ubicación dónde llega poco Internet? Te sorprendería pensar que hay ciertos países en el mundo dónde aún Internet no está tan extendido como en España, dónde incluso en la España rural suele llegar sin problemas.
Pues precisamente, para todo esto es importante la accesibilidad web: para facilitar el acceso a la información de nuestra web para todos nuestros usuarios, independientemente de sus circunstancias.
Beneficios de tener una web accesible
El tener una web accesible, para empezar, aumenta al público al que puedes llegar. Y eso, simplemente con que tu web esté en castellano, ya significa millones de personas. Más potencial público objetivo, acabarás generando más tráfico y eso ya sabes que, en última instancia (depende de cómo monetices tu web), acaba significando dinero.
El pensar en la accesibilidad a la hora de realizar tu web, además, te obliga a hacer una web más ligera y rápida, ya que quieres que la velocidad de la conexión a Internet del usuario afecte lo menos posible a su experiencia accediendo a la información. Y aunque ya hablaremos más adelante de cómo medir el rendimiento web, la velocidad de carga es uno de las muchas variables que Google (y cualquier otro buscador) tiene en cuenta para el SEO. Así que una página web más accesible posicionará mejor, lo que, como antes, significa más tráfico y, en general, también más dinero.
¿Y cómo sé si mi web es accesible o no?
Para saberlo te tengo que contar un poquito de regulación web internacional. Pero muy breve. No te dará tiempo a aburrirte. ¿Te acuerdas de Tim Berners-Lee? Hablamos de él un poco en esta clase. Pues bien, como uno de los padres de las tecnologías que darían lugar al Internet actual, fundó y preside el World Wide Web Consortium (W3C), que es un consorcio internacional que se dedica a generar estándares. ¿Con qué fin? Permitir el crecimiento de la web de forma estable a lo largo del tiempo.
Y sí, han ido publicando a lo largo del tiempo estándares sobre accesibilidad web. Son las Directrices de Accesibilidad para el Contenido Web o, como se suelen conocer, las Web Content Accesibility Guidelines (WCAG). La última versión es la 2.1 y se lanzó en junio de 2018. La versión 2.2 se lanzó como un simple borrador en agosto de 2020.
Y si hay estándares, hay leyes internacionales al respecto. En España en concreto, en 2021, se exige que toda página web financiada parcial o totalmente con dinero público, así como aquellas que pertenezcan a empresas privadas con más de 100 trabajadores o con una facturación superior a 6 millones de euros, han de tener un determinado nivel de accesibilidad de acuerdo a los estándares WCAG 2.1. Por supuesto, en caso de no cumplir estas leyes, la legislación establece sanciones al respecto.
No ahondaremos más en este tema ya que esto es una simple introducción a la accesibilidad web en HTML (y, en concreto, con el uso de imágenes), pero creo que es una información necesaria saber y conocer.
El atributo alt de las imágenes en HTML
Si recuerdas, en las anteriores clases vimos el atributo src, el atributo width y el atributo height, aunque ya dijimos que width y height sólo los vimos con fines didácticos hasta que aprendiéramos a manejar esto con CSS.
Pues bien, si el atributo src es muy importante en la etiqueta <img>, no menos importante es el atributo alt. El atributo alt básicamente proporciona un texto alternativo al usuario cuando la imagen no puede ser mostrada. O, por ejemplo, cuando la imagen no pueda ser vista porque el usuario utilice un lector de pantalla porque sufre una discapacidad visual. Veamos un ejemplo muy ilustrativo. La imagen es un jugador celebrando un gol, en la final del Mundial del 2010. Don Andrés Iniesta. Veamos el código:
<img src="iniesta.jpg" alt="Iniesta"/>
<img src="iniesta.jpg" alt="Iniesta celebrando el gol que otorgó el Mundial de 2010 a España"/>
Con el primer texto alternativo apenas tengo información de la foto. Con el segundo texto alternativo, tengo una información clara de la foto y puedo imaginarme cuál es la foto.
La relevancia del atributo alt en el SEO
Ya debes saber lo que es el SEO, pero si aún no te ha quedado claro, puedes repasarlo en esta clase. A día de hoy, aunque la Inteligencia Artificial está evolucionando mucho en el reconocimiento automático de imágenes, Google actualmente es incapaz de reconocer de forma eficiente las imágenes y utilizarlas para SEO en base al algoritmo que utiliza para decidir qué página web aparecerá antes o cuál después para una determinada búsqueda con una palabra clave.
Por tanto, si Google (o cualquier otro buscador) no puede utilizar las imágenes para el SEO, si utilizas las imágenes sin el atributo alt, Google no las podrá explorar ni clasificar en su algoritmo y perderás potencia SEO. Sin embargo, con el atributo alt ganas potencia para el SEO, ya que no sólo se lo pones fácil a Google o cualquier otro buscador, sino que además destacas de la competencia que no utiliza el atributo alt para el SEO.
Importante: el atributo alt no es sólo para el SEO. Se tiende a pensar en utilizar este atributo para el SEO y no para el usuario. Lo veremos mejor con el ejemplo de antes algo modificado:
<img src="iniesta.jpg" alt="Iniesta celebrando el gol que otorgó el Mundial de 2010 a España"/>
<img src="iniesta.jpg" alt="Iniesta camiseta España"/>
En el primer código, el usuario recibe texto que es informativo y descriptivo para una persona humana y me permite imaginarme la imagen. No sólo he de decir qué aparece en la imagen, sino además dar el contexto, dando al usuario información de calidad acerca de la misma. En el segundo código, el atributo alt describe una intención de búsqueda de una camiseta y claramente es un atributo alt que más que descriptivo, lo que quiero es que aparezca cuando el usuario busca eso en el buscador. Pero no da al usuario información de lo que aparece en la imagen, que es la clave. Por tanto: el atributo alt ha de usarse tanto para SEO como para accesibilidad web. De lo contrario, no lo estaremos optimizando bien.
Por cierto, si utilizamos una imagen meramente decorativa, que no aporta nada de valor al usuario más allá que la estética, el atributo alt debería de ir vacío. Por ejemplo, una imagen que sea el fondo de pantalla de una página web con un determinado color (por ejemplo, rosa claro). La pondríamos así:
<img src="fondo-de-pantalla-rosa.jpg" alt=""/>
Por cierto, tampoco escribas información redundante. Imagínate que tu web es un blog de cuentos infantiles. En la imagen podríamos observar a un gatito bostezando a punto de dormirse. Y en el texto a continuación, al ser un cuento, decimos «y el gatito estaba bostezando, a punto de dormirse«. Si fuera una persona con un lector de voz porque sufro de una discapacidad visual, leyendo el alt de la imagen y el texto, estaría leyendo lo mismo dos veces. Esto es un error fácil de cometer pero también fácil de evitar. Siempre hemos de otorgar la mejor experiencia posible al usuario. Otro ejemplo de cómo utilizaríamos el atributo alt en este caso.
<img src="gatito-bosteza.jpg" alt=""/>
Leyendas de las imágenes en HTML
Bueno, es muy posible que yo quiera poner un subtítulo o leyenda a mis imágenes. En ese caso, utilizaremos como contenedor de la imagen la etiqueta <figure>. Recordarás que ya explicamos anteriormente que en HTML utilizamos contenedores, como cajitas (esto lo veremos con mayor profundidad más adelante) que representan un espacio de la interfaz de la página web (lo que yo como usuario veo, ya que una página web es mucho más que lo que yo veo como usuario, ya que hay bases de datos, lógica de procesamiento de datos etc). La etiqueta que me permite decirle a HTML «oye, esto es una cajita dónde dentro irá una imagen con su respectivo subtítulo o leyenda» es la etiqueta <figure>.
La leyenda la pondré con la etiqueta <figcaption>, siempre dentro de su respectivo contenedor <figure>. Evidentemente, este subtítulo es completamente opcional. Lo veremos mejor con un ejemplo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La mente gatuna</title>
</head>
<body>
<div>
<h1>La psicología de los gatos</h1>
<figure>
<img src="./cat.jpg" alt="Gatito tumbado con cara feliz" width="20%" height="20%">
<figcaption>La felicidad es clave para la salud de los animales</figcaption>
</figure>
<p>La psicología animal ha sido poco estudiada tradicionalmente, ya que si bien el estudio de la mente humana aún tiene grandes incógnitas para nosotros, el estudio de la mente de los animales ha sido aún mucho menos investigada. Tenemos ciertas certezas, como que un gato feliz como el de la imagen tendrá menos cortisol en sangre, por tanto, menos estrés, lo cual redundará en una mejor salud para el felino. Pero... ¿qué sabemos acerca de sus procesos cognitivos? ¿Tiene un gato pensamiento? ¿Tiene consciencia? ¿Tiene lenguaje o pseudolenguaje con otros gatos de su misma o distintas razas?</p>
</div>
</body>
</html>Y el resultado que produce ese código es el siguiente:
En esta clase, dado que quiero fomentar vuestra proactividad, no habrá ejercicios. Podéis hacer código y compartirlo, o enseñar las páginas web que vais haciendo por Twitter con el hashtag #SoySalvajeHTMLCSS. Ya habrá tiempo más adelante para ejercicios (para consolidar lo aprendido), pero quiero que vayáis desarrollando la pasión por hacer páginas webs de temáticas que os interesen.
Acceso al índice del curso
Recuerda que para seguir nuestro curso de HTML y CSS sólo tienes que ir al índice y seguir por la clase de tu interés. ¡Feliz aprendizaje!
En caso de dudas, recuerda que puedes preguntarle a la comunidad con el hashtag #SoySalvajeHTMLCSS en Twitter y que puedes contactar con nosotros (aunque no me comprometo a responder por falta de tiempo, aunque responderé si puedo) por Twitter, Instagram o por nuestro formulario. Por supuesto, recuerda que si quieres que te ayudemos a crecer como profesional de forma más personalizada, no dudes en consultar nuestros servicios. Y si estás pensando en comprar algún producto relacionado con informática, no dudes en consultar nuestras recomendaciones en la sección Productos. Nos vemos en la siguiente clase.