Cómo realizar una auditoría de accesibilidad para el cumplimiento de las WCAG

Publicado: 2022-06-28

WCAG (directrices de accesibilidad al contenido web) fue creado por el consorcio de la red mundial (W3C) y es el estándar de accesibilidad más reconocido a nivel mundial.

En este artículo, describimos las tareas requeridas para realizar una auditoría para verificar el cumplimiento del estándar WCAG 2.1.

La accesibilidad se trata de garantizar que un público más amplio pueda acceder al contenido y la funcionalidad de su sitio web.

Por ejemplo:

Barrera de accesibilidad temporal – ¡Alguien ha perdido sus gafas!
Problemas con el dispositivo: están en un dispositivo que es restrictivo, por ejemplo, un teléfono móvil
Situacional: luz solar brillante, cuarto oscuro, etc.
Discapacidad permanente: sin vista, sin audición, problemas cognitivos, etc.
Problemas de ancho de banda: una conexión muy lenta

Como puede ver, hay muchas formas de discapacidad que debe considerar.

Las pautas de las WCAG se dividen en lo siguiente:

Antes de pasar por cada sección, aquí hay una lista de lo que necesitará para realizar la prueba:

1. Perceptible

Una selección de navegadores que incluyen solo texto (por ejemplo, Lynx)
Una herramienta para verificar etiquetas alternativas, encabezados, etc. (por ejemplo, ScreamingFrog)
Un lector de pantalla como NVDA
Una herramienta de prueba de accesibilidad del sitio web
Herramientas de desarrollo de Chrome
Acceso a una selección de dispositivos

Se trata de asegurarse de que el contenido sea accesible en varias formas. Por ejemplo, alguien puede ver el contenido, escucharlo, usar el tacto para comprender el contenido, etc. Esto también incluye elementos de la interfaz de usuario, como menús y botones.

La herramienta de accesibilidad WAVE es una de las muchas herramientas que se pueden usar para encontrar problemas en esta área:

En el ejemplo anterior, la página funciona bastante bien. Solo tiene 1 error y 5 errores con problemas de contraste de color.

El único error es que esta página no indica el idioma.

Pero hay muchas cosas buenas en la página. Por ejemplo, en la imagen de la derecha donde ve 2 elementos resaltados en verde, ambos usan las etiquetas 'ARIA' para ayudar a un lector de pantalla a comprender este contenido. Más adelante explicaremos más sobre esto.

Repasemos las pautas y los criterios de éxito.

Pauta 1.1 - Proporcionar alternativas de texto al contenido que no es de texto

¿Existen alternativas de texto al contenido que no es de texto?

Cuando tiene contenido que no es de texto en una pantalla, debe verificar que haya descripciones para cada uno de esos elementos.

Antes de dar ejemplos, quiero discutir ARIA, que es una forma de proporcionar descripciones adicionales a los elementos y solo debe usarse cuando el HTML estándar no es posible.

Cuando usa HTML, obtiene automáticamente el control del teclado, el enfoque, etc. y esa es la preferencia, pero ARIA se puede usar como respaldo.

¿Qué es ARIA?

ARIA (aplicaciones de Internet ricas y accesibles) es una forma de describir contenido que no se puede describir suficientemente usando HTML estándar. Su propósito principal es para lectores de pantalla. Si puede usar HTML estándar, entonces ese es el mejor enfoque porque automáticamente proporcionará enfoque al elemento y al control del teclado. Cuando esto no es posible, ARIA es la alternativa.

Imágenes Descriptivas

Una imagen descriptiva es algo que retrata algo de significado. Por ejemplo, una imagen de un automóvil Toyota Prius.

Si no puede ver la imagen, debe haber una forma de describir lo que representa esta imagen, que es donde entra una etiqueta Alt.

En plataformas como WordPress puedes agregar la etiqueta alt al subir la imagen:

Muy a menudo actualizamos esta etiqueta alt para asegurarnos de que se incluyan palabras clave relevantes para fines de SEO, pero debemos ir más allá.

Screaming Frog hará un análisis de todas las imágenes en su sitio web y mostrará qué imágenes no tienen etiquetas alt, etiquetas alt duplicadas, etiquetas alt que son demasiado largas o etiquetas alt que son demasiado cortas.

Puede ver las imágenes junto con los detalles de la imagen también:

imagen decorativa

Una imagen decorativa es una imagen que está ahí para mejorar el diseño, ¡pero no hay nada en la imagen que valga la pena describir!

Las imágenes decorativas deben usar la propiedad de fondo CSS a menos que haya una buena razón para usar la etiqueta 'img'. Si un lector de pantalla ve la propiedad de fondo de CSS, sabe que debe ignorar la imagen.

Este es un ejemplo de una imagen descrita como imagen de fondo en el sitio web My Emergency Doctor en Australia:

Aquí está el código detrás de esto:

Debido a que esta imagen no aparece como <img>, utiliza role=img para que los lectores de pantalla sepan que se trata de una imagen. Utiliza la 'etiqueta Aria' para dar una buena descripción precisa de la imagen. También define la imagen como 'imagen de fondo'.

Nota: si usa la etiqueta 'img' para una imagen de fondo, debe definir una etiqueta alt nula, por ejemplo, alt=” “

¿Cuándo debería usar <img> en lugar de color de fondo?

Cuando una imagen es una parte importante del contenido, utilice <img>. Por ejemplo, si tiene una imagen de producto, esta es <img> . También podría tener imágenes que son solo imágenes de fondo utilizadas con fines decorativos y no tiene sentido describirlas como imágenes (que serán indexadas por Google).

En el ejemplo anterior, podría preguntarse si la imagen que se muestra debe definirse como img, pero es una fotografía de archivo y decidieron definirla como una imagen de fondo, lo cual está bien.

Nota: <img> es una etiqueta HTML pero background-image es un estilo CSS que usas.

Controles de IU

Hay varios controles de interfaz de usuario que requieren algo de texto para describir qué es.

Por ejemplo, un botón o un control de formulario.

Un botón se utiliza para ayudar a completar una función. Podría ser un botón que solo tenga un icono y otro que tenga texto en el botón. Ambos podrían manejarse de manera diferente.

Usando ARIA puedes definir 'role=button' pero con HTML estándar puedes usar la etiqueta <button>. ¿Cual deberías usar?

Aquí hay un ejemplo de un botón que solo tiene una X que requiere que creemos una 'etiqueta aria' para describir lo que hace el botón.

<button aria-label=”Cerrar” onclick=”myDialog.close()”>X</button>

Aquí hay una lista de los controles típicos de la interfaz de usuario que deberá probar:

Categoría	Ejemplo
Controles de entrada	Casilla de verificación, botón de radio, listas, botones, campos de texto, campo de fecha.
Componentes de navegación	Menú, pestañas, ruta de navegación, control deslizante, íconos, paginación, etiquetas, ícono, campo de búsqueda, carrusel
componentes informativos	Barra de progreso, información sobre herramientas, notificaciones, cuadros de mensaje, ventana modal (emergente),
Contenedores	Acordeón

Si está utilizando formularios, debe asegurarse de que cada campo esté etiquetado correctamente. He aquí un ejemplo de un buen etiquetado:

<label for=”fname”>Nombre:</label><br>

<label for=”lname”>Apellido:</label><br>

</formulario>

Nota: para los formularios también debe asegurarse de:

Marque claramente los campos obligatorios. Si un campo es obligatorio, también deberá etiquetarse correctamente en el html.
Hay instrucciones para el usuario (generalmente en la parte superior del formulario)
Los usuarios obtienen ayuda cuando cometen un error al completar un campo de formulario (por ejemplo, formato de fecha incorrecto, esto es lo que debe ingresar).

captcha

Esto puede ser muy problemático dependiendo de cómo se implemente. Por ejemplo, cuando se muestran imágenes y se le pide que identifique qué imagen contiene semáforos.

Revisaremos la implementación y haremos las sugerencias pertinentes.

contenido multimedia

El video/audio necesita al menos una descripción para identificar de qué se trata el video/audio.

Enlaces

Desea asegurarse de que los enlaces se destaquen claramente en la página (por ejemplo, de un color diferente) y que utilicen un texto de anclaje y una descripción del enlace relevantes.

Directriz 1.2 – Medios basados en el tiempo

Esta área se trata de atender el contenido de video y audio que debe hacerse más accesible.

¿Hay transcripción disponible solo para audio pregrabado o solo para video?

La transcripción de video es la traducción del audio de su video a texto. La transcripción no incluye información de audio que describa cosas como imágenes que se muestran en el video. Esto se maneja por separado.

¡Consejo de transcripción!

Rev.com es un excelente servicio para crear subtítulos/transcripciones para su audio/video. Incluso brindan un servicio de subtítulos en vivo para video Zoom.

¿Hay subtítulos disponibles para el audio pregrabado?

El título es un texto que aparece dentro del video para informar al usuario sobre lo que dice la persona.

¿Existe una descripción de audio o una alternativa multimedia (pregrabada) ?

Cuando está viendo un video, los subtítulos pueden no ser suficientes para describir lo que se muestra en el video. Aquí es donde también se requiere una descripción de audio.

Por ejemplo, una descripción de audio podría describir lo que sucede en segundo plano cuando alguien está hablando para brindarles a los usuarios algo de contexto.

Aquí hay un ejemplo de transcripción que incluye descripción de audio.

¡Esto es excelente para los visitantes de su sitio web, pero también es bueno para el SEO!

Sugerencia para seleccionar un reproductor accesible:

Desea asegurarse de que el reproductor de video que usa admita lo que se requiere para la accesibilidad:

Soporta subtítulos
La descripción de audio se puede activar o desactivar
El control de palabras clave se puede utilizar en el reproductor multimedia
El reproductor multimedia funciona en diferentes dispositivos y navegadores.
Todos los controles son accesibles.

¿Hay subtítulos para el audio en vivo ?

Por lo general, no tendrá ningún contenido de video o audio en vivo en su sitio web, pero si lo tuviera, necesitaría tener la creación simultánea de subtítulos para que los usuarios vean los subtítulos que se muestran mientras la persona habla.

Hay herramientas disponibles para subtitular automáticamente su video y audio en vivo.

¿Existe una descripción de audio para los medios sincronizados pregrabados?

Esto es para medios que contienen video y audio. Queremos información de audio que acompañe a los medios.

Pauta 1.3 – Adaptable – Presente la información en un formato que pueda ser entendido por el software.

Debe asegurarse de que lo que puede interpretar visualmente al mirar algo se describa mediante programación para que pueda ser interpretado correctamente por software como lectores de pantalla.

¿Existe una estructura lógica para el contenido y es fácil comprender la relación con cada pieza de contenido dentro de esa estructura?

Cuando ve una página web, normalmente ve encabezados, párrafos, contenido en negrita, tablas, etc. Y cuando ve los detalles de una tabla, ve encabezados y ve claramente qué fila es relevante para qué encabezado.

Esto es lo que deberá revisar:

¿El contenido está dividido en subtítulos?
¿Se utilizan listas, tablas, etc. cuando corresponde?
¿Se utiliza HTML correcto para otros elementos estructurales en todo el contenido?
¿Se utilizan etiquetas y texto alternativo según sea necesario (por ejemplo, en los formularios?)

Consejo

Un buen punto de partida es probar su sitio web utilizando una herramienta de validación que compruebe si hay html válido (por ejemplo, el validador de html de W3.org).

Este es un ejemplo de un formulario que muestra los campos obligatorios en rojo. Esto está bien para un usuario visual, pero ¿qué pasa con alguien que usa una pantalla braille?

Para superar este problema, también se agrega la palabra 'obligatorio' a la etiqueta del apellido, que es un campo obligatorio.

 <label for="apellido" class="requerido">Apellido (requerido): </label>
<tipo de entrada="texto" tamaño="25" valor=""/>
<tipo de estilo="texto/css">
  .requerido {
    color rojo;
  }
</estilo>

¿Hay un orden de contenido que tenga sentido?

Cuando ve una página web, verá una barra de navegación, luego algo de contenido, encabezados, subtítulos, párrafos de texto. Desea asegurarse de que esto se presente en un orden que tenga sentido.
Use estilos de encabezado para indicar la importancia de las secciones. Por lo general, solo tiene un estilo <h1> para identificar la página de contenido y luego puede tener múltiples H2, H3, etc.
Tenga la navegación separada del contenido (por ejemplo, defina la navegación usando <nav>)
Usar html válido

Aquí hay una estructura típica de encabezados que tienen sentido:

¿Pueden los usuarios comprender el contenido cuando no pueden percibir la forma, el tamaño o usar información sobre la forma o el tamaño espacial?

La forma más fácil de explicar esto es con un ejemplo:

Supongamos que tiene una tabla de comparación de características de productos de software y cuando un producto tiene una característica, se muestra una imagen de diamante en esta columna. Esto no es suficiente, deberá agregar texto para indicar qué representa este diamante.

¿El sitio web funciona bien en modo vertical y horizontal?

El sitio web debe poder adaptarse al modo vertical u horizontal sin perder significado.

Si un sitio web ha implementado un diseño receptivo correctamente, cuando cambia la orientación, se adapta a una ventana gráfica diferente (es decir, selecciona una visualización más adecuada en función de las dimensiones de la pantalla).

¿Se describen correctamente las entradas a los formularios?

El propósito de esto es garantizar que programáticamente haya suficiente información sobre cualquier campo que deba completarse en un formulario.

¡Y si es posible, habilite el llenado automático para que el usuario no tenga que completar todo!

¿Se puede averiguar mediante programación el propósito de los elementos de una página?

Un ejemplo de esto es usar el elemento ARIA 'role' para secciones de un sitio web.

Por ejemplo, un banner que contenga el logotipo/nombre de la empresa, etc. podría describirse como 'rol=banner'.

o usando etiquetas de entrada en formularios para correo electrónico, nombre, dirección, etc.

Así es como verías esto en HTML:

¿Hay una versión de texto de cualquier gráfico?

Si hay algún contenido de tipo gráfico, querrá tener una tabla que resuma de qué se trata este contenido.

Pauta 1.4 – Ver y escuchar contenido

Se trata de facilitar que las personas vean y escuchen el contenido.

¿Existen alternativas de texto cuando se utiliza el color para transmitir información?

Imagine que tiene un formulario y un campo obligatorio se muestra en rojo.

¡Esto no significa mucho para un lector de pantalla!

Pero podría agregar la palabra 'requerido' en la tabla como en el siguiente ejemplo:

<label for=”lastname” class=”required”>Apellido (obligatorio): </label> <input id=”lastname” type=”text” size=”25″ value=””/> <style type= ”texto/css”> .requerido { color:rojo; } </estilo>

¿Existe algún mecanismo para pausar o detener el audio si se reproduce durante más de 3 segundos?

Si está utilizando un lector de pantalla y un video se reproduce automáticamente al mismo tiempo, ¡escuchará dos voces!

Idealmente, no habrá reproducción automática de video que resuelva este problema.

Si hay una reproducción automática, asegúrese de que dure menos de 3 segundos y, si no, asegúrese de que haya una forma de controlar el audio del video que se está reproduciendo.

¿Hay un buen contraste entre el texto y las imágenes/colores en el fondo?

Todos sabemos lo importantes que son los colores en el diseño y la marca, pero para los visitantes de su sitio con discapacidad visual, los colores no supondrán una gran diferencia en su experiencia.

Por ejemplo, las personas daltónicas no verán la diferencia entre el rojo, el naranja, el amarillo y el verde, y usted también debe atenderlas.

La clave aquí es tener en cuenta la relación de contraste, que es uno de los problemas de accesibilidad más comunes que se encuentran en los sitios web.

¿Hay suficiente contraste entre el color del texto y su fondo? ¡Una herramienta como el verificador de contraste de color puede ayudarlo a descubrirlo!

El color de fondo está a la izquierda y luego el color del texto está a la derecha. La puntuación está en el medio.

La recomendación es que el contraste sea de al menos 4,5:1 o 3,1 cuando el texto es grande (por ejemplo, 18 puntos o 14 puntos en negrita).

Además, asegúrese de usar otras herramientas además del color para comunicar contenido e información importante en su sitio.

Por ejemplo, su CTA principal generalmente aparece en la página debido a un color que hace que los usuarios lo noten. Para hacer que las llamadas a la acción sean más accesibles, puedes usar el tamaño, la ubicación, la negrita y el contraste para que las personas con daltonismo las noten.

¿Puede el texto hacerse más grande y su sitio web seguir funcionando normalmente?

Uno obvio es simplemente agrandar el texto en una pantalla para ayudar a alguien con una discapacidad visual.

Pero desea que el sitio web funcione con normalidad si un usuario aumenta el tamaño del texto.

Por ejemplo, cuando un usuario amplía el texto hasta un 400%, debe asegurarse de que no se pierda información.

Aquí hay una imagen de W3.org. Estoy seguro de que no desea que su sitio web se vea como el de la derecha cuando amplía el texto.

El requisito de WCAG 2.1 es que debería poder ampliar en un 200 % sin ningún problema.

¿Se evitan las imágenes de texto a menos que sea necesario?

Es posible que tenga un logotipo que contenga texto (por ejemplo, el nombre de su empresa), lo cual está bien.

Pero, ¿qué pasa con las imágenes de texto?

Si tiene una imagen de texto, debe, al menos, proporcionar una etiqueta que lo describa.

Pero es mejor que evites este tipo de imágenes a menos que:

Es esencial
es personalizable

¿El sitio web es responsive?

Es normal desplazarse hacia abajo para ver la página web completa, pero no hacia la derecha o hacia la izquierda.

Cuando pasa de un escritorio a un dispositivo más pequeño, la pantalla debería ajustarse automáticamente para que no tenga que desplazarse hacia la derecha o hacia la izquierda.

¿Hay suficiente contraste para el contenido que no es de texto?

Los colores adyacentes deben tener una relación de contraste de al menos 3:1

Este requisito es para personas con visión relativamente baja.

¿Se puede ajustar el espaciado/altura de línea sin pérdida de rendimiento?

La altura de la línea (espaciado entre líneas) debe ser al menos 1,5 veces el tamaño de la fuente;
El espacio entre los siguientes párrafos debe ser al menos 2 veces el tamaño de la fuente;
El espacio entre letras (seguimiento) debe ser al menos 0,12 veces el tamaño de la fuente;
El espacio entre palabras debe ser al menos 0,16 veces el tamaño de la fuente.

¿Se muestra correctamente el contenido al pasar el mouse por encima o al enfocar?

Cuando te enfocas en un elemento (p. ej., tabula hacia él) o pasas el cursor sobre él, ves contenido adicional.

Por ejemplo, pasa el cursor sobre un botón y aparece una ventana emergente.

…o se muestra un submenú.

Este contenido debe ser:

Descartable: por ejemplo, si hace clic en Escape, el contenido ya no se muestra.

Hoverable: cuando pasa el mouse sobre el contenido, este se muestra siempre que el mouse esté sobre el gatillo.

Persistente: esta es una combinación de ambos. El contenido permanece visible hasta que el usuario lo descarta, el usuario aleja el mouse o el contenido ya no contiene información importante.

Nota: Esto no se aplica cuando se muestra un elemento HTML, como un título, cuando pasa el cursor sobre algo (por ejemplo, una imagen).

¿La fuente es legible?

Algunas fuentes/tipos de letra son más legibles que otras. Hay preferencia por serif o sans serif pero eso no es obligatorio. La parte clave es que es legible.

2. operable

Esto significa que los usuarios deben poder utilizar la navegación y la interfaz de usuario interactuando con ella. Por ejemplo, pueden 'operar' la interfaz de usuario usando el teclado.

Pauta 2.1 – Teclado accesible

Muchos usuarios usan un teclado en lugar de un mouse o un panel táctil, incluidos los usuarios con barreras de accesibilidad de movilidad o aquellos que usan un lector de pantalla.

Esta es la razón por la cual todas las funciones de su sitio web deben ser accesibles a través del teclado: enlaces, botones, formularios y otros controles.

¿Se puede acceder a todo a través de un teclado?

Ahora es el momento de dejar de usar el mouse y usar solo el teclado.

Estás comprobando:

¿Todo sigue un orden lógico hacia adelante o hacia atrás (usando la pestaña para avanzar y cambiar la pestaña para retroceder)?

Cuando está en un botón, sección, etc. en particular, ¿ve que este elemento está resaltado? En el siguiente ejemplo, es obvio que hemos tabulado 'artículos'.

¿Se puede acceder a todo usando la tecla de tabulación y cuando presiona Intro cuando tiene el foco, se activa la acción?

Nota: Si aparece una ventana emergente, también debe poder navegar por ella.

¿Puedes saltarte el encabezado?

Cuando utiliza un lector de pantalla, no desea que lea el mismo encabezado en todas las páginas. Eso te volvería loco. Por lo tanto, debería poder pasar al enlace "Saltar al contenido", presione Entrar y luego su próxima pestaña omitirá esa sección.

Cuando hace clic en la pestaña cuando llega por primera vez al sitio web a continuación, se encuentra en el enlace 'Saltar al contenido'. Si presionas enter vas directo al contenido.

Si presiona una segunda pestaña, se mueve al enlace 'Saltar a navegación'. Si presiona enter en esto, accederá a la navegación.

Si vuelve a pulsar tabulador, pasará a 'saltar a navegación'. Si selecciona esto, salta directamente a la navegación.

Si se usa un carácter, puntuación, número o símbolo como atajo, debe haber una manera de deshabilitar o cambiar este atajo a uno o más caracteres no imprimibles. La única otra excepción es cuando el acceso directo solo está disponible cuando el elemento tiene el foco.

2.1.2 ¿Hay alguna situación en la que llegue a un callejón sin salida con el teclado (una trampa de teclado) ?

Tabula su camino a un lugar en el sitio web y no puede tabular hacia adelante o hacia atrás.

Esto se conoce como trampa de teclado. Como dice la canción... atrapado en una trampa, no puedo mirar atrás...

¿Existe una alternativa a un atajo de teclado implementado usando una letra?

Tener un atajo de tecla de carácter con alguien que depende de un teclado para la navegación no es bueno porque puede terminar presionándolo por error.

Así que tenemos que ofrecer una alternativa.

a) Posibilidad de reasignar este personaje a otro atajo

b). Apágalo

C). Solo está activo cuando te enfocas en esto. ¡Eso significa que si usa el acceso directo, no sucede nada a menos que esté realmente en él!

Directriz 2.2 – Tiempo suficiente

Imagínese si establece un límite de tiempo para completar un formulario pero solo considera a los usuarios sin necesidades de accesibilidad. Este límite de tiempo puede ser demasiado corto.

¿El tiempo es ajustable?

Desactivar el tiempo es ideal, pero poder extenderlo (es decir, cuando el límite de tiempo está casi alcanzado) o ajustarlo al nuevo tiempo está bien.

¿Puede el usuario del sitio web pausar, detener u ocultar el contenido que se mueve, parpadea o se actualiza automáticamente?

Si se está moviendo/parpadeando o regañando y:

a). comienza automáticamente

b). dura mas de 5 segundos

C). se presenta en paralelo con otros contenidos

Luego hay un mecanismo para pausar, detener o eliminar.

Mismo problema con la actualización automática de contenido.

Pauta 2.3 – Convulsiones y reacciones físicas

Esta guía es para asegurarse de que no se haya diseñado nada que pueda causar una convulsión o una reacción física.

¿Los 'destellos' en la pantalla cumplen con las pautas?

La regla número uno es evitar cualquier objeto que parpadee, pero si eso no es posible, asegúrese de que no parpadee más de 3 veces en un segundo o parpadee por debajo de los umbrales de parpadeo general o rojo.

Directriz 2.4 – Navegable

Se trata de facilitar la navegación por el sitio web.

¿Puedes saltarte los bloques que se repiten?

Imagine usar un lector de pantalla y cada vez que llega a una nueva página, lee la navegación. Eso no sería divertido. Por lo tanto, debe poder omitir estos. Di un ejemplo de esto antes.

¿Están todas las páginas tituladas correctamente?

Necesita buenos títulos descriptivos en todas las páginas. Esto es bueno para la accesibilidad, pero también para el SEO.

Puede usar Screaming Frog para ver los títulos de las páginas en un solo lugar:

¿El orden de enfoque preserva el significado?

Si está tabulando a través del contenido, pero lo hace en un orden que no tiene sentido, tendrá que arreglar esto.

¿Puedes determinar el propósito del enlace a partir del texto del enlace?

'Haga clic aquí' no es un texto de anclaje muy útil. Debe tener palabras que describan el contenido al que se dirige el enlace.

¿Qué es el texto de anclaje?

Cuando está vinculando a otra página en su sitio web o un sitio web externo, el texto de anclaje es el texto visible que ve que está relacionado con la página a la que está enviando a las personas. En lugar de solo mostrar el enlace, es mejor mostrar el texto real.

¿Hay más de una forma de localizar una página web?

Aquí hay unos ejemplos:

Mapa del sitio: tenga una lista de todas las páginas en un mapa del sitio
Enlaces rápidos: tenga enlaces rápidos para acceder a páginas importantes
Buscar: busque para encontrar una página relevante

¿Está visible el enfoque del teclado?

¡La pregunta lo dice todo! Esto también se trató en una de las directrices anteriores. Cuando tabula a algún lugar, necesita poder ver visualmente que el foco está en esa área.

¿Están claramente definidos el encabezado, el cuerpo y el pie de página?

Las tecnologías de asistencia deben poder identificar claramente el encabezado, el pie de página y el cuerpo. Hay etiquetas html que definen estas áreas.

Directriz 2.5 Modalidades de entrada

Esta guía trata sobre las interfaces más nuevas en las que no puede usar un teclado o un mouse para navegar. Por ejemplo, en los teléfonos inteligentes, puede deslizar, pellizcar y hacer zoom, tocar, etc.

¿La funcionalidad que utiliza gestos multipunto o basados en rutas se puede operar con un solo puntero sin usar el gesto (a menos que sea esencial)?

Un gesto basado en ruta es donde necesita moverse en una ruta específica. Por ejemplo, desliza hacia arriba para acceder a ciertas funciones o hacia abajo para acceder a otras. Un gesto de múltiples puntos es donde usa dos o más puntos de contacto para acceder a la funcionalidad, por ejemplo, use 2 dedos para pellizcar y hacer zoom.

¿Hay una manera fácil de salir de una acción que ha sido iniciada por un solo puntero?

¿Qué es un puntero único?

Aquí es donde puede acceder a la funcionalidad con un punto de interacción con una pantalla, por ejemplo, toque, haga clic, mantenga presionado, etc.

Al menos uno de los siguientes debe ser cierto:

Sin evento de bajada: el disparador se implementa cuando presionas un botón
Abortar o Deshacer: usa un evento de activación (es decir, la función se habilita cuando se suelta el puntero) y hay una forma de abortar. Por ejemplo, está presionando algo con el dedo y, en lugar de levantar el dedo hacia arriba, lo desliza hacia otra parte de la pantalla y la funcionalidad se cancela.
Inversión hacia arriba: el evento hacia arriba invierte el evento hacia abajo
Esencial: completar la función del evento de bajada es esencial.

¿La etiqueta visible de un componente coincide con el nombre programático de ese componente?

Si un usuario vidente usa texto a voz, el nombre programático se leerá y es una mejor experiencia si coincide con la etiqueta visible.

¿La funcionalidad que es operada por movimiento o gestos también puede ser operada por otros controles de la interfaz de usuario?

Si sacudes o inclinas algo para controlarlo, ¿puedes usar otro control de la interfaz de usuario para acceder a esta funcionalidad?

Comprensible

Se trata de asegurarse de que el lenguaje utilizado en la página sea comprensible.

3.1 Legible

Cubrimos lo siguiente:

¿Se puede determinar mediante programación el idioma de la página o las secciones de la página?

Debería ver algo como esto al comienzo de cualquier página. 'Lang' indica el idioma de la página.

Si el idioma cambia en la página, también deberá poder identificarlo.

3.2 Predecible

Desea que su interfaz de usuario funcione de manera predecible, ¡sin sorpresas!

¿La navegación es en el mismo orden en las páginas?

La posición de navegación en una página debe ser la misma en todas las demás páginas a menos que el usuario realice un cambio en la navegación.

¿Los componentes, las imágenes, etc., se nombran de forma coherente en todas las páginas?

Si tiene una imagen en una página y tiene la misma imagen en otra página, quiere que la imagen tenga el mismo nombre.

Si tiene varias páginas de una publicación y nombra las páginas página 1, página 2, página 3 que es consistente. El etiquetado no tiene que ser el mismo si no tiene sentido, pero tiene que ser consistente.

3.3 Asistencia de entrada

Se trata de ayudar a los usuarios a evitar o recuperarse de errores:

Error de entrada: si está escribiendo algo incorrectamente, es posible que vea visualmente que está mal, pero también debe haber un texto que identifique el problema.

Etiquetas: cuando los usuarios tienen que ingresar un texto, hay una etiqueta asociada que describe el campo.

Error de entrada: si un usuario comete un error, hay una sugerencia sobre cómo solucionarlo.

Prevención de errores: debe poder revertir, obtener comentarios sobre el error o tener la capacidad de confirmar antes de enviar.

4. Robusto

Además de ser accesible, su contenido debe ser compatible con una variedad de navegadores, tecnologías, etc.

Pauta 4.1 Compatible

Esto implica probar con una variedad de agentes de usuario y tecnologías de asistencia. Una buena prueba inicial para esto es usar la herramienta de validación de marcado W3C para ver si hay algún error (es decir, valida que la estructura/sintaxis de html, xhml, etc. sea correcta).

Aquí hay un ejemplo de la salida:

También necesita probar contra múltiples navegadores para asegurarse de que el contenido se cargue correctamente.

Y también vale la pena cargar la página en un navegador de solo texto (como Lynx).

¿Se pueden analizar correctamente todos los datos?

¿Hay etiquetas de inicio y finalización adecuadas dentro de las secciones del contenido para que sea fácil identificar dónde comienza y termina una sección?

¿Los elementos están anidados correctamente?

¿Hay atributos duplicados o identificadores que dificultan la distinción de elementos?

¿Todos los controles de la interfaz de usuario pueden ser entendidos por tecnologías de asistencia?

Aquí hay algunos ejemplos de controles y lo que necesita para poder averiguar:

Casilla de verificación: ¿está marcada o no?
Foco: ¿Qué elemento tiene foco? ¿Se puede entender mediante programación (no solo visualmente)?

¿Los usuarios son conscientes de los mensajes de estado a los que no se les da atención de una manera que no necesariamente interrumpe el trabajo?

Imagínese si estuviera navegando por una página y, mientras estaba en esa página, apareció un banner en la parte superior del sitio web que anunciaba una venta.

¿Los formularios están diseñados de la manera correcta?

Para hacer que los formularios sean accesibles, querrá asegurarse de que lo siguiente esté habilitado:

Capacidad de usar la pestaña para navegar a través del formulario
Capacidad de usar la pestaña para navegar a través del formulario