Compromiso de accesibilidad

En la diaria queremos tener un sitio web accesible para todas las personas, independientemente de su capacidad.

La accesibilidad web, también conocida como a11y, se refiere en términos generales a las aplicaciones web que pueden ser utilizadas por todas las personas independientemente de sus capacidades cognitivas, físicas o visuales, sus habilidades técnicas o sus circunstancias situacionales (como una mala conexión a Internet).

Hay numerosas formas en que las personas que diseñan y desarrollan pueden incorporar principios de accesibilidad en sus aplicaciones web utilizando CSS y HTML básicos.

En la diaria, hemos tomado medidas para mejorar la accesibilidad de nuestro sitio web.

Accesibilidad y el proceso de diseño

En el proceso de diseño y desarrollo de nuestro sitio web se incorporan de manera integral las consideraciones de accesibilidad.

Creemos que esta práctica es importante e incentivamos a que todo equipo de diseño y desarrollo considere aplicarla.

Estándares WCAG 2.1

Nuestro objetivo es cumplir con los estándares de accesibilidad WCAG 2.1 hasta el nivel AAA y otros estándares recomendados.

Características de accesibilidad incorporadas

Una lista de algunas características de accesibilidad que hemos ido incorporando al sitio web para mejorar la experiencia de personas con el mismo.

Desplegar lista de características de accesibilidad incorporadas

Omisión de contenido repetitivo

Los menús de navegación del sitio de la diaria hace que estos se hagan repetitivos y molestos al navegarlo con tecnología de asistencia. Aplicamos un enlace de omisión para permitir que las personas que utilizan tecnología de asistencia puedan fácilmente saltar al contenido y omitir la navegación de los menús.

Un enlace de omisión es un ancla fuera de la pantalla que siempre es el primer elemento enfocable y contiene un enlace al contenido principal de la página, por ejemplo en Artículo un enlace al título, o en Portada un enlace al título del primer artículo destacado.

Debido a que es el primer elemento de la página, solamente se necesita una acción de la tecnología de asistencia para enfocarlo y evitar la navegación repetitiva.

Porción de código para omitir contenido repetitivo.
La ubicación del código para omitir contenido repetitivo es el primer contenido enfocable de la página y lectores de pantalla pueden saltar inmediatamente al contenido (sin lector de pantalla aparece al tocar la tecla Tab).

Uso de atributos ARIA

Las personas que utilizan lectores de pantalla y otras tecnologías de asistencia necesitan información sobre el comportamiento y el propósito de los controles en las páginas web.

Los controles HTML incorporados, como botones y grupos de radio, vienen con esa información incorporada. Sin embargo, para algunos elementos que la información está ausente, incorporamos información con roles y atributos ARIA.

Un ejemplo es en el componente Compartir en Artículo, que no contiene en texto visible a qué corresponde cada botón.

Saber más sobre ARIA.

Componente Compartir en Artículo.
Código del botón para compartir en WhatsApp con su respectivo atributo ARIA.

Los elementos de imagen tienen atributos [alt]

El elemento [alt] de las imágenes correspondientes a fotografías e ilustraciones en el sitio de la diaria contiene el texto descriptivo de la respectiva imagen.

Imagen con pie de foto.
Información de pie de foto en atributo [alt] de la imagen.

Los enlaces tienen un nombre discernible

El texto de enlace que es discernible, único y enfocable mejora la experiencia de navegación para las personas que utilizan lectores de pantalla.

Ejemplo de enlaces con nombre discernible.

Los colores de fondo y primer plano tienen una relación de contraste suficiente

El texto que tiene una relación de contraste baja, es decir, texto cuyo brillo está demasiado cerca del brillo del fondo, puede ser difícil de leer. Por ejemplo, presentar texto gris claro sobre fondo blanco dificulta a las personas distinguir las formas de los caracteres, lo que puede reducir la comprensión lectora y ralentizar la velocidad de lectura.

Si bien este problema es particularmente desafiante para las personas con baja visión, el texto de bajo contraste puede afectar negativamente la experiencia de lectura de cualquier persona.

Ejemplos de relación de contraste utilizadas en el sitio de la diaria las cuales todas aprueban los standards WCAG nivel AAA.
Ejemplo de una herramienta de chequeo de contraste con una de las variantes de colores utilizadas en el sitio de la diaria. Estas herramientas también vienen incorporadas directamente en las herramientas de desarrollador de los navegadores.

Más prácticas recomendadas de accesibilidad aplicadas

El elemento <html> tiene un atributo [lang]
Si una página no especifica un atributo de idioma, un lector de pantalla asume que la página está en el idioma predeterminado que el usuario eligió al configurar el lector de pantalla. Si la página no está realmente en el idioma predeterminado, es posible que el lector de pantalla no anuncie el texto de la página correctamente.

Atributo [lang] en el elemento <html>.

Las páginas tienen el elemento <title>
El título brinda a las personas que utilizan de lectores de pantalla una descripción general de la página.

Elemento <title> en un artículo.

Los elementos de encabezado aparecen en orden secuencial descendente (<h1>, <h2>, <h3>…)
Los encabezados correctamente ordenados que no saltan niveles transmiten la estructura semántica de la página, lo que facilita la navegación y la comprensión cuando se utilizan tecnologías de asistencia.

Elementos de encabezado <h1>, <h2> y <h3> secuenciados en un artículo.

Fragmentos de algunos textos explicativos de esta página fueron extraídos del sitio web.dev, traducidos al español y adaptados.

Evaluación con herramientas automáticas

Creemos las evaluaciones de herramientas automáticas no son el único indicador a considerar para mejorar la accesibilidad de un sitio web, pero sí pueden ser de gran ayuda.

Lighthouse

La herramienta Lighthouse creada por Google sirve para evaluar el estado de diferentes aspectos de un sitio web, entre ellos su accesibilidad.

Hemos ido trabajando en diferentes mejoras para llegar a un puntaje positivo en esta herramienta.

98 puntos de 100 en accesibilidad en Portada y Artículo del sitio web de la diaria (Mayo 2021).

WAVE

La herramienta WAVE de WebAIM analiza y genera un reporte de accesibilidad de cualquier página web.

Trabajamos en remover todos los errores reportados por esta herramienta tanto en Portada como Artículo y más páginas del sitio web.

Reporte WAVE de Portada con 0 errores (Mayo 2021).

Herramientas

Herramientas que utilizamos para mantener el sitio web accesible.

Testeos manuales
Testeos manuales en el proceso de diseño visual y front-end del sitio web.

Testeos automáticos

Recursos

Algunos de los recursos que utilizamos para aplicar prácticas de accesibilidad en nuestro proceso de diseño.

Reportá problemas

Si encontrás alguna dificultad para utilizar el sitio web podés reportar el problema y obtener ayuda a través de las diferentes vías listadas en nuestra página de contacto.

Muchas gracias.