En el artículo ¿Qué es HTML Authoring y porqué es importante que lo aprendas? expliqué la importancia de realizar un buen HTML Authoring (Autoría de HTML).
Sin embargo ese artículo solo da unos ejemplos básicos. Por lo que considere importante realizar un ejemplo mas apegado a la realidad de la implementación incorrecta del HTML.
Para entender esto tenemos que entender como funciona un Screen Reader y como es la experiencia para un usuario del mismo.
Navegación
Navegación estándar
Nosotros como usuarios estándar, al ver un artículo no necesariamente leemos todo el contenido del mismo. Normalmente los artículos están divididos en diferentes secciones utilizando subtítulos, lo cual nos deja dirigirnos directamente a la parte que nos interesa más.
Es algo que no nos ponemos a pensar cuando lo hacemos. Pero de manera visualmente nosotros identificamos las secciones y/o subtítulos por formato, estilos e imágenes.
Veamos un ejemplo en el siguiente artículo de programación: https://www.freecodecamp.org/espanol/news/los-mejores-ejemplos-html-y-html5
Supongamos que queremos ver la sección de “El atributo body bgcolor ejemplo“. Otra cosa que normalmente ni pensamos al momento de hacerlo. ¿Qué acciones realizamos para lograrlo?
De hecho tenemos varias opciones:
Podemos usar la rueda del mouse para bajar/subir adonde queramos:
Podemos dar click en la página y utilizar los botones de las flechas de arriba y abajo del teclado:
Podemos usar la barra de navegación de la derecha de la página y dar click en la flecha inferior o superior:
Podemos usar la misma barra de navegación, pero arrastrar la barra para subir o bajar:
¿Te das cuenta? Es algo extremadamente simple, pero tenemos muchas opciones a nivel visual.
Navegación con Screen Reader
¿Cómo navega una persona que tiene que utilizar un Screen Reader? No esta de más decir que necesita herramientas diferentes.
La intención al final es darle una experiencia lo mas cercana posible a la que se tiene en la navegación estándar. Es decir, se le tiene que dar la oportunidad de identificar las secciones que contiene un artículo y elegir el que le interese.
Es evidente cuál es el reto. Se tiene que comunicar de manera auditiva lo que estamos tan acostumbrados a recibir de manera visual.
Es aquí donde entra un buen trabajo de HTML Authoring.
Entonces recordemos. ¿Cuál es el primer paso que realizamos para leer una sección en un artículo?
Identificar los subtítulos.
El usuario no puede usar un mouse, dado que necesitaría ver el puntero y el texto en pantalla. Sin embargo puede usar el teclado.
A través del teclado el usuario puede saltar entre las diferentes secciones que hay en el documento HTML.
Así que una vez que esta activo el Screen Reader que el usuario este seleccionando solo tiene que utilizar ciertas combinaciones de teclas. A continuación pongo algunas de las más usadas aunque hay muchas otras:
*Aquí puedes revisar la lista completa de atajos de teclado
| Atajos de teclado | Efecto |
|---|---|
| Ctrl + Narrador + Flecha Abajo | Navega hacia el elemento hijo. |
| Ctrl + Narrador + Flecha Arriba | Navega hacia el elemento padre. |
| Ctrl + Flecha Abajo | Leer la línea siguiente. |
| Ctrl + Flecha Arriba | Leer la línea anterior. |
| H | Saltar al título siguiente. |
| Shift + H | Saltar al título anterior. |
| Narrador + F6 | El Screen Reader despliega una lista de títulos, en la cual se puede navegar y seleccionar aquel título adónde se quiere saltar. |
*La tecla de Narrador puede ser Insert o Mayus. Esto depende de como haya configurado el usuario su Screen Reader.
Usando las combinaciones de teclado el usuario puede navegar de diferentes maneras por la página. La manera más efectiva es saltando entre títulos. Lo cual se puede hacer de 2 maneras:
Salto entre títulos con H y Mayus + H
Salto entre títulos con el listado de títulos
Esta es la experiencia que se le brinda a alguien que usa un Screen Reader.
¿Te imaginas si no estuviera dividido por secciones? ¿Estariamos forzando a nuestros usuarios a escuchar el audio de toda la página?
La respuesta es que prácticamente sí. El usuario no sabría de qué trata cada sección. Así que tendría que escuchar una parte de cada párrado para darse una idea.
Ahora este evidentemente es un ejemplo de una página bien hecha y por ende el Screen Reader se comporta como debe ser. Pero…¿qué pasaría si no lo estuviera?
Un mal HTML Authoring
Para estos ejemplos he creado el siguiente documento HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Viajando por el mundo</title>
<link rel="stylesheet" href="htmlAuthoring-IncorrectExample.css">
</head>
<body>
<div>
<p class="h1">Viajando por el mundo</p>
</div>
<div>
<div>
<p class="h2">Bienvenido a nuestro sitio web</p>
<span>Bienvenido a nuestro sitio web donde encontrarás información sobre todos los lugares increíbles que puedes visitar alrededor del mundo. Desde las bulliciosas calles de las grandes ciudades hasta los tranquilos rincones de la naturaleza, nuestro objetivo es inspirarte a explorar el mundo que te rodea. A lo largo de nuestro sitio, descubrirás una amplia gama de destinos que ofrecen experiencias únicas, cada uno con su propia historia, cultura y belleza natural. No importa si eres un viajero experimentado o estás planeando tu primera gran aventura, aquí encontrarás algo que te fascinará. Además, nos comprometemos a proporcionarte información actualizada y consejos útiles para que puedas planificar tu viaje con confianza. Desde guías detalladas hasta recomendaciones personales, estamos aquí para ayudarte a aprovechar al máximo cada destino.</span>
</div>
<div>
<p class="h2">Nuestros destinos</p>
<div>
<p class="h3">París, Francia</p>
<img src="paris.jpg"/>
<span>París es la capital de Francia y es conocido por su arquitectura impresionante, museos de arte y ambiente romántico. Sus calles están llenas de historia y cada esquina tiene algo nuevo que ofrecer. Desde la majestuosidad de la Torre Eiffel hasta los encantadores cafés que bordean el Sena, París es una ciudad que nunca deja de sorprender. La ciudad también es un centro cultural de renombre mundial, hogar de museos como el Louvre y el Musée d'Orsay, que albergan algunas de las obras de arte más importantes de la historia. Pasear por sus calles es como caminar a través de una galería de arte al aire libre, con una mezcla perfecta de lo antiguo y lo moderno. Además, París es un destino ideal para los amantes de la gastronomía. Desde los croissants recién horneados en las panaderías locales hasta las cenas gourmet en restaurantes de alta cocina, cada comida es una celebración de los sabores únicos de Francia. París es, sin duda, una ciudad que hay que experimentar al menos una vez en la vida.</span>
</div>
<div>
<p class="h3">Roma, Italia</p>
<img src="rome.jpg">
<span>Roma es la capital de Italia y es hogar de lugares simbólicos como el Coliseo y el Pantheón. Conocida como la Ciudad Eterna, Roma es una mezcla fascinante de historia antigua y vibrante vida moderna. Cada calle y plaza tiene una historia que contar, desde la época de los emperadores romanos hasta la actualidad. El arte y la arquitectura son pilares fundamentales de Roma, con monumentos y edificios que han resistido el paso del tiempo y continúan impresionando a visitantes de todo el mundo. La majestuosidad del Vaticano, con la Basílica de San Pedro y la Capilla Sixtina, es solo uno de los muchos tesoros que esta ciudad tiene para ofrecer. Roma también es famosa por su comida, con platos tradicionales como la pasta carbonara y la pizza al estilo romano que deleitan a los paladares de locales y turistas por igual. Sentarse a disfrutar de una comida en una trattoria tradicional es una experiencia que te conecta con la esencia de la cultura italiana.</span>
</div>
<div>
<p class="h3">Nueva York, EE. UU.</p>
<img src="newyork.jpg">
<span>Nueva York es una ciudad en expansión que es conocida por su skyline icónico, museos de clase mundial y escena gastronómica diversa. Conocida como la ciudad que nunca duerme, Nueva York ofrece una energía única que atrae a millones de visitantes cada año. Desde los rascacielos de Manhattan hasta los parques y barrios históricos, la ciudad tiene algo para todos. Los museos de Nueva York son algunos de los mejores del mundo, incluyendo el Museo Metropolitano de Arte, el MoMA y el Museo de Historia Natural. Estos lugares no solo ofrecen colecciones impresionantes, sino que también son centros de aprendizaje y exploración para personas de todas las edades. Además, la escena culinaria de Nueva York es tan diversa como su población. Desde los food trucks que ofrecen delicias callejeras hasta los restaurantes de estrellas Michelin, la ciudad es un paraíso para los amantes de la comida. No importa lo que busques, en Nueva York siempre encontrarás algo que satisfaga tu apetito y tus sentidos.</span>
</div>
</div>
<div>
<p class="h2">Sobre nosotros</p>
<span>Somos un equipo de viajeros emocionados que amamos explorar nuevos destinos y compartir nuestras experiencias con los demás. Nuestra pasión por viajar nos ha llevado a muchos rincones del mundo, y cada viaje nos ha enseñado algo nuevo sobre las personas, las culturas y la belleza natural de nuestro planeta. Creemos que viajar no es solo una oportunidad para relajarse, sino también una forma de aprender y crecer. Cada destino tiene algo único que ofrecer, y nos esforzamos por capturar esa esencia en nuestras guías y artículos. Queremos inspirarte a salir de tu zona de confort y descubrir el mundo con una mente abierta y un corazón lleno de curiosidad. A través de nuestro sitio web, esperamos no solo proporcionarte información útil, sino también conectarte con una comunidad de viajeros que comparten tus intereses. Juntos, podemos explorar el mundo y hacer de cada viaje una experiencia inolvidable.</span>
</div>
<div>
<p class="h2">Contáctenos</p>
<form>
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="message">Mensaje:</label>
<textarea id="message" name="message" required></textarea>
<br>
<input type="submit" value="Enviar">
</form>
</div>
</div>
<div>
<p>© 2021 Viajando por el mundo. Todos los derechos reservados.</p>
</div>
</body>
</html>
*Este HTML es la estructua de un blog de viajes con algunos artículos y un formulario de contacto.
Junto con su CSS:
.h1 {
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
unicode-bidi: isolate;
}
.h2 {
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
unicode-bidi: isolate;
}
.h3 {
display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
unicode-bidi: isolate;
}
¿CSS? ¿Para qué? Si no necesitamos eso para el Screen Reader. En efecto no lo necesitamos pero ayudará a darnos cuenta de que es lo que pasa cuando solo nos concentramos en la parte visual de nuestra página.
Una página con diseño y estilos pero con un HTML mal implementado. Intenta navegar en este archivo utilizando un Screen Reader y ve que tal te va.
*Nota como la navegación no es imposible pero es más molesta. El usuario no tiene forma de saber cuál es una sección o subsección del artículo.
A primera vista si vieras esta página probablemente pensarías que fue hecha con los tags apropiados: <h1>, <h2>, etc.
Pero esta es la trampa en la que podemos caer si desarrollamos solo con la parte visual en mente. Podemos terminar con una página que se lee y se entiende claramente a nivel visual, pero a nivel auditivo es confusa y difícil de navegar.