Enlaces significativos
Evite enlaces que digan “Haga clic aquí” o texto sin contenido como “Más detalles” aplicado a una lista de enlaces.
Beneficios: Esto ayudaría a los usuarios con discapacidades motoras, limitaciones cognitivas o discapacidades visuales ayudándoles a evitar pulsaciones de teclas innecesarias para visitar un contenido que no es relevante para ellos.
Fuente: WCAG 2.1: Propósito del enlace (en contexto)
uso del color
No especifique información importante únicamente por color. Utilice una combinación de texto, color u objetos gráficos.
Beneficios: Es útil para usuarios con visión parcial o visión limitada de los colores, daltonismo. y para usuarios que utilizan pantallas de visualización monocromáticas, de color limitado o de solo texto.
Fuente: WCAG 2.1: Uso del color
Navegación consistente
Asegúrese de que los componentes repetidos aparezcan en el mismo orden en cada página de un sitio.
Beneficios: Es útil para usuarios con limitaciones cognitivas, baja visión y discapacidad intelectual, ya que resulta más fácil predecir dónde pueden encontrar cosas en cada página.
Fuente: WCAG 2.1: Navegación consistente
Componentes consistentes
Componentes de la interfaz de usuario Tener la misma funcionalidad debe ser consistente. Se recomienda mantener un sistema de diseño, una biblioteca de patrones o una guía de estilo para mantener la coherencia en el equipo. A continuación se muestran algunos ejemplos de sistemas de diseño sorprendentes: Polaris de Shopify, la biblioteca de diseño de Atlassian, GEL de la BBC.
Si los íconos u otro contenido que no sea texto tienen la misma funcionalidad, entonces su alternativas de texto también debe ser consistente.
Beneficios: El uso constante de componentes con la misma funcionalidad ayuda a las personas a identificar componentes en diferentes páginas con la funcionalidad deseada. Las personas con dificultades para leer textos se benefician enormemente de esto. Mantener las etiquetas coherentes también ayuda a lograr una experiencia más predecible.
Fuente: WCAG 2.1: Identificación consistente
Uso de encabezados
Utilice un título de página descriptivo e informativo. Los encabezados de página y las etiquetas para formularios y controles interactivos deben ser informativos.
Beneficios: Esto puede ayudar a los usuarios con memoria limitada a corto plazo, baja visión o dificultad para leer textos: solo pueden ver unas pocas palabras a la vez y conocer el propósito de cada sección.
Fuente: WCAG 2.1: Títulos y etiquetas , WCAG 2.1: títulos de sección, WCAG 2.1: Página titulada
Múltiples maneras
Debería haber más de una forma disponible para ubicar una página web dentro de un conjunto de páginas web. Excepciones: cuando la página web es parte de un proceso como una página de pago.
Beneficios: Esto ayuda a encontrar la información más rápidamente, lo que ayuda a los usuarios con discapacidades visuales o limitaciones cognitivas.
Fuente: WCAG 2.1: múltiples formas
Facilite a los usuarios operar la funcionalidad a través de varias entradas.
Interacciones
No confíe en interacciones dependientes del dispositivo (por ejemplo, pasar el mouse) para transmitir información o completar tareas. Si el diseño al pasar el mouse o enfocar es realmente necesario, entonces diseñe la interacción de tal manera que los usuarios puedan percibir el contenido adicional y descartarlo sin interrumpir su experiencia en la página.
Beneficios: Esto puede ayudar a los usuarios con baja visión o discapacidades cognitivas: pueden tener tiempo suficiente para percibir contenido adicional que aparece al pasar el mouse o enfocar y ver el contenido desencadenante con menos distracciones.
Fuente: WCAG 2.1: Contenido al pasar el mouse o enfocar
Características sensoriales
No proporcione instrucciones que se basen únicamente en características sensoriales de componentes como forma, color, tamaño, ubicación visual, orientación o sonido. por ejemplo, utilice una combinación de posicionamiento, color y etiquetado para identificar el contenido.
Beneficios: personas que son ciegas o tienen baja visión pueden no ser capaces de comprender la información si se transmite por forma y/o ubicación. Proporcionar información adicional les permitirá comprender la información transmitida.
Fuente: WCAG 2.1: Características sensoriales
Alternativa al movimiento del dispositivo
Si utiliza movimiento del dispositivo para activar una función, proporcione una interfaz de usuario alternativa para la función o permita al usuario desactivar la activación por movimiento de la función.
Beneficios: Esto ayuda a los usuarios que no pueden realizar movimientos particulares (como inclinarse, sacudir o hacer gestos) porque el dispositivo puede estar montado o porque es posible que los usuarios no puedan realizar físicamente el movimiento necesario. Un beneficio general podría darse en situaciones en las que los usuarios no pueden sostener ni mover el dispositivo porque sus manos están ocupadas con alguna otra actividad.
Fuente: WCAG 2.1: Actuación por movimiento
Gestos de puntero complejos
Si utiliza gestos complejos, proporcione también una alternativa de puntero único. por ejemplo, una vista de mapa que admite el gesto de pellizcar para hacer zoom y los gestos de arrastrar para mover el área visible. Los botones del teclado ofrecen la operación a través de [ + ] y [-] botones para acercar y alejar, y botones de flecha para desplazarse paso a paso en todas las direcciones.
Beneficios: Usuarios con discapacidades cognitivas o de aprendizaje o que no puedan realizar gestos complejos, dispondrán de medios alternativos para operar el contenido.
Fuente: WCAG 2.1: Gestos de puntero
Orientación del contenido
No limites tu diseño solo a retrato u paisaje, a menos que sea necesaria una orientación específica.
Beneficios: Esto puede ser útil para usuarios con problemas de destreza. — que tengan un dispositivo montado con una orientación fija para ver el contenido. Los usuarios con baja visión también pueden ver el contenido en la orientación que mejor les convenga.
Fuente: WCAG 2.1: Orientación
Asegúrese de que los usuarios puedan interactuar con su página utilizando únicamente el teclado.
Enfoque visible
Defina y diseñe claramente el estado de enfoque de los elementos de entrada. El cambio de contenido, como el texto, no debe realizarse en el foco.
Beneficios: Las personas con limitaciones de atención, de memoria a corto plazo o limitaciones en los procesos ejecutivos se benefician al poder descubrir dónde se encuentra el foco. Esto también ayuda a los usuarios con discapacidades visuales, limitaciones cognitivas y discapacidades motoras al reducir la posibilidad de que se produzca un cambio de contexto inesperado.
Fuente: WCAG 2.1: En foco , WCAG 2.1: Enfoque visible
Atajos de teclado
Defina atajos que se puedan usar fácilmente con una mano para operaciones comunes. Utilice algunos atajos de teclado comunes, no entren en conflicto con los atajos de navegador y lectores de pantalla existentes.
Atajos de una sola tecla puede causar problemas a los usuarios de entrada de voz, por lo que se debe proporcionar un mecanismo para desactivarlo, si es necesario. Por ejemplo, el correo de Google usa 'r' para responder un correo electrónico y también proporciona una forma de deshabilitar las entradas de una sola tecla o reasignarlas.
Beneficios: Esto mejora la usabilidad para usuarios que solo usan teclado. Sin embargo, los usuarios de voz o los que solo usan teclado con problemas de destreza son propensos a presionar teclas accidentalmente, por lo que se debe proporcionar un mecanismo para desactivar los atajos.
Fuente: WCAG 2.1: atajos de teclas de caracteres
Orden de tabulación lógica
Utilice un orden de navegación de teclado lógico. Al navegar por una ventana con el Pestaña tecla, el foco del teclado debe moverse entre los controles en un orden predecible.
Beneficios: Un orden de enfoque lógico ayuda a los usuarios con problemas de movilidad, a los usuarios con discapacidades que dificultan la lectura y a los usuarios con problemas visuales. Una secuencia significativa ayuda a los usuarios que dependen de tecnologías de asistencia que leen contenido en voz alta.
Fuente: WCAG 2.1: orden de enfoque , WCAG 2.1: secuencia significativa
Opción para saltarse la sección.
Incluir un “Saltar al contenido principal“Enlace antes del encabezado para usuarios de teclado que es visible solo cuando tiene el foco.
Beneficios: Los usuarios del teclado pueden acceder al contenido con menos pulsaciones de teclas. Los usuarios de lectores de pantalla pueden omitir fácilmente algunas secciones que no son relevantes para ellos.
Fuente: WCAG 2.1: Bloques de derivación
Asegúrese de que los objetivos táctiles tengan al menos 9 mm de alto por 9 mm de ancho, independientemente del tamaño de la pantalla, el dispositivo o la resolución.
Deje suficiente espacio inactivo alrededor de los controles para que no se superpongan con otros objetivos táctiles.
Beneficios: Es útil para usuarios con problemas de movilidad, como temblores en las manos o dedos grandes, usuarios que utilizan un dispositivo móvil en entornos como el transporte público o usuarios que acceden a un dispositivo con una mano. Los usuarios con baja visión pueden ver mejor el objetivo.
Fuente: Mapeo de accesibilidad móvil WCAG: tamaño y espaciado del objetivo táctil , Tamaño objetivo WCAG 2.1
Esto puede resultar desorientador para usuarios de lectores de pantalla o Usuarios con discapacidad cognitiva.
Si debes hacerlo, avisa al usuario antes de que haga clic en el enlace que se abrirá en una nueva ventana. Puede utilizar texto como “se abre en una nueva ventana” o un icono visual. Si elige utilizar un ícono, asegúrese de que sea accesible para los usuarios de lectores de pantalla.
Beneficios: Esto ayuda a los usuarios al presentar el contenido en un orden predecible de una página web a otra.
Fuente: Técnica WCAG: avisar a los usuarios con antelación antes de abrir una nueva ventana
No diseñe contenido de una manera que se sepa que causa convulsiones.
Ningún contenido de la página debe parpadear más de 3 veces por segundo a menos que el contenido parpadeante sea lo suficientemente pequeño y los destellos sean de bajo contraste y no contengan demasiado rojo.
Por ejemplo, una película con una escena en la que aparecen relámpagos muy brillantes se edita de modo que los relámpagos solo destellan tres veces en un período de un segundo.
Beneficios: Las personas que tengan convulsiones, epilepsia fotosensible o cualquier otro trastorno convulsivo fotosensible podrán disfrutar de toda la experiencia del sitio.
Fuente: WCAG 2.1: Convulsiones y reacciones físicas , WCAG 2.1: tres destellos o por debajo del umbral , WCAG 2.1: Tres destellos
Lineal y consistente
Cree contenido que pueda presentarse de diferentes maneras (por ejemplo diseño más simple) sin perder información ni estructura.
Ser claro por escrito; Evite la jerga y los modismos.
Beneficios: Esto es útil para usuarios de lectores de pantalla, usuarios con baja visión o usuarios en el espectro autista. Mantener el contenido claro y breve ayuda a los usuarios con dislexia.
Fuente: Mapeo de accesibilidad móvil WCAG: diseño consistente , WCAG 2.1: Información y relaciones
Diseño de respuesta
Considere los dispositivos móviles al diseñar inicialmente el diseño y la relevancia del contenido. (Diseño móvil primero)
Beneficios: Esto permite que el contenido se amplíe y responda a varios tamaños de pantalla sin pérdida de información o funcionalidad y sin desplazarse en dos dimensiones, ayudando en consecuencia a los usuarios con baja visión y discapacidades físicas o motoras.
Fuente: WCAG 2.1: Reflujo
Texto alternativo para imágenes
Este texto es leído por los usuarios de lectores de pantalla. El lector de pantalla no debe anunciar las imágenes que no transmiten ningún contenido y que se utilizan con fines decorativos.
Asegúrese de que haya suficiente descripción para las imágenes proporcionadas para el lector de pantalla.
Beneficios: Esto ayuda a las personas que tienen dificultades para percibir el contenido visual. La tecnología de asistencia puede leer texto en voz alta, presentarlo visualmente o convertirlo a braille. Las personas que tienen problemas para comprender la información del audio pueden leer la presentación del texto.
Fuente: WCAG 2.1: contenido no textual
Tiempo suficiente para leer y utilizar el contenido.
Permita que el usuario pausa, detiene u oculta contenido que se mueve, parpadea, se desplaza o se actualiza automáticamente, por ejemplo, un teletipo de noticias que se actualiza dinámicamente, mensajes de chat, etc.
Beneficios: Personas con problemas de lectura, limitaciones cognitivas, problemas de aprendizaje. o cualquier Las personas con discapacidad física a menudo necesitan más tiempo para reaccionar, escribir y completar actividades. El control de los límites de tiempo también es importante en situaciones en las que se requiere un intérprete.
Fuente: WCAG 2.1: Pausar, detener, ocultar , WCAG 2.1: Tiempo ajustable
Elementos de audio o vídeo accesibles
Asegúrese de proporcionar una alternativa para solo audio pregrabado, por ejemplo, transcripciones de texto. Proporcione subtítulos para contenido de audio pregrabado.
Proporcionar una alternativa para medios basados en el tiempo o una pista de audio y una descripción de audio para Sólo vídeo pregrabado.
Beneficios: La tecnología de asistencia puede leer textos alternativos en voz alta, presentarlos visualmente o convertirlos a braille. Personas sordas o…