Consejos esenciales para mejorar la accesibilidad web con HTML5.

Accesibilidad web, fuente: ayudawp.

¡Hola! 👋, en este artículo hablaremos sobre el papel que juega HTML5 y las etiquetas semánticas en la accesibilidad web, comencemos 🚀.

Vamos a dividir esto en tres pequeñas partes:

• ¿Qué es HTML5?;
• ¿Qué es semantica?;
• Y todo esto, ¿qué tiene que ver con la accesibilidad web?.

HTML5

Es la última versión estable de HTML y significa “HyperText Markup Language”, no entraré a detalle sobre esto, pero en palabras simples, nos ayuda a crear la estructura y el contenido de una página web mediante etiquetas ya establecidas en él mismo. Si eres un(a) dev con mucho tiempo en esta industria tech sabrás e incluso me imagino que creaste páginas web con tablas, en la imagen 1 te haré recordar esos viejos tiempos 🤭.

Imagen 1, fuente: MDN Web Docs.

y todo eso para esto 😶:

Imagen 2, fuente: MDN Web Docs.

lo sé 😨, tranquil@, estamos en mejores tiempos 🙃, el punto de esto es que antes era más laborioso crear una página web (muy simple) que ahora y eso es gracias a los grandes avances que ha tenido HTML, y uno de ellos fue la liberación de la etiqueta <div/>(división) en la versión de HTML 4.01, donde se estableció una nueva estructura para crear páginas web.

Imagen 3, fuente: Viking Code School.

Y la mayoría, por no decir que todxs lxs devs, lo comenzaron a utilizar para determinar las secciones y sub-secciones en una página web, pero como todo en exceso es malo, nació la famosa enfermedad ‘divitis’, me imagino que puedes asumir de que va, y si no, aquí un ejemplo:

Imagen 4, fuente: stackexchange.

Pero no lo juzguemos tan feo, porque sin duda alguna, en su momento fue una muy buena alternativa para la creación de las páginas web y siendo sinceros “contagiarse de divitis” era muy común 😬, no obstante, con HTML5 y sus etiquetas semánticas, se solventaron varios problemas 🙌, en ellos la accesibilidad, el SEO, entre otros. Hasta acá, ¿Todo bien? 🤔, ahora, hablemos sobre:

Semantica

Permite describir el contenido, su significado y la relación que guarda un dato con otros. Los elementos HTML semánticos son aquellos que describen claramente su significado de una manera legible por humanos y máquinas.

Este es un ejemplo simple de la estructura de una página web con HTML5:

Imagen 4, fuente: Viking Code School.

Como podemos observar, el uso excesivo de las etiquetas <div/> se reemplazaron por etiquetas semánticas y como lo he mencionado son importantes por varias razones, aquí algunos ejemplos:

1. Es más fácil e intuitiva la estructura de una página, tanto para lxs devs como para el navegador debido que brindan más funcionalidades gracias a algunos estilos ya aplicados en los elementos (como en un botón);
2. SEO, es más fácil analizar las etiquetas semánticas para descubrir qué es lo más relevante en una página que si solo se usa <div/>;
3. Incluso para el diseño responsive, HTML semántico es más ligero que el código espagueti que intenta serlo sin éxito;
4. Por último, ayuda al mantenimiento adecuado del código y garantiza ajustes sencillos cuando es necesario.

Espero que con todo lo que hemos aprendido, ya no nos contagiemos o nos curemos de ‘divitis’ 😉 .

Y todo esto, ¿qué tiene que ver la accesibilidad?, te platico, la mayoría de los problemas de accesibilidad se pueden solucionar con el uso correcto de las etiquetas semánticas, sí, leíste bien 🤯, debido que esas etiquetas ya tienen por defecto estilos adecuados, están construidos para ser accesibles con el teclado y facilitan la navegación en las tecnologías de asistencia (como los lectores de pantalla para usuarios con discapacidad visual), es por eso la importancia de usar las etiquetas correctas, entonces, si deseas comenzar a mejorar la accesibilidad de tus paginas web, este puede ser un buen punto de partida 💅.

Ahora que si por alguna extraña razón te pasa como a mí que luego no recuerdo las diferencias entre la etiqueta <main/> y <section/> 🤦‍♀️, bueno, haré un breve resumen para ayudarnos 🙆.

<Main/>

Es la etiqueta donde va el contenido principal de una página, normalmente debería de ser solo una etiqueta <main/>, de lo contrario, pregúntate, ¿cuál es el verdadero contenido de mi página?.

<Header/>

Por lo regular se encuentra en la parte superior y comúnmente contiene el encabezado principal y algunas herramientas de navegación y búsqueda.

<Footer/>

Generalmente se encuentra al final de nuestra página web, su contenido suele ser de metainformación (datos adicionales), como detalles del autor, información legal y/o enlaces a información relacionada. Podemos utilizar etiquetas de <section/> en él.

<Nav/>

Comúnmente contiene links de otras páginas o te direcciona a otro contenido dentro de la misma página web.

<Article/>

Es para contenido independiente al original de nuestra página web, puede ser un blog, artículos de noticias o publicaciones en el foro.

<Section/>

Es una sección general de un documento. “Sirve para determinar qué contenido corresponde a qué parte de un esquema. Piensa en el esquema como en el índice de contenido de un libro; un tema común y subsecciones relacionadas.” — MDN web docs.

<Aside/>

Representa cualquier contenido relacionado al que se esta tratando.

Ejemplo visual:

Imagen 5, fuente: Udacity.

Para finalizar, recuerda que con “pequeñas” acciones podemos mejorar la accesibilidad en la web, así que te invito a sanarte de la “divitis” y comenzar a utilizar etiquetas semánticas 🤝.

Espero hayas disfrutado de este contenido, no te pierdas las demás publicaciones 😎.

Gracias por leerme 🫂.