Contenido extraido y traducido de www.a11yproject.com/checklist © 2013–2024 The Accessibility Project. aprovechando su licencia APLv2.
Texto obtenido mediante traducción automática sin comprobación ni edición humana.
Esta lista de verificación utiliza como punto de referencia las Directrices de Accesibilidad al Contenido Web (WCAG). El WCAG es un estándar compartido para la accesibilidad del contenido web para personas, organizaciones y gobiernos.
Hay tres niveles de cumplimiento de la accesibilidad en el WCAG, que reflejan la prioridad del apoyo:
A: Esencial Si esto no se cumple, la tecnología de asistencia puede no ser capaz de leer, entender o operar completamente la página o ver.
AA: Apoyo ideal Requerido para múltiples sitios web del gobierno y de los organismos públicos. El Proyecto A11Y se esfuerza por el cumplimiento de AA.
AAA: Apoyo especializado Esto se reserva típicamente para partes de sitios web y aplicaciones web que sirven a una audiencia especializada.
Esta lista de verificación tiene muchas, pero no todas las acciones de nivel A y AA. Tenga en cuenta que los diferentes niveles de apoyo de WCAG no indican necesariamente un mayor nivel de dificultad para implementar.
Criterios de éxito
Cada ítem de esta lista de verificación tiene un correspondiente criterio de éxito de WCAG. El criterio de éxito son las reglas específicas y comprobables que alimentan el WCAG, descritas por número de referencia y título corto. Por ejemplo, la regla sobre la redimensión de texto se llama 1.4.4 Redimensionar el texto.
Algunas cuestiones de accesibilidad pueden tener múltiples criterios de éxito se aplican a ellos. Hemos identificado el más relevante para cada elemento de lista de verificación.
¿Esta lista de verificación garantiza que mi sitio es accesible?
No, no. Sin embargo, abordar los temas de esta lista de verificación ayudará a mejorar la experiencia para todos los que usan su sitio.
Los problemas que esta lista de verificación le sugiere revisar abarcan una amplia gama de discapacidades. No existe la "accesibilidad perfecta" ni un sitio web "100 % accesible". Desconfíe de las empresas y servicios que prometen este tipo de cosas. Si necesita ayuda profesional en accesibilidad, utilice servicios de accesibilidad profesional.
Contenido
El contenido es la parte más importante de su sitio.
Usar un lenguaje sencillo y evitar figuras del habla, las expresiones y las metáforas complicadas.
Escriba el contenido en un nivel de lectura de octavo grado.
Asegúrate de que button, a, y labelEl contenido de elementos es único y descriptivo.
1.3.1 Información y relaciones
Términos como "click" aquí y leer más, no proporcionan ningún contexto. Algunas personas navegan usando una lista de todos los botones o enlaces en una página o vista. Al usar este modo, los términos indican lo que sucederá si navega o activa.
Utilice texto alineado a la izquierda para los idiomas de izquierda a derecha (LTR), y texto alineado con la derecha para los idiomas de derecha a izquierda (RTL).
Es difícil leer el texto alineado o justificado.
Código global
Código global es código que afecta a todo su sitio web o aplicación web.
Valida tu HTML.
Valid HTML ayuda a proporcionar una experiencia consistente y esperada en todos los navegadores y tecnología de asistencia.
Usar un langatributo en el htmlelemento.
Esto ayuda a la tecnología de asistencia, como los lectores de pantalla, a pronunciar correctamente el contenido.
Proporcionar un titlepara cada página o vista.
El titleelemento, contenido en el documento headelemento, es a menudo la primera pieza de información anunciada por la tecnología de asistencia. Esto ayuda a decirle a la gente qué página o ve que van a empezar a navegar.
Asegúrese de que el zoom de visión no se deshabiliza.
Algunas personas necesitan aumentar el tamaño del texto hasta un punto en el que puedan leerlo. No les impida hacer esto, incluso para aplicaciones web con una experiencia nativa similar a una aplicación. Incluso las aplicaciones nativas deben respetar la configuración del sistema operativo para cambiar el tamaño de texto.
Utilice elementos históricos para indicar importantes regiones de contenido.
Las regiones de referencia ayudan a comunicar el diseño y las áreas importantes de una página o vista, y pueden permitir un rápido acceso a estas regiones. Por ejemplo, use la navelemento para envolver la navegación de un sitio, y el mainelemento para contener el contenido primario de una página.
Asegúrese de un flujo de contenido lineal.
Retirar tabindexvalores de atributo que tampoco son 0o o -1. Elementos que son inherentemente focalables, como enlaces o buttonelementos, no requieran una tabindex. Los elementos que no son inherentemente enfocables no deberían tener un tabindexse les aplica fuera de casos de uso muy específicos.
Evitar el uso de la autofocusatributo.
Las personas que son ciegas o tienen visión baja pueden estar desorientadas cuando se mueve el foco sin su permiso. Además, autofocuspuede ser problemático para las personas con discapacidades de control del motor, ya que puede crear un trabajo extra para navegar desde el área autoconcentrada y hacia otras ubicaciones en la página / vista.
Permitir extender el tiempo de espera de la sesión.
2.2.1 Ajuste de tiempo ajustable
Si no puede eliminar los tiempos de la sesión por completo, entonces deje que la persona que usa su sitio se apague, ajuste o amplíe fácilmente su sesión mucho antes de que termine.
Retirar titleatributos consejos de herramientas.
El titleel atributo tiene numerosas cuestiones, y no debe utilizarse si la información proporcionada es importante para que todas las personas accedan. Un uso aceptable para la titleatributo sería etiquetar un iframeelemento para indicar qué contenido contiene.
Tecládiscos
Es importante que su interfaz y contenido puedan ser operados, y navegados mediante el uso de un teclado. Algunas personas no pueden usar un ratón, o pueden estar utilizando otras tecnologías de asistencia que pueden no permitir flotar o hacer clic precisos.
Asegúrese de que haya un estilo de enfoque visible para los elementos interactivos que se navegan a través de la entrada de teclado.
Puede una persona navegando con un teclado, interruptor, control de voz o lector de pantalla ver dónde están actualmente en la página?
Comprobar para ver que el orden de enfoque del teclado coincide con el diseño visual.
Puede una persona navegando con un teclado o lector de pantalla moverse alrededor de la página de una manera predecible?
Retire elementos enfocables invisibles.
Eliminar la capacidad de centrarse en elementos que actualmente no están destinados a ser descubribles. Esto incluye cosas como menús inactivos de caída, navegación fuera de pantalla o modales.
Imágenes
Las imágenes son una parte muy común de la mayoría de los sitios web. Ayuda a asegurarte de que puedan ser disfrutados por todos.
Asegúrate de que todo imglos elementos tienen una altatributo.
altlos atributos (alt text) dan una descripción de una imagen para las personas que pueden no ser capaces de verlos. Cuando es un altEl atributo no está presente en una imagen, un lector de pantalla puede anunciar el nombre de archivo de la imagen y la ruta en su lugar. Esto no comunica el contenido de la imagen.
Asegúrese de que las imágenes decorativas utilizan null altValores de atributo (vacío).
Null altlos atributos también se conocen a veces como vacíos altatributos. Se hacen incluyendo ninguna información entre la apertura y cierre de las citas de un altatributo. Las imágenes decorativas no comunican información que se requiere para entender el significado general del sitio web. Históricamente se utilizaban para florecimientos e imágenes espaciadoras de gif, pero tienden a ser menos relevantes para sitios web modernos y aplicaciones web.
Proporcione una alternativa de texto para imágenes complejas como gráficos, gráficos y mapas.
Hay un texto plano que lista puntos en el mapa o secciones de un diagrama de flujo? Describe toda la información visible. Esto incluye ejes gráficos, puntos de datos y etiquetas, y el punto general que el gráfico se está comunicando.
Para imágenes que contengan texto, asegúrese de que la descripción del alte incluye el texto de la imagen.
Por ejemplo, el logotipo de FedEx debe tener un valor alt de FedEx.
Direcciones
Los elementos de dirección (h1, h2, h3, etc.) ayudan a romper el contenido de la página en los datos relacionados. Son increíblemente importantes para ayudar a las personas que utilizan la tecnología de asistencia a entender el significado de una página o ver.
Utilice elementos de dirección para introducir contenido.
2.4.6 Dirigecabezas o Etiquetas
Los elementos de la cabeza construyen un esquema de documentos, y no deben ser utilizados para el diseño puramente visual.
Utilice sólo uno h1elemento por página o vista.
2.4.6 Dirigecabezas o Etiquetas
El h1El elemento debe utilizarse para comunicar el propósito de alto nivel de la página o la vista. No usar el h1elemento para un epígrafe que no cambia entre páginas o puntos de vista (por ejemplo, el nombre del sitio).
Los elementos de la cabeza deben escribirse en una secuencia lógica.
2.4.6 Dirigecabezas o Etiquetas
El orden de los elementos de la rúbrica debe descender, en función de la profundidad del contenido. Por ejemplo, a h4elemento no debe aparecer en una página antes de la primera h3declaración de elementos. Una herramienta como headingsMapa puede ayudarle a evaluar esto.
No te saltes los niveles de dirección.
2.4.6 Dirigecabezas o Etiquetas
Por ejemplo, no saltes de un h2a a h4, saltándose un h3elemento. Si se están saltando los niveles de dirección para un tratamiento visual específico, utilice clases de CSS en su lugar.
Listas
Los elementos de las listas permiten a la gente saber que una colección de artículos están relacionados y si son secuenciales, y cuántos elementos están presentes en la agrupación de listas.
Utilice elementos de la lista (ol, ul, y dlelementos) para el contenido de la lista.
1.3.1 Información y relaciones
Esto puede incluir secciones de contenido relacionado, elementos visualmente mostrados visualmente en un diseño similar a una cuadrícula, o hermanos a elementos.
Controles
Los controles son elementos interactivos como enlaces y botones que permiten a una persona navegar a un destino o realizar una acción.
Utilice el aelemento para enlaces.
1.3.1 Información y relaciones
Los enlaces siempre deben tener un hrefatributo, incluso cuando se utiliza en Aplicaciones de Páginas Unicas (SPA s). Sin un hrefEl enlace no estará debidamente expuesto a la tecnología de asistencia. Un ejemplo de esto sería un vínculo que utiliza un onclickevento, en lugar de un hrefatributo.
Asegúrese de que los enlaces son reconocibles como enlaces.
El color por sí solo no es suficiente para indicar la presencia de un enlace. Las líneas inferiores son una forma popular y comúnmente entendida de comunicar la presencia de contenido de enlaces.
Asegurar que los controles han :focusestados.
Los estilos de enfoque visibles ayudan a las personas a determinar qué elemento interactivo tiene enfoque de teclado. Esto les permite saber que pueden realizar acciones como activar un botón o navegar al destino de un enlace.
Utilice el buttonelemento para botones.
1.3.1 Información y relaciones
Los botones se utilizan para enviar datos o realizar una acción en pantalla que no cambia el enfoque del teclado. Puedes añadir type="button"a a buttonelemento para evitar que el navegador intente enviar información de formulario cuando se activa.
Proporcione un enlace de salto y asegúrese de que es visible cuando esté enfocado.
Un enlace de salto se puede utilizar para proporcionar acceso rápido al contenido principal de una página o ver. Esto permite a una persona eludir fácilmente contenido repetido globalmente, como la navegación primaria de un sitio web, o el widget persistente de búsqueda.
Identificar los enlaces que se abren en una nueva pestaña o ventana.
G201: Dar a los usuarios anunciaron la advertencia al abrir una nueva ventana
Idealmente, evite los enlaces que se abran en una nueva pestaña o ventana. Si un enlace lo hace, asegúrese de que el comportamiento del enlace se comunique de una manera que sea evidente para todos los usuarios. Hacer esto ayudará a la gente a entender lo que sucederá antes de activar el enlace. Aunque esta técnica técnicamente no es necesaria para el cumplimiento, es un área de frustración a menudo citada para muchos tipos diferentes de usuarios de tecnología de asistencia.
Cuadros
Las tablas son un conjunto estructurado de datos que ayudan a las personas a entender las relaciones entre diferentes tipos de información.
Utilice el tableelemento para describir los datos tabulares.
1.3.1 Información y relaciones
Necesita mostrar datos en filas y columnas? Utilice el tableelemento.
Utilice el thelemento para cabeceras de mesa (con lo apropiado scopeatributos).
Dependiendo de lo compleja que sea su tabla, también puede considerar el uso de scope="col"para encabezados de columna, y scope="row"para cabeceras de hilera. Muchos tipos diferentes de tecnología de asistencia todavía utilizan el scopeatributo para ayudarles a entender y describir la estructura de una tabla.
Utilice el captionelemento para proporcionar un título para la tabla.
2.4.6 Dirigecabezas o Etiquetas
La mesa captiondebe describir qué tipo de información contiene la tabla.
Formularios
Los formularios permiten a las personas introducir información en un sitio para su procesamiento y manipulación. Esto incluye cosas como enviar mensajes y hacer pedidos.
Todas las entradas de una forma se asocian con un correspondiente labelelemento.
Usar un for/ idemparejamiento para garantizar el más alto nivel de soporte de tecnología del navegador/asistencia de la tecnología.
Uso fieldsety legendelementos en su caso.
1.3.1 Información y relaciones
Su formulario contiene múltiples secciones de entradas relacionadas? Uso fieldsetpara agruparlos, y legendpara proporcionar una etiqueta para lo que es esta sección.
Uso de insumos autocompleteen su caso.
1.3.5 Identificar el propósito de la entrada
Proporcionar un mecanismo para ayudar a las personas más rápidamente, fácilmente y precisamente a rellenar campos de formulario que pidan información común (por ejemplo, nombre, dirección, número de teléfono).
Asegúrese de que los errores de entrada de formulario se muestran en la lista por encima del formulario después de la sumisión.
3.3.1 Identificación de errores
Esto proporciona una manera para que los usuarios de la tecnología de asistencia tengan rápidamente una comprensión de alto nivel de qué temas están presentes en la forma. Esto es especialmente importante para las formas más grandes con muchas entradas. Asegúrese de que cada error reportado también tenga un enlace al campo correspondiente con entradas inválidas.
Mensajes de error de entrada asociados con la entrada a la que corresponde.
3.3.1 Identificación de errores
Técnicas como el uso aria-describedbypermitir a las personas que utilizan la tecnología de asistencia para entender más fácilmente la diferencia entre la entrada y el mensaje de error asociado con él.
Asegúrese de que los estados de error, advertencia y éxito no se comuniquen visualmente por solo color.
Las personas que son ciegos de color, que tienen otras condiciones de visión baja, o diferentes entendimientos culturales para el color pueden no ver el cambio de estado, o entender qué tipo de retroalimentación representa el estado si el color es el único indicador.
Medios de comunicación
Los medios incluyen contenidos como el pregrabado y el audio y video en vivo.
Asegúrese de que los medios no se reproduzcan automáticamente.
El vídeo y el audio inesperados pueden ser distractores y disruptivos, especialmente para ciertos tipos de discapacidad cognitiva como el TDAH. Ciertos tipos de vídeo y animación de reproducción automática pueden ser un desencadenante de trastornos vestibulares y convulsivos.
Asegúrese de que los controles de los medios de comunicación utilicen el marcado adecuado.
1.3.1 Información y relaciones
Ejemplos incluyen asegurarse de que un botón de mudo de audio tiene un estado de conmutación pulsado cuando está activo, o que un control deslizante de volumen utiliza .
Comprobar para ver que todos los medios pueden ser pausados.
Proporcionar una función de pausa global en cualquier elemento de los medios de comunicación. Si el dispositivo tiene un teclado, Spaceasegúrese de que pulsar la tecla puede pausar la reproducción. Asegúrese de no interferir con la Spacecapacidad de la clave para desplazarse por la página/visión cuando no se centre en un control de formulario.
Vídeo
Comprobaciones específicas de vídeo.
Confirma la presencia de subtítulos.
Las leyendas permiten a una persona que no puede escuchar el contenido de audio de un video para entender aún su contenido.
Eliminar desencadenantes de convulsiones.
2.3.1 Tres destellos o atraca por debajo del umbral
Ciertos tipos de estrangulamiento o animaciones intermitentes desencadenarán convulsiones.
Audio
Controles específicos de audio.
Confirme que las transcripciones están disponibles.
Las transcripciones permiten a las personas que no pueden oír todavía entender el contenido de audio. También permite a las personas digerir el contenido de audio a un ritmo que les sea cómodo.
Aparecimiento
Cómo se ve el contenido de la aplicación de su sitio web en una situación dada.
Compruebe su contenido en modos de navegación especializados.
Activar modos como Windows High Contrast o Colors invertidos. Tu contenido sigue siendo legible? Sus iconos, fronteras, enlaces, campos de forma y otros contenidos todavía están presentes? Puedes distinguir el contenido de primer plano del fondo?
Aumentar el tamaño del texto al 200%.
El contenido sigue siendo legible? El aumento del tamaño del texto hace que el contenido se solapee?
Comprueba la doble división entre el contenido que se mantiene.
1.3.3 Características sensoriales
Utilice la prueba de paja para asegurar que las personas que dependen del zoom de pantalla todavía puedan descubrir fácilmente todo el contenido.
Asegúrese de que el color no sea la única manera de transmitir la información.
Puedes seguir viendo dónde están los enlaces entre el contenido corporal si todo es escala gris?
Asegúrese de que las instrucciones no sean visuales o de audio.
1.3.3 Características sensoriales
Utilice una combinación de características para escribir señales, particularmente los nombres reales de secciones y elementos, en lugar de sólo descripciones como la ubicación (a la derecha) o audio (después del tono).
Utilice un diseño simple, sencillo y consistente.
Un diseño complicado puede ser confuso de entender y usar.
Animación
Contenido que se mueve, ya sea por sí solo, o cuando es provocado por una persona activando un control.
Asegúrese de que las animaciones son sutiles y no parpadeen demasiado.
2.3.1 Tres destellos o atraca por debajo del umbral
Ciertos tipos de estrangulamiento o animaciones intermitentes desencadenarán convulsiones. Otros pueden ser distractores y disruptivos, especialmente para ciertos tipos de discapacidad cognitiva como el TDAH.
Proporcionar un mecanismo para pausar el vídeo de fondo.
El vídeo de fondo puede ser distractor, especialmente si se coloca contenido sobre él.
Asegúrese de que toda animación obedece a la prefers-reduced-motionla consulta de los medios.
2.3.3 Animación de las Interacciones
Retire las animaciones cuando se active la configuración del movimiento. Si una animación es necesaria para comunicar el significado de un concepto, ralentice su duración.
Contrael de color
El contraste de color es lo legibles que son los colores cuando se colocan al lado, y uno encima de otro.
Compruebe el contraste para todo el texto de tamaño normal.
El cumplimiento del nivel AA requiere una relación de contraste de 4.5:1.
Compruebe el contraste para todo el texto de gran tamaño.
El cumplimiento del nivel AA requiere una relación de contraste de 3:1.
Comprueba el contraste para todos los iconos.
El cumplimiento de nivel AA requiere una relación de contraste de 3.0:1.
Compruebe el contraste de los bordes para los elementos de entrada (entrada de texto, botones de radio, casillas de verificación, etc.).
El cumplimiento de nivel AA requiere una relación de contraste de 3.0:1.
Compruebe el texto que se superpone imágenes o vídeo.
El texto sigue siendo legible?
Comprueba la costumbre ::selectioncolores.
Es el contraste de color que usted estableció en su ::selectionDeclaración de CSS suficiente? De lo contrario, alguien podría no ser capaz de leerlo si lo destaca.
Móvil y táctil
Cosas para las que comprobar las experiencias móviles.
Compruebe que el sitio se puede girar a cualquier orientación.
El sitio sólo permite la orientación del retrato?
Retire el desplazamiento horizontal.
Exigir a alguien que se desplace horizontalmente puede ser difícil para algunos, irritante para todos.
Asegúrese de que los iconos de botón y enlace se pueden activar con facilidad.
Es bueno asegurarse de que cosas como menús de hamburguesa, iconos sociales, espectadores de galería y otros controles táctiles sean utilizables por una amplia gama de tamaños de mano y lápiz.
Asegurar un espacio suficiente entre los elementos interactivos con el fin de proporcionar una zona de desplazamiento.
Algunas personas que experimentan problemas de control de motor, como temblores de manos, pueden tener un momento muy difícil de desplazarse más allá de artículos interactivos que cuentan con un espaciado cero.