Las claves de la accesibilidad web en la era digital

Introducción a la accesibilidad Web en HTML

Bienvenido a un nuevo post, donde toca hablar de un tema que no se puede quedar de lado, hablo de la accesibilidad web en HTML, si eres desarrollador principiante quizás desconozcas este término, pero a medida que avances en tu día a día picando código y desarrollando páginas web, y más aún cuando te toque realizar proyectos serios, te toparas con esto inevitablemente, el tema de accesibilidad web es tal vez para algunos algo que miran de menos, Porque digo esto?:

WebAIM publicó una actualización en 2023 llamada «The WebAIM Million«, donde se muestra que un análisis automatizado WAVE de las páginas de inicio de los principales un millón de sitios web revela problemas generalizados de accesibilidad

Entonces, basados en lo anterior vemos la importancia de tomar este tema muy enserio, por ello, veremos varios temas interesantes, que estoy seguro te servirán de mucho, trataremos temas como la inclusión correcta de descripciones, veremos que etiquetas semánticas podemos utilizar para una correcta estructura de nuestro sitio web y que a su vez cumpla las pautas de accesibilidad.

También cubriremos temas para el correcto contraste entre color de texto y el fondo de este, así como las correctas y distintas secciones que debe de incluir un proyecto que sea inclusivo para todas las personas, sin excepciones y muchas cosas más, te invito a seguir leyendo, estoy seguro este post te aportara algún valor significativo que al final terminaras agradeciéndome

Empecemos por preguntarnos ¿Qué es la accesibilidad web?

Pues la accesibilidad web se refiere a la práctica de diseñar y desarrollar sitios web que sean accesibles para todas las personas, especialmente aquellas con discapacidades, es importante garantizar la inclusión y el acceso a la información y los servicios en línea.

Importancia de la accesibilidad en HTML

La accesibilidad es un tema de relevancia, para asegurar que todas las personas puedan acceder y utilizar sitios web de forma eficiente. Al crear un sitio web accesible, se promueve la inclusión para todos, sin excepciones independientemente de sus habilidades o limitaciones.

Principios básicos de accesibilidad en HTML

Hay una serie de principios básicos que debemos tomar en cuenta, ya que llevar los lineamientos por la ruta correcta es muy importante. Veamos algunos de estos principios

Uso correcto de etiquetas semánticas: Utilizar correctamente las etiquetas semánticas en HTML es fundamental para proporcionar una estructura clara del contenido. Esto sin duda alguna beneficia a los usuarios porque los ayuda a comprender y navegar por el sitio de manera más eficiente.
Proporcionar alternativas textuales a elementos no textuales: Agregar atributos alt a las imágenes y proporcionar una descripción alternativa a las personas con discapacidad visual. Permitirá comprender el contenido visual a través de lectores de pantalla u otros dispositivos de asistencia. Por ello es importante que siempre mantengas presente en no omitir el atributo alt en elementos como más imágenes, por decir algo.
Uso de atributos y propiedades accesibles: El uso de atributos y propiedades accesibles en HTML mejora la navegación y la experiencia de usuario. Al brindar información adicional, además de incluir el elemento alt, también debes incluir otros elementos que trabajen en conjunto para el mismo objetivo, estos pueden ser; títulos o etiquetas, esto facilita la comprensión del contenido y la interacción con el contenido interactivo.
Contraste de color y legibilidad: Garantizar un contraste adecuado y una legibilidad óptima es esencial para que todos los usuarios puedan leer y comprender el contenido fácilmente. La elección de colores y fuentes adecuadas, por supuesto, juega un papel muy importante en beneficio de mejorar la accesibilidad visual.
Navegación y estructura clara: Una navegación clara y estructurada facilita la comprensión y el acceso al contenido. Utilizar una jerarquía correcta de encabezados y enlaces, ayuda a los usuarios a orientarse y encontrar la información que están buscando.

Etiquetas y atributos accesibles en HTML

A continuación, veamos una serie de elementos y atributos importantes que debes de manejar para seguir los lineamientos de la accesibilidad web al crear tus proyectos

Etiqueta <header> y <nav>: Con la etiqueta <header> definimos el encabezado de una página web, mientras que la etiqueta <nav> la utilizamos para definir la sección de navegación. Al utilizar estas etiquetas de manera adecuada, se mejora la accesibilidad y la estructura del sitio.
Etiqueta <main> y <section>: Dentro de la etiqueta <main> es donde incluiremos el contenido principal de una página web, contenido que será visible por el usuario, mientras que a la etiqueta <section> la utilizamos para dividir el contenido en secciones lógicas que generalmente llevan una estructura definida de acuerdo con el contenido. Estas etiquetas ayudan a organizar y estructurar el contenido de manera accesible.
Atributo alt en imágenes: El atributo alt se utiliza para proporcionar una descripción alternativa a las imágenes. Es importante que utilices este atributo de forma correcta para que las personas con discapacidad visual puedan comprender el contenido.
Atributo title en enlaces: El atributo title se utiliza para proporcionar información adicional sobre un enlace, la forma en la que puedes observar el efecto de este atributo es pasando el puntero sobre el elemento al cual le definiste este atributo. Al utilizar title de manera correcta, se mejora la accesibilidad y se brinda más contexto al usuario.
Etiqueta <label> para formularios: La etiqueta <label> se utiliza para asociar una etiqueta descriptiva con un elemento de formulario, como un campo de entrada. Esto mejora la accesibilidad y facilita la interacción de los usuarios con los formularios. Suele utilizarse mas que todo en formularios y un aspecto que mejora aun mas la accesibilidad, es incluir al elemento <input> dentro del elemento label.
Atributo tabindex para mejorar la navegación por teclado: Con el atributo tabindex, definimos un orden de tabulación lógico al navegar con el teclado. Esto sin ninguna duda le facilita la vida en gran manera a las personas con discapacidades motoras.

Herramientas y recursos para evaluar la accesibilidad en HTML

Es muy importante realizar una evaluación de nuestro proyecto, una vez hayamos seguido los lineamientos anteriores, siempre es recomendable asegurarse de que todo saldrá de acuerdo con lo esperado, por eso es por lo que no podemos pasar por alto el realizar esta serie de validaciones para estar seguros.

Validadores de HTML

Hay varias herramientas en línea que permiten validar la estructura y el código de HTML para asegurarse de que cumple con los estándares de accesibilidad.

Algunos ejemplos son:

El validador del W3C (World Wide Web Consortium)
- El validador de accesibilidad de WebAIM.

Lector de pantalla

Los lectores de pantalla son herramientas útiles para las personas que no tienen la capacidad de leer, estos lectores convierten el texto en voz, permitiendo una navegación visual y acceso al contenido de un sitio web.

Algunos ejemplos de lectores de pantalla más conocidos pueden ser:

JAWS
NVDA
VoiceOver

Extensiones y complementos de accesibilidad

Existen extensiones y complementos disponibles para navegadores web que ayudan a evaluar y mejorar la accesibilidad de los sitios web.

Esta son algunas opciones de extensiones

Guías y recursos en línea

Hay numerosas guías y recursos en línea que proporcionan información detallada sobre cómo crear sitios web accesibles en HTML.

Algunos ejemplos serían los siguientes:

Prácticas y principios de accesibilidad web

Uso de encabezados y jerarquía de títulos

Utilizar encabezados adecuados y una jerarquía de títulos clara es fundamental para mejorar la accesibilidad en HTML.

Los encabezados (h1, h2, h3, hasta h6.) ayudan a los usuarios a comprender la estructura y la organización de la página. Es importante utilizarlos de forma secuencial siguiendo un orden en concreto, para facilitar la navegación y comprensión del contenido.

Los encabezados no se escapan de los lectores de pantalla, de esta forma, se permite a las personas que utilizan estos dispositivos, acceder al contenido de manera más eficiente, ya que no ayudaríamos mucho al usuario si primero definimos un h1. Luego un h2, seguido de un h1, y así en lo sucesivo, esto va en contra de las pautas de la accesibilidad web.

Evitar el uso exclusivo de colores para transmitir información

Es importante evitar depender únicamente de los colores para transmitir información en HTML, ya que esto puede dificultar la comprensión para las personas con discapacidad visual o daltonismo. Es recomendable proporcionar indicaciones visuales o textuales adicionales para comunicar la información de manera clara y accesible.

Por ejemplo, se pueden utilizar íconos, patrones o etiquetas descriptivas para brindar una alternativa a la información transmitida solo por colores.

Proporcionar descripciones alternativas a elementos no textuales

Los elementos no textuales, como imágenes, videos y gráficos, deben tener descripciones alternativas para que las personas con discapacidad visual puedan comprender su contenido. Esto se logra utilizando el atributo «alt» como lo mencione arriba. Las descripciones alternativas deben ser concisas y descriptivas, transmitiendo la información relevante del elemento visual.

Por ejemplo, si insertas la imagen de un gato negro sentado en la ventana, la descripción seria “imagen de un gato negro sentado en la ventana”, no te atrevas a poner una descripción como “gato negro” no estas dando contexto al usuario y esta demás decir, que estas faltando a las normas de la accesibilidad

Utilizar texto legible y contrastante

Para mejorar la accesibilidad, es importante utilizar fuentes que sean fáciles de leer para el usuario así como tambien un contraste adecuado entre el texto y el fondo. Las fuentes deben ser claras y de fácil lectura, evitando el uso de fuentes decorativas o demasiado estilizadas que puedan dificultar la comprensión.

Además, el contraste entre el texto y el fondo debe ser suficiente para garantizar que el contenido sea legible para todas las personas.

Proporcionar opciones de navegación alternativas

Ofrecer opciones de navegación alternativas es fundamental para mejorar la accesibilidad. Esto incluye crear menús desplegables, enlaces de salto y otras técnicas que permitan a los usuarios navegar por el contenido de manera más eficiente.

Proporcionar una navegación clara y estructurada facilita el acceso a todas las áreas del sitio web, aun para las personas que no pueden utilizar un mouse.

Evitar el uso de elementos interactivos que requieran solo el uso del mouse

Es importante evitar el uso de elementos interactivos que solo puedan ser utilizados con un mouse. Es recomendable proporcionar alternativas para interactuar con estos elementos utilizando solo el teclado, como atajos de teclado o comandos de voz. Esta es otra forma de incluir a las personas que se les podría dificultar trabajar con el uso del mouse.

Organizar y estructurar el contenido de manera clara

La correcta organización de estructura del contenido es esencial para mejorar la accesibilidad. Utilizar etiquetas semánticas adecuadas, como las ya mencionadas antes como son, <nav>, <article> y <section>, ayuda a los usuarios a comprender la estructura y la relación entre los diferentes elementos de la página.

Formularios accesibles

Los formularios son elementos comunes en los sitios web y es importante hacerlos accesibles. Esto incluye utilizar etiquetas <label> para asociar correctamente las etiquetas con los campos de entrada, como te lo acabo de decir hace unos momentos, también, hacer uso de atributos accesibles como «aria-label» y «aria-describedby» para brindar información adicional a los usuarios y validar los formularios adecuadamente para ayudar a prevenir errores y proporcionar retroalimentación clara y accesible.

Probar y validar la accesibilidad del sitio web

También es importante realizar pruebas y validaciones de accesibilidad para garantizar que el sitio web cumpla con los estándares de accesibilidad. Esto implica realizar pruebas con diferentes herramientas de evaluación de accesibilidad, como las mencionadas anteriormente, y también realizar pruebas de usabilidad con usuarios reales.

Estas pruebas ayudarán a identificar posibles barreras de accesibilidad y realizar los ajustes necesarios para mejorar la experiencia del usuario en general.

Mantenerse actualizado sobre las pautas de accesibilidad

La accesibilidad está en constante evolución, por lo que es importante mantenerse actualizado sobre las pautas y estándares de accesibilidad, ya que al implementar una característica de todas la ya mencionadas, a ese momento, podría está ya obsoleta.

Para eso existen entes que regulan y mantienen al día estos estándares web, como, por ejemplo, (W3C) la World Wide Web Consortium y su iniciativa de Accesibilidad Web (WAI). Mantenerse al tanto de las últimas recomendaciones y prácticas recomendadas asegurará que tu sitio web cumpla con los estándares más actualizados y ofrezca una experiencia accesible para todos los usuarios.

Conclusiones y próximos pasos

Resumen de los conceptos clave aprendidos sobre accesibilidad en HTML

A modo de resumen, analizamos algunas buenas prácticas para mejorar la accesibilidad web en HTML. También aprendimos sobre la importancia de utilizar encabezados y una jerarquía de títulos adecuada, evitar el uso exclusivo de colores para transmitir información, proporcionar descripciones alternativas a elementos no textuales, utilizar texto legible y contrastante, ofrecer opciones de navegación alternativas.

Evitar elementos interactivos que requieran solo el uso del mouse, organizar y estructurar el contenido de manera clara, hacer que los formularios sean accesibles, probar y validar la accesibilidad del sitio web, y mantenerse actualizado sobre las pautas de accesibilidad.

Ultima actualizaciones realizada hasta la fecha en lo que respecta a la accesibilidad web

A continuación, te dejo una serie de criterios que son lo último hasta la fecha de publicación de este post, en lo que respecta a la accesibilidad web, lo que sigue son todos los criterios que han sido actualizados, entra a los enlaces de “Recursos adicionales y referencias sobre accesibilidad en HTML” que te dejo a bajo, si quieres mantenerte al tanto de las nuevas directrices en la accesibilidad web.

Nuevos Criterios de Éxito en WCAG 2.2 (Publicado el 5 de octubre de 2023)

WCAG 2.2 añade 9 nuevos criterios de éxito desde WCAG 2.1.
Los criterios de éxito de WCAG 2.0 y 2.1 se mantienen esencialmente iguales en 2.2, con una excepción: el criterio de éxito 4.1.1 Parsing se ha vuelto obsoleto y se ha eliminado de WCAG 2.2.
También se incluyen notas sobre diferentes idiomas.

Nuevos Criterios de Éxito bajo la Directriz 2.4

Navegable

2.4.11 Enfoque No Oscurecido (Mínimo) (AA)
2.4.12 Enfoque No Oscurecido (Mejorado) (AAA)
2.4.13 Apariencia del Enfoque (AAA).

Nuevos Criterios de Éxito bajo la Directriz 2.5

Modalidades de Entrada

2.5.7 Movimientos de Arrastre (AA)
2.5.8 Tamaño del Objetivo (Mínimo) (AA).

Nuevo Criterio de Éxito bajo la Directriz 3.2

Predecible

3.2.6 Ayuda Consistente (A).

Nuevos Criterios de Éxito bajo la Directriz 3.3

Asistencia de Entrada

3.3.7 Entrada Redundante (A)
3.3.8 Autenticación Accesible (Mínimo) (AA)
3.3.9 Autenticación Accesible (Mejorado) (AAA).

Por último, no queda más que decir, solo agradecerte por leer, ya que llegaste hasta aquí. Invitarte a compartir el post con tu cadena de contactos y colegas. Si crees que te aportó algún valor, te invito a que te suscribas a BlogDeveloper para seguir recibiendo posts como este, y mucho más. Considera dejar un comentario si has tenido alguna experiencia en tus proyectos, tu feedback es muy valorado, y no olvides sugerir algún tema en particular en BlogDeveloper. Siempre serás escuchado y tomado en cuenta como un lector de elite. Hasta un próximo post, gracias totales. Yo volveré.

Recursos adicionales y referencias sobre accesibilidad en HTML

Aquí te proporciono algunos recursos adicionales y referencias que pueden ser útiles para aprender más sobre la accesibilidad en HTML:

Pautas de Accesibilidad para el Contenido Web (WCAG) del W3C: https://www.w3.org/WAI/standards-guidelines/wcag/
Accesibilidad Web de Mozilla Developer Network: https://developer.mozilla.org/es/docs/Accessibility
WebAIM: https://webaim.org/
Deque University: https://dequeuniversity.com/

Descubre más sobre {Bl0g Devel0pers}

Suscríbete y recibe las últimas entradas en tu correo electrónico.

Posted by:

codevhn