Laboratorio de accesibilidad: Búsqueda de Tesoro

Recursos

Antes de comenzar con la Búsqueda del Tesoro, explore estos recursos para obtener más información sobre algunas herramientas simples de auditoría de accesibilidad digital. Estas herramientas ayudan a identificar fácilmente problemas de accesibilidad en páginas web y otros documentos.

Además, no olvide consultar los ejercicios prácticos del laboratorio de accesibilidad para conocer las diferentes tecnologías de asistencia y las herramientas de auditoría de accesibilidad digital.
 

Comprobador de contraste de color WEBAIM

• Este verificador de contraste de color le permite verificar manualmente el contraste entre los materiales escritos y el color de fondo para asegurarse de que sean suficientes para las personas con baja visión.

Marcadores de Paul J. Adams

• Los marcadores de JavaScript para pruebas de accesibilidad son marcadores (que funcionan en cualquier navegador) creados por Paul J. Adams para las pruebas de accesibilidad. Utilizan JavaScript para resaltar las propiedades de un sitio web y llamar la atención sobre los problemas de accesibilidad.
• A través del hipervínculo anterior, los marcadores titulados Encabezados, Imágenes y Escala de grises son especialmente útiles para verificar problemas simples de accesibilidad.

WAVE por WebAIM.org

• WAVE por WebAIM.org es una evaluación de accesibilidad web que proporciona retroalimentación visual sobre la accesibilidad de su contenido web al inyectar íconos e indicadores en su página. WAVE facilita la evaluación humana y educa sobre cuestiones de accesibilidad. Se puede descargar como una extensión web de Chrome.

• Tota11y es una herramienta de auditoría de accesibilidad de Khan Academy. Descargue este kit de herramientas de visualización de accesibilidad en GitHub que tiene como objetivo reducir la fricción de las pruebas de accesibilidad (a11y).

 

Instrucciones de búsqueda del tesoro

Debajo de esta sección hay una lista de 10 consejos de acceso digital para brindarle consejos sobre cómo crear páginas web que las personas que utilizan tecnologías de asistencia o estrategias de adaptación puedan percibir, operar y comprender más fácilmente.

Cinco de los problemas de accesibilidad a los que se hace referencia en la lista se han incorporado intencionalmente en esta página para que pueda divertirse tratando de detectarlos. Utilice las herramientas de la sección «Recursos» anterior para ayudarle a identificarlos.

 

¡La Búsqueda del Tesoro comienza a continuación!

---

 

10 consejos para que sus páginas web sean accesibles

Todos accedemos a la web con frecuencia y algunos de nosotros incluso creamos páginas web. Sabemos que diferentes personas acceden a las páginas web de manera diferente. Algunas personas usan tecnologías adicionales con su computadora o teléfono llamadas tecnologías de asistencia. Si queremos que todos puedan utilizar las páginas web que creamos, debemos comprender las necesidades de los diferentes usuarios y crear nuestras páginas para satisfacer esas necesidades.

En esta página, encontrará información útil que le ayudará a crear páginas web que sean accesibles para la mayoría de los usuarios.
 

1. Agregue texto alternativo para las imágenes

Siempre que agregue una imagen a una página web, asegúrese de agregar una descripción de texto alternativa. La mayoría de las herramientas de creación de páginas web te permitirán (o incluso te obligarán) a agregar una descripción de texto cuando intentes agregar una imagen. Si crees que la imagen es solo decorativa y no añade ningún dato, puedes optar por indicarla como decorativa.

2. Agregue subtítulos a los videos

Siempre que suba un video, asegúrese de que tenga subtítulos. Los subtítulos son importantes para los usuarios que no pueden escuchar el audio del video por cualquier motivo. Pueden ser sordos o tener problemas de audición; podrían estar recuperándose de una cirugía de orejas; o simplemente podrían estar sentados en una zona tranquila como una biblioteca mientras reproducen el video.

Videoclip adaptado de la página web W3C

3. Proporcione descripciones significativas para los hipervínculos

Piense en la descripción como una breve declaración de dónde llevará el hipervínculo al usuario que haga clic en él. Debe proporcionar significado incluso cuando se lee fuera de contexto. Esto es especialmente útil para los usuarios de lectores de pantalla que a menudo ven una lista de enlaces para la navegación. Evite las descripciones repetidas de enlaces como «Haga clic aquí» o «Leer más» por el mismo motivo. Etiqueta tus enlaces con texto descriptivo y significativo.

4. Utilice los encabezados correctamente

Los encabezados no solo crean una jerarquía visual que facilita el escaneo visual de una página, sino que también ayudan a los usuarios de lectores de pantalla a navegar rápidamente por una página web. Por ejemplo, el uso de un nivel de Encabezado 3 justo después de un elemento de Nivel de Encabezado 2 denota una sección que es una subsección del nivel de Encabezado 2 anterior.

Las etiquetas de encabezado permiten a los usuarios de lectores de pantalla saltar a las secciones que les interesan. Los niveles de encabezado del h1 al h6 se utilizan comúnmente. Los números de nivel de encabezado deben aumentar secuencialmente. Por ejemplo, usar h4 después de h2 no es correcto porque los usuarios de lectores de pantalla pueden preguntarse si se han perdido algo.

Sin encabezados de sección que indiquen dónde comienza el formulario web, los usuarios de lectores de pantalla tendrían que recorrer una gran cantidad de contenido para llegar a lo que quieren leer más a fondo.

5. Utilice títulos de página distintos y significativos

Lo primero que encontrará un usuario de lector de pantalla después de que una página web se cargue por completo es el texto entre las etiquetas de título. Lo peor que puede hacer, además de no tener la etiqueta del título, es tenerlos todos iguales en todas sus páginas web. Esto dificulta a los usuarios que confían en su marcado HTML para determinar en qué página se encuentran, o si el enlace en el que hicieron clic es la misma página web en la que estaban o no. Distinga sus páginas usando títulos apropiados.

6. Utilice la navegación para saltar

Los usuarios de lectores de pantalla tienen que leer documentos HTML de arriba a abajo, sin la capacidad de escanear la página web en busca de la información que les interesa. Omitir navegación permite a los usuarios de lectores de pantalla y a las personas que no pueden usar el mouse omitir largas listas de enlaces, como la navegación principal en un sitio web. Lea más sobre la navegación por omisión aquí.

Omitir navegación es simplemente un enlace en la parte superior de su página web que, cuando se hace clic, lo ubica en la sección de contenido. Puede ocultar este enlace a los usuarios sin discapacidad moviendo el enlace fuera de la ventana del navegador usando CSS.

7. Asegurar un contraste adecuado entre el texto y el fondo

Los usuarios con baja visión requieren un mejor contraste que una persona con visión 20/20. Las pautas de accesibilidad al contenido web especifican 4.5: 1 como la proporción requerida de contraste entre la densidad de color del texto y el fondo. Asegúrese siempre de utilizar colores para el texto y el fondo para proporcionar un contraste adecuado.Los usuarios con baja visión requieren un mejor contraste que una persona con visión 20/20. Las pautas de accesibilidad al contenido web especifican 4.5: 1 como la proporción requerida de contraste entre la densidad de color del texto y el fondo. Asegúrese siempre de utilizar colores para el texto y el fondo para proporcionar un contraste adecuado.

8. No utilice el color sólo para transmitir información.

Algunos de sus usuarios pueden ser daltónicos. El daltonismo ocurre cuando no puede ver los colores como lo hace la mayoría de las personas. El daltonismo a menudo ocurre cuando alguien no puede distinguir entre ciertos colores. Esto suele ocurrir entre verdes y rojos, y ocasionalmente entre azules.

9. No utilice imágenes de texto en lugar de texto

Para una persona que puede ver bien, leer la imagen de un texto puede no ser un problema siempre que sepa leer ese idioma. Sin embargo, los usuarios que tienen problemas de visión y usan un lector de pantalla requieren la entrada de texto. Para ellos, el texto presentado como imagen no es accesible a menos que el mismo texto también se proporcione como una descripción de esa imagen.

10. Utilice un lenguaje sencillo

Cuando se utilizan estructuras de oraciones complejas, resulta más difícil dar sentido al significado. Es posible que el castellano no sea el primer idioma de algunos de sus usuarios. Es bueno mantener el estilo de escritura simple si desea llegar a la mayoría de sus usuarios.

---

Como se indicó al principio, cinco de las 10 sugerencias de accesibilidad anteriores se han violado dentro de esta página. Intente detectarlos con las herramientas proporcionadas en la sección Recursos en la parte superior de esta página.