Pruebas rápidas de accesibilidad que cualquiera puede hacer

 

 

Las pruebas se pueden hacer en pocos minutos sin herramientas de prueba o conocimientos especializados. Si bien no reemplazan la necesidad de una evaluación de accesibilidad más completa.

Estas pruebas cubren tres de los cuatro principios de las Pautas de Accesibilidad al Contenido Web (WCAG) 2.1: perceptible, operable y comprensible

Contenido perceptible

Garantizar que la información esencial pueda ser percibida por todos, incluidas las personas que no pueden ver u oír contenido, o que necesitan modificar su presentación visual.

Prueba 1: Subtítulos

Si su contenido contiene videos cuya pista de audio transmite información, los subtítulos deben estar disponibles para las personas que no pueden escuchar o entender la pista de audio. Esto incluye:

·       Personas con discapacidad auditiva

·       Personas cuyo primer idioma no es el que se usa en los videos y quieren leer también lo que escuchan

·       Personas que no tienen auriculares y se encuentran en un entorno ruidoso (bar, metro..)

·       Personas en un lugar tranquilo que no desean molestar a los demás (Biblioteca…)

Verifique lo siguiente:

·       Los subtítulos (cerrados o abiertos) están disponibles cuando la pista de audio transmite información

·       Los subtítulos son precisos, por ejemplo, coinciden con la pista de audio

·       Los subtítulos se sincronizan con la pista de audio

·       Los subtítulos se tienen que ver a 2 metros

·       Los subtítulos deben tener suficiente contraste

 

Prueba 2: Cambio de tamaño del contenido

Las personas con discapacidades visuales y las personas mayores pueden necesitar aumentar o disminuir el tamaño del texto para leerlo cómodamente. Pueden hacerlo utilizando la funcionalidad de zoom del navegador o la configuración de accesibilidad de su dispositivo. Pero más recomendable es usar la extensión de Chrome Zoom Text Only

 

Verifica

·       Todo el texto cambia de tamaño en consecuencia

·       Todo el contenido permanece visible y legible, por ejemplo, ningún texto se superpone o se trunca

·       Todo el contenido se puede ver sin tener que desplazarse horizontalmente (en sitios web)

 

Prueba 3: Personalización del color

Muchas personas no pueden leer el texto a menos que esté en un color específico y contra un fondo particular. Por ejemplo, las personas con discapacidades visuales o de lectura, como el daltonismo o la dislexia, se benefician de la personalización del texto y el color de fondo.

Prueba 4: Enlaces

Los enlaces ofrecen a las personas una manera fácil de navegar por el contenido y encontrar la información que desean. Cuando los enlaces se identifican usando solo el color, algunas personas pueden tener dificultades para notarlos, por ejemplo:

·       Personas incapaces de percibir algunos o todos los colores

·       Personas que usan una aplicación en un lugar muy soleado o luminoso

·       Personas que usan una aplicación en un entorno oscuro

El uso de una señal visual adicional, como un subrayado, puede ayudar a todas las personas videntes a encontrarlos.

Prueba 5: Legibilidad del texto

Las fuentes, los estilos y la alineación pueden tener un gran impacto en la legibilidad del texto para algunas personas. Si bien no hay reglas establecidas en torno a las fuentes de texto y la alineación, las fuentes simples y de uso común y el texto alineado a la izquierda son más fáciles de leer. Los estilos como negrita, cursiva y todas las mayúsculas pueden disminuir la legibilidad del texto, especialmente si se usan para bloques largos de contenido.

Comprueba lo siguiente:

·       Se utilizan fuentes simples y comunes

·       El texto está alineado a la izquierda

·       La negrita, la cursiva y el texto en mayúsculas se utilizan con moderación

Prueba 6: Probar si el contenido es operable

No todo el mundo puede o quiere usar sitios web con un mouse o aplicaciones móviles con gestos. Muchos prefieren, o necesitan, utilizar métodos de entrada alternativos. Estos incluyen teclados, palillos bucales, seguimiento ocular, reconocimiento de voz y mucho más. Con tantos dispositivos de entrada diferentes, verificar el soporte para todos es casi imposible. Afortunadamente, la forma en que la mayoría de los dispositivos de entrada interactúan con el contenido digital es relativamente similar. Al asegurarse de que el contenido funcione bien con un teclado, puede estar razonablemente seguro de que ofrecerán un buen soporte para otros dispositivos de entrada.

 

Comprueba que es posible navegar por el contenido solo con el teclado. Esto significa que puede alcanzar y activar todos los elementos, como botones, enlaces y controles. El orden en que se alcanzan esos elementos debe ser lógico, o las personas pueden desorientarse.

Con un teclado, navegue por el contenido y compruebe lo siguiente:

·       Se puede acceder a todos los botones, enlaces, campos de formulario utilizando la tecla Tab

·       Todos los botones, enlaces, campos de formulario se pueden activar utilizando la tecla Enter o espacio

·       Todos los botones, vínculos, campos de formulario tienen un estado de enfoque visible

·       El orden del contenido es lógico

 

Prueba 7: Omitir enlaces

Las personas que usan teclados, joysticks, punteros de cabeza y dispositivos de entrada similares, navegan por las páginas secuencialmente: desde el primer elemento en la parte superior hasta el último en la parte inferior. A veces, esto hace que las personas tengan que presionar una tecla o botón muchas veces antes de llegar al contenido que desean. Esta es la razón por la que omitir enlaces, permite a las personas omitir secciones de contenido completas, son útiles, especialmente en páginas con grandes menús de navegación. Omitir enlaces debe ser los primeros elementos en cada página y siempre visibles o ser visibles cuando reciben enfoque. "Saltar al contenido principal" .

Prueba 8: Probar si el contenido es comprensible

Garantizar que la información sea fácil de entender es esencial para todos, especialmente para las personas con discapacidades cognitiva, temporales o permanentes. Por ejemplo, alguien con una discapacidad de aprendizaje puede tener dificultades para entender las oraciones, o alguien con una migraña puede encontrar difícil concentrarse. El contenido diseñado y escrito utilizando las mejores prácticas de accesibilidad es más fácil de comprender para todos.

Prueba 9 : Estructura de contenido

Una estructura de contenido bien desarrollada es una de las formas en que puede mejorar su legibilidad y comprensión. Los bloques largos de contenido sin estructura son más difíciles de entender. La información presentada en listas con viñetas o numeradas generalmente son más fáciles de comprender.

Compruebe lo siguiente:

·       El contenido se divide en secciones breves, cada una precedida por un encabezado descriptivo.

·       Las listas con viñetas y numeradas se utilizan cuando es apropiado

·       La navegación con lectores de pantalla de escritorio y lectores de pantalla móviles analiza cómo las personas navegan por la estructura de contenido, incluidos los encabezados.

 

Prueba 10: Texto de enlace

Todos los enlaces deben ser lo suficientemente descriptivos para que las personas entiendan su propósito, por ejemplo, "leer todas las noticias de nuestra empresa" y "cómo registrarse" son claros. Los enlaces faltos de significado como "haga clic aquí" o "leer más" deben evitarse. Evite usar una URL como texto de enlace; son difíciles de leer y procesar para todos. Para los enlaces que cargan contenido que no sean páginas web como PDF, incluir el formato de contenido es una buena práctica. Por ejemplo, "Informe anual 20-21 (PDF)" en lugar de "Informe anual 20-21".

Compruebe lo siguiente:

·       Los enlaces le proporcionan suficiente información para saber qué contenido cargan.

·       No se utiliza texto de enlace genérico como "leer más", "haga clic aquí" o similar

·       Una URL no se utiliza como texto de enlace

·       Los enlaces que cargan PDF u otros documentos incluyen el formato de archivo

Prueba 11: Títulos de página

Los títulos de página son clave para muchas personas. que los usuarios de lector de pantalla escuchan cuando navegan a una nueva página y la única información visible cuando se abren varias pestañas en el navegador. Asegúrese de que todas las páginas de su sitio web tengan un título único y descriptivo. Un título descriptivo también debe estar en el encabezado de las pantallas de las aplicaciones móviles.

Compruebe lo siguiente:

·       Los títulos de las páginas web describen el contenido único de cada página

·       Las pantallas en las aplicaciones móviles tienen un título único y descriptivo

·       Los títulos comienzan con la página o el nombre de pantalla, por ejemplo, "Noticias - Babel" en lugar de "Babel - Noticias"

La necesidad de la accesibilidad en nuestra vida diaria

 

El hecho es que la accesibilidad nos beneficia a todos y no solo afecta a "esa persona" en el departamento.

Si no fuera por "esa persona" en silla de ruedas que necesitaba un ascensor para llegar a los pisos superiores, todos seguiríamos subiendo escaleras. Si no fuera por "esa otra persona" que necesitaba que sus dispositivos pasarán de texto a voz los contenidos, ninguno de nosotros podría pedir nada a Alexa o preguntarle a Siri sobre el tiempo que hará hoy Todos nos beneficiamos de la accesibilidad digital. Es personal, pero para algunos, es esencial.

El artículo "5 razones por las que priorizar la accesibilidad web es bueno para su negocio"; incorporar la accesibilidad al comienzo de un proceso de desarrollo o rediseño es significativamente más fácil y menos costoso que hacer mejoras al contenido existente.

¿Qué es el "contenido accesible" que preguntas? A menudo les digo a la gente que me pregunta,1º que el contenido accesible significa que es contenido POCR.

P = Perceptible

O = Operable

C = Comprensible

R = Robusto.

En pocas palabras, esto significa que la mayoría de su audiencia puede:

·       Percibir toda la información presentada,

·       Operar todas las funciones,

·       Comprender no solo la información presentada, sino también cómo navegarla

·       (R) pueden trabajar con tecnologías de asistencia.

Microsoft encargó un estudio de impacto económico que encontró que la implementación de un diseño web accesible minimiza el abandono del sitio por parte de los usuarios. Esto "resulta en un estimado adicional de 2.4 millones de dólares en ingresos anuales para Microsoft". En pocas palabras, cuantas más personas permanezcan en su sitio web, más dinero ganará.

ARIA in HTML ya es una recomendación (por lo tanto especificación) del W3C

 

Ya que ARIA a 9 de diciembre de 2021 pasa a ser una recomendación del W3C, es bueno recordad las 5 recomendaciones.

Regla 1: No uses ARIA, usa un elemento o atributo HTML nativo.

INCORRECTO

<div role="button">Click aquí</div>

Los botones HTML son ejecutables (con teclado y ratón), pueden tener foco, y los lectores de pantalla los reconoce como botones.

CORRECTO

<button>Click aquí</button>

Regla 2: No cambies la semántica nativa, a menos que realmente lo necesites hacer.

INCORRECTO

<h2 role="tab">AREA 1</h2>

Los títulos no deberían tener el atributo role="tab". Para eso deberemos usar otro elemento como un <div>.

CORRECTO

<div role="tab">

  <h2>AREA 1</h2>

</div>

Regla 3: Todos los controles interactivos de ARIA deben poder utilizarse con el teclado.

Tenemos que recordar que entre los usuarios de nuestro sitio web se encuentran usuarios con discapacidad visual, y que habitualmente esos usuarios navegarán por nuestro sitio web usando el teclado (gracias a sus software de lectura de pantalla). Si alguno de los controles interactivos no es accesible mediante teclado, esos usuarios no podrán clicar en los botónes, o introducir datos en el formulario.

Regla 4: No uses role=“presentation” o aria-hidden=“true” en elementos que requieran foco.

Si en nuestro sitio web tenemos algún elemento que requieran foco, por ejemplo, botones o campos de un formulario, no deberemos usar los atributos role="presentation o aria-hidden="true".

Si usamos cualquiera de esos atributos en un elemento HTML, ese elemento no podrá tener foco y serán omitidos en una navegación usando el teclado. Deberemos usar esos atributos para elementos como un gráfico decorativo o iconos, en los que no queremos que el usuario pueda hacer foco.

INCORRECTO

<button aria-hidden="true">Click aquí</button>

CORRECTO

<img src="./icon.png" alt="Icono de una papelera" aria-hidden="true" />

Regla 5: Todos los elementos interactivos deben tener un nombre accesible.

Cualquier elemento interactivo de nuestro sitio web, por ejemplo, un botón o un campo en un formulario, solo tendrá un nombre accesible si su propiedad de nombre accesible de API de accesibilidad (o equivalente) tiene un valor.

 

INCORRECTO

<html>

  <form>

    ...

    <label>Nombre</label>

    <input type="text" />

    ...

  </form>

</html>

Pero un lector de pantalla no sabrá como relacionar la etiqueta con el campo, ya que no tiene un nombre accesible, y no están relacionadas de ningún modo. En el siguiente ejemplo podemos ver la forma correcta de hacerlo, usando el atributo id="username" en el campo y el atributo for="username" en la etiqueta. De esta manera estarán relacionadas, y el lector de pantalla podrá identificarlos juntos.

CORRECTO

<html>

  <form>

    ...

    <label for="username">Nombre</label>

    <input id="username" type="text" />

    ...

  </form>

</html>