No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Etiquetas semánticas y accesibilidad en HTML y ARIA

6/12
Recursos

¿Qué transformaciones ha experimentado la web desde 2007?

La evolución de la web desde 2007 ha sido vertiginosa. En aquel entonces, el término "Webmaster" era común, refiriéndose a una persona que manejaba todo lo relacionado con un sitio web, desde el diseño hasta el mantenimiento. La llegada de HTML5 fue un punto de inflexión, iniciando una transición hacia la Web 2.0 y más tarde hacia la Web 3.0. En 2007, hablábamos de una web semántica, no de criptomonedas, como solemos asociar ahora. Con HTML5 se incorporaron elementos semánticos que buscaban darle significado al contenido, mejorando así la accesibilidad y el SEO.

¿Qué son las etiquetas semánticas en HTML5?

El desarrollo de HTML5 trajo consigo el uso de etiquetas semánticas, es decir, elementos HTML que tienen un significado explícito claro. Antes de esto, se usaban etiquetas como div o span para todo, lo que no aportaba significado semántico. Las etiquetas semánticas incluyen nav, footer, article, y más, y ayudan a dos tipos de usuarios clave:

  • Lectores de pantalla: Estos dispositivos pueden verbalizar la estructura de un sitio web, guiando a los usuarios a través de su contenido. Un lector sabrá si se encuentra en una sección de navegación o de contenido específico gracias a estas etiquetas.
  • Motores de búsqueda: Los motores como Google se benefician al comprender mejor el contenido de una página, lo que puede impactar positivamente el SEO.

¿Es la semántica de HTML5 una idea nueva?

¡Para nada! Aunque HTML5 hizo que la semántica fuera más común, la idea de tener significado en HTML data desde sus inicios. Tim Berners-Lee, en el '91, ya utilizaba etiquetas como H1, H2, p para agregar estructura y significado a los documentos web. HTML5 expandió la gama de estas etiquetas, optimizando la experiencia de acceso y búsqueda.

¿Cómo ha afectado el uso de frameworks de JavaScript la semántica en HTML?

La popularización de frameworks como React, Angular, y Vue.js ha contribuido al fenómeno que algunos llaman "divitis", es decir, el uso excesivo de contenedores div. Esto puede resultar en problemas de accesibilidad y una mala práctica que descuida el uso de etiquetas más apropiadas como button o a, esenciales para la interacción del usuario y la navegación.

¿Por qué es importante usar etiquetas semánticas adecuadas?

Utilizar etiquetas semánticas es crucial porque:

  • Mejora la accesibilidad: Los lectores de pantalla funcionan mejor con etiquetas específicas que definen segmentos de contenido.
  • Optimiza el SEO: Los motores de búsqueda se benefician de entendimientos más precisos del contenido.
  • Facilita el mantenimiento del código: Cuanto más claro sea el propósito de una etiqueta, más fácil será actualizar o modificar el código posteriormente.

Cuando se decide qué etiqueta usar, es importante preguntarse por el contenido: ¿Es información o navegación? Según la respuesta, se elige entre etiquetas como nav, footer, section, o article.

¿Qué errores se deben evitar al utilizar etiquetas con eventos de clic?

Un error común es asignar eventos de clic a elementos div en lugar de utilizar etiquetas que semánticamente los soportan, como button o a. Tal decisión puede deteriorar la accesibilidad e influir negativamente en la experiencia del usuario.

¿Qué es ARIA y por qué es crucial en accesibilidad?

ARIA (Accessible Rich Internet Applications) proporciona atributos que enriquecen semanticamente aplicaciones web más allá de lo que permite HTML nativo, especialmente en elementos dinámicos como alertas o feeds de noticias.

¿Cómo funcionan los roles y atributos en ARIA?

Roles en ARIA: Los roles otorgan significado a elementos en situaciones donde HTML no es suficiente. Por ejemplo, se agregan roles predefinidos como alert o feed para dar contexto a los lectores de pantalla.

Atributos ARIA: Estos permiten agregar descripciones a elementos HTML, mejorando la información que reciben usuarios de lectores de pantalla. Un atributo común es aria-label, que proporciona una descripción adicional donde los elementos de texto no son practicables.

¿Cuáles son los riesgos de usar ARIA incorrectamente?

Aunque ARIA puede mejorar accesibilidad de manera significativa, si no se usa adecuadamente puede generar errores. Un ejemplo es el caso de un sitio de noticias donde un ARIA label mal utilizado reemplazó de manera incorrecta el texto visible de los enlaces, haciéndolos ineficaces para los usuarios de lectores de pantalla. Es crucial probar ARIA antes de implementarlo para garantizar su funcionalidad.

Consejos para mejorar la accesibilidad y la semántica

  1. Optimiza el uso de etiquetas semánticas: Evalúa si estás usando un div cuando podrías usar una etiqueta más adecuada.
  2. Ten cuidado con ARIA: Úsalo solo cuando sea necesario y asegúrate de probar con lectores de pantalla.
  3. Prueba tus desarrollos: Realiza evaluaciones manuales y automáticas para mejorar continuamente tu sitio.

Continúa aprendiendo sobre accesibilidad y estándares web para crear experiencias más inclusivas y optimizadas.

Aportes 8

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Años atrás existía el rol de “WebMaster” (quien realizaba el 100% del sitio) en la era de la Web 2.0

En la Web 3.0 (hoy) se utiliza HTML 5, CSS 3, etc.

Elementos semánticos = etiquetas que informan su utilidad (ejemplo: article, footer, nav, etc.) en vez de etiquetas genéricas (por ejemplo: div, span, etc.). Ayudan a los lectores de pantalla o los buscadores (Google, Bing u otra) porque expresan mejor el contenido del sitio.

HUMOR: Enfermedad “DIVitis” es una estructuras “div” una dentro de otra y otra, y otra. (jajajaja!!!)

Los atributos “aria” (ARIA=Accessible Rich Internet Applications) tiene:

  1. Roles: ayudan a agregar semántica a los elementos que no tienen una etiqueta específica en HTML.
  2. Atributos: agregar descripciones adicionales a los elementos. Especial para lectores de pantalla.

NOTA: hay que evitar usar excesivamente atributos “aria” a las etiquetas innecesariamente.

Les recomiendo echar un vistazo a este artículo sobre HTML semántico (en inglés) https://cs.fyi/guide/writing-semantic-html

Nota de este articulo que les recomiendo leer https://web.dev/learn/html/semantic-html/
.
While adding role=“button” to an element will inform screen readers that the element is a button, it doesn’t change the appearance or functionality of the element. The button element provides so many features without you doing any work. The button element is automatically added to the document’s tab ordering sequence, meaning it is by default keyboard focusable. The Enter and Space keys both activate the button. Buttons also have all the methods and properties provided to them by the HTMLButtonElement interface. If you don’t use the semantic button for your button, you have to program all those features back in. It’s so much easier to just go with <button>.

¡Qué interesante esto de las etiquetas semánticas y cómo pueden ayudar tanto a usuarios de lectores de pantalla como a buscadores (arañas ciegas de Google)! 😄 😮

La semántica en la web es fundamental para crear un entorno digital más inclusivo, accesible y eficiente, donde la información sea comprensible tanto para humanos como para máquinas. La web semántica es importante porque: * Mejora la accesibilidad: al entender el significado de la información, las máquinas pueden adaptar la presentación de los contenidos para que sean más fáciles de leer y entender para personas con discapacidades visuales, auditivas, motoras o cognitivas. * Facilita la búsqueda y recuperación de información: los motores de búsqueda pueden entender mejor el contenido de los sitios web y proporcionar resultados más precisos y relevantes. * Permite la interoperabilidad: diferentes sistemas y aplicaciones pueden comunicarse y compartir información de manera más efectiva, lo que facilita la integración y el intercambio de datos.

La semántica es super importante para estructurar adecuadamente la Web. Es muy importante conocer las bases del desarrollo para que luego al usar framework mantengamos la sintaxis semánticas.

Gracias

El concepto de rastreó es un tema bastante común en development/SEO y en inglés se conocé como crawl/crawlability/crawlable…etc