Creación de experiencias accesibles
Regiones de referencia
Los roles de punto de referencia de ARIA ayudan a las personas que utilizan lectores de pantalla a comprender cómo se organiza y estructura el contenido de una página web. La información que tiene una estructura visual se puede rotular mediante programación para que los usuarios de lectores de pantalla puedan entenderla. Los puntos de referencia también pueden actuar como objetivos para “omitir enlaces” y proporcionar atajos de teclado para que los usuarios de lectores de pantalla puedan saltar entre secciones de una página.
Implementación de puntos de referencia
El primer paso es dividir una página en áreas de contenido perceptibles. A continuación, asigne puntos de referencia a cada una de estas secciones clave. Por ejemplo, banner, main, complementaryy contentinfo son puntos de referencia de nivel superior. La Iniciativa para la Accesibilidad Web (Web Accessibility Initiative, WAI) proporciona una explicación detallada sobre todas las regiones de referencia disponibles.
Los puntos de referencia no se pueden establecer en un nivel de componente de Jutro, por eso, tendrá que decidir qué puntos de referencia son los más apropiados para su aplicación.
Encabezados
Los encabezados comunican cómo está estructurado el contenido de una página. Los usuarios de tecnologías de asistencia, como lectores de pantalla, también pueden usar atajos de teclado para navegar por una página cuando los encabezados se usan correctamente.
Los encabezados se anidan según su nivel y estos van desde <h1>, el encabezado más importante, hasta el de menor importancia <h6>. Siempre que sea posible, evite omitir los niveles de encabezado, ya que esto puede causar confusión. Por ejemplo, evite ubicar un <h5> inmediatamente después de un <h2>.
En Jutro, ciertos componentes y patrones reciben un nivel de encabezado predeterminado específico. Deberá asegurarse de que, a medida que se agreguen nuevos componentes de Jutro a una aplicación, la jerarquía de encabezados siga siendo lógica. Si el texto funciona visualmente como un encabezado de sección, márquelo como un encabezado para garantizar una interpretación adecuada por parte de las tecnologías de asistencia.
El siguiente ejemplo de la Iniciativa para la Accesibilidad Web ilustra una estructura jerárquica de encabezado que prioriza la organización clara de documentos para los usuarios:
Visibilidad del foco
Proporcione un indicador de foco claramente visible cuando se desplace hasta un elemento que puede recibir el foco mediante el teclado. Entre los elementos que pueden recibir el foco se incluyen enlaces, botones y controles de formulario. Todos los componentes de Jutro tienen un indicador de foco con una relación de contraste de al menos 3:1. Sin embargo, es posible que deba personalizar el color del indicador de foco según el tema de color de la aplicación. Por ejemplo, si el indicador de foco predeterminado es azul, pero está utilizando un fondo azul similar, es posible que el indicador no se destaque. La visibilidad del foco se puede cambiar rápidamente y aplicar de forma uniforme a los componentes correspondientes mediante tokens de diseño.
En el siguiente ejemplo, se ilustra un campo de entrada de texto en foco:
Validación
Instrucciones de formulario
Jutro utiliza un asterisco para marcar los campos obligatorios. El asterisco precede al rótulo del campo. Esto ayuda a los usuarios a identificar fácilmente qué campos son obligatorios escaneando solo el carácter más a la izquierda del rótulo.
Además de marcar los campos obligatorios con un asterisco, se recomienda incluir instrucciones claras en la parte superior del formulario, como “Todos los campos marcados con un asterisco son obligatorios”, para garantizar que los usuarios comprendan el significado del asterisco.
No se deben agregar instrucciones importantes como texto de marcador de posición, ya que esto puede causar una serie de problemas a algunos usuarios. El texto del marcador de posición a menudo desaparece a medida que un usuario escribe, lo que aumenta la carga cognitiva; además, suele tener poco contraste. En lugar de eso, coloque sugerencias e instrucciones, incluidos ejemplos y requisitos de formato, fuera del campo. Por ejemplo, si un usuario necesita conocer el formato de la fecha, es preferible incluirlo como texto de ayuda permanente.
Si una entrada requiere caracteres especiales, esto debe quedar claro en las instrucciones. Por ejemplo, si una contraseña debe tener al menos 8 caracteres y una letra mayúscula durante un proceso de registro, esto debe mostrarse antes de que el usuario cree una contraseña sin estas credenciales.
Mensajes de error
Asegúrese de que los mensajes de error sean lo más útiles posible para que los usuarios puedan solucionar los errores rápidamente. Si un usuario ha completado un formulario extenso y hay varios mensajes de error que solo indican “Este campo contiene un error”, esto no es útil. En cambio, es mucho más útil recibir mensajes de error como estos:
- “A la dirección de correo electrónico le falta el símbolo '@'”.
- “No ha ingresado información”.
Texto alternativo
El texto alternativo es esencial para garantizar que las imágenes puedan ser interpretadas por personas con diversas discapacidades. Por ejemplo, el software de lectura de pantalla anuncia texto alternativo, lo que ayuda a las personas con discapacidad visual a comprender lo que transmite una imagen.
Se debe decidir si una imagen es puramente decorativa (y debe ignorarse) o requiere un texto alternativo. La Iniciativa para la Accesibilidad Web (WAI) proporciona un árbol de decisiones útil para el texto alternativo.
Algunos componentes de Jutro contienen íconos, por eso, hemos agregado un texto alternativo predeterminado apropiado para ellos mediante un rótulo aria. Por ejemplo:
<svg class="jut__Icon__icon jut__Icon__iconSizeLarge" viewBox="0 0 24 24" role="img" data-testid="icon-gw-check-circle" aria-label="Success icon">
…
</svg>
Si desea agregar texto alternativo a un componente de ícono independiente, puede hacerlo pasando una propiedad aria-label al componente.