Accesibilidad y Semántica, van de la mano y por que es importante que sepas esto.
La semántica web es un conjunto de técnicas y estándares que buscan mejorar la estructura y el significado de la información en un sitio web. El uso correcto de las etiquetas semánticas es esencial para garantizar la accesibilidad y la usabilidad de un sitio web.
Los atributos en las etiquetas semánticas deben ser utilizados de manera precisa y coherente. Por ejemplo, el atributo “alt” en una etiqueta “img” debe proporcionar una descripción alternativa de la imagen para los usuarios que no pueden verla. El atributo “title” debe proporcionar una descripción breve y útil de un elemento.
El uso correcto de las etiquetas semánticas también es esencial para mejorar la accesibilidad. Las etiquetas “h1” a “h6” deben ser utilizadas para los encabezados y las etiquetas “p” para los párrafos. Las etiquetas “nav” y “main” deben ser utilizadas para la navegación y el contenido principal, respectivamente.
El tab index es un atributo que indica el orden en el que los elementos deben recibir el enfoque al presionar la tecla de tabulación. Es importante utilizar el tab index de manera coherente para garantizar que los elementos importantes reciban el enfoque en primer lugar, podemos ver esto con la librería Accesibility.js la cual es gratis y nos permite identificar el orden de navegación por teclado de los elementos.
Algunas de las principales etiquetas semánticas utilizadas para la accesibilidad incluyen: “header”, “h1”, “h2”, “h3”, “h4”, “h5”, “h6”,“nav”, “main”, “article”, “section”, “aside”, “footer” y “figure”.
En cuanto a la accesibilidad, se recomienda utilizar etiquetas “label” en lugar de “placeholder” ya que los usuarios con discapacidad visual pueden no ser capaces de ver el contenido del “placeholder” y no saber qué información se espera que ingresen en el ejemplo de la imagen google utiliza un label con position absolute sobre el input, parece un place holder pero no lo es.
La accesibilidad en sitios web es importante porque permite que todos los usuarios, independientemente de sus habilidades o discapacidades, puedan acceder y utilizar la información en el sitio. Los sitios web accesibles son más fáciles de usar para todos los usuarios, lo que puede mejorar la experiencia del usuario y aumentar la eficiencia. Además, muchos países tienen leyes y regulaciones que requieren que los sitios web gubernamentales y comerciales sean accesibles.
Dicho esto procederé a ahondar en algunos puntos que deben ser considerados importantes en términos de accesibilidad y semántica.
Semántica y accesibilidad en los formularios de un sitio web:
La semántica es esencial para garantizar que los formularios en un sitio web sean accesibles para todos los usuarios. Las etiquetas “form”, “label” y “input” deben ser utilizadas de manera precisa y coherente para describir el propósito de cada campo de formulario. Los atributos “name” y “id” deben ser utilizados para vincular las etiquetas “label” y “input” de manera que los lectores de pantalla puedan leer el texto de la etiqueta “label” junto al campo de formulario correspondiente. Además, es importante incluir un botón de envío claramente etiquetado y un mecanismo para corregir errores de entrada.
Semántica y accesibilidad en los elementos de menú de navegación de un sitio web:
La semántica es esencial para garantizar que los menús de navegación en un sitio web sean accesibles para todos los usuarios. La etiqueta “nav” debe ser utilizada para marcar la sección de navegación del sitio, y las etiquetas “ul” y “li” deben ser utilizadas para describir las listas de elementos de menú. Es importante incluir atributos “id” y “class” para facilitar la navegación mediante teclado y mejorar la compatibilidad con lectores de pantalla.
Semántica y accesibilidad en las secciones y artículos de un sitio web:
La semántica es esencial para garantizar que las secciones y artículos en un sitio web sean accesibles para todos los usuarios. Las etiquetas “header”, “nav”, “main”, “article”, “section”, “aside” y “footer” deben ser utilizadas de manera precisa y coherente para describir la estructura y el contenido del sitio. Es importante incluir atributos “id” y “class” para facilitar la navegación mediante teclado y mejorar la compatibilidad con lectores de pantalla.
Semántica y accesibilidad en las imágenes de un sitio web:
La semántica es esencial para garantizar que las imágenes en un sitio web sean accesibles para todos los usuarios. La etiqueta “img” debe ser utilizada para describir las imágenes y el atributo “alt” debe proporcionar una descripción alternativa de la imagen para los usuarios que no pueden verla.
(Texto extraido desde: Pautas de Accesibilidad — Senadis)
Las alternativas textuales se deben proporcionar para todo el contenido no textual para que se pueda convertir a formatos como textos ampliados, Braille, voz, símbolos, entre otros, según estime el usuario de acuerdo con sus necesidades.Es importante asegurarse de que las imágenes no contengan información importante que no esté disponible en el texto alternativo. También es recomendable utilizar etiquetas “figure” y “figcaption” para describir el contexto y el contenido de las imágenes. Además, es importante asegurarse de que las imágenes tengan un tamaño adecuado y estén optimizadas para cargar rápidamente.
En resumen, el uso correcto de la semántica web es esencial para garantizar la accesibilidad y la usabilidad de un sitio web. Es importante utilizar etiquetas y atributos de manera precisa y coherente para describir la estructura y el contenido del sitio. También es importante utilizar mecanismos de navegación y retroalimentación para facilitar la navegación mediante teclado y mejorar la compatibilidad con lectores de pantalla. Al asegurar que su sitio web es accesible, se está aumentando la experiencia del usuario.
Escrito por: Vladimir Draguicevic M.
Head of design in ForSend
Creador de contenido en BrandWarm.cl
Docente en Escuela de Diseño Duoc UC.
Adobe Certified XD Essentials
Conectemos en Linkedin :).