Requisitos de texto accesible

  • Artículo

En este tema se describen los procedimientos recomendados sobre accesibilidad de texto en una aplicación mediante la configuración de los colores de texto y fondo, de forma que cumplan con la relación de contraste necesaria. También se analizan los roles de automatización de la interfaz de usuario de Microsoft que pueden tener los elementos de texto en una aplicación para la Plataforma universal de Windows (UWP) con C++, C# o Visual Basic y los procedimientos recomendados para texto en gráficos.

Relaciones de contraste

Aunque los usuarios siempre tienen la opción de cambiar a un modo de contraste alto, el diseño de la aplicación para el texto debe considerar esa opción como último recurso. Un procedimiento mucho más recomendable es asegurarse de que el texto de la aplicación cumpla con ciertos criterios establecidos para el nivel de contraste entre el texto y su fondo. La evaluación del nivel de contraste se basa en técnicas deterministas que no tienen en cuenta el matiz del color. Por ejemplo, si hay texto rojo sobre un fondo verde, es posible que un usuario daltónico no pueda leer el texto. Si se comprueba y corrige la relación de contraste, se puede evitar este tipo de problemas de accesibilidad.

Las recomendaciones de contraste de texto aquí documentadas se basan en un estándar de accesibilidad web, G18: asegurarse de que exista una relación de contraste de al menos 4.5:1 entre el texto (e imágenes de texto) y el fondo que se encuentra detrás de él. Este criterio se encuentra en la especificación sobre las técnicas de W3C para WCAG 2.0.

Para considerarse accesible, el texto visible debe tener una relación de contraste de luminosidad mínima de 4.5:1 si se lo compara con el fondo. Algunas excepciones son los logotipos y el texto ocasional, como el texto que forma parte de un componente inactivo de la interfaz de usuario.

Se excluye el texto que es decorativo y no transmite ninguna información. Por ejemplo, si se usan palabras aleatorias para crear un fondo, y las palabras pueden reordenarse o substituirse sin cambiar el significado, se consideran decorativas y no necesitan cumplir con este criterio.

Usa herramientas de contraste de color para comprobar que la relación de contraste del texto visible sea aceptable. Consulta Técnicas de WCAG 2.0 G18 (Sección recursos) para ver las herramientas que pueden probar las relaciones de contraste.

Nota

Algunas de las herramientas indicadas en el tema sobre las técnicas de WCAG 2.0 G18 no se pueden usar de manera interactiva con una aplicación para UWP. Es posible que tengas que especificar valores de colores para el primer plano y el fondo manualmente en la herramienta, o realizar capturas de pantalla de la interfaz de usuario de la aplicación y después ejecutar la herramienta de relación de contraste en la imagen capturada.

Roles de elementos de texto

Una aplicación para UWP puede usar estos elementos predeterminados (comúnmente denominados elementos de texto o controles de textedit):

Cuando un control notifica que tiene un rol Edit, las tecnologías de asistencia suponen que los usuarios tienen mecanismos para cambiar los valores. Por tanto, si pones texto estático en un elemento TextBox, provocarás que se malinterprete el rol y, por consiguiente, la estructura de la aplicación para el usuario de accesibilidad.

En los modelos de texto de XAML, hay dos elementos que se usan principalmente para texto estático, TextBlock y RichTextBlock. Ninguno de ellos son una subclase de Control y, por lo tanto, ninguno es activable mediante teclado ni puede aparecer en el orden de tabulación. Pero eso no significa que las tecnologías de asistencia no puedan leerlos. Los lectores de pantalla suelen estar diseñados para admitir varios modos de lectura del contenido de una aplicación, incluido un modo de lectura dedicado o patrones de navegación que van más allá del foco y el orden de tabulación, como un "cursor virtual". Por lo tanto, no pongas texto estático en contenedores activables para que el orden de tabulación lleve allí al usuario. Los usuarios de tecnologías de asistencia esperan que lo que hay en el orden de tabulación sea interactivo y si encuentran texto estático, resultará más confuso que útil. Debes probarlo con Narrador para hacerte una idea de cuál será la experiencia del usuario con tu aplicación cuando use un lector de pantalla para examinar el texto estático de dicha aplicación.

Accesibilidad de las sugerencias automáticas

Cuando un usuario escribe en un campo de entrada y aparece una lista de sugerencias posibles, este tipo de escenario se conoce como sugerencia automática. Esto es habitual en la línea A: de un campo de correo, el cuadro de búsqueda de Cortana en Windows, el campo de entrada de la dirección URL en Microsoft Edge, el campo de entrada de la ubicación en la aplicación El Tiempo, etc. Si usas un AutosuggestBox de XAML o los controles HTML intrínsecos, esta experiencia ya está enlazada automáticamente de manera predeterminada. Para que esta experiencia sea accesible, deben asociarse el campo de entrada y la lista. Esto se explica en la sección Implementación de las sugerencias automáticas.

Narrador se ha actualizado para que este tipo de experiencia sea accesible con un modo especial de sugerencias. En un nivel alto, si el campo de edición y la lista se conectan correctamente, el usuario podrá:

  • Saber que la lista está presente y cuándo se cierra.
  • Saber cuántas sugerencias hay disponibles.
  • Conocer el elemento seleccionado, si lo hay.
  • Mover el foco de Narrador a la lista.
  • Navegar por una sugerencia con todos los demás modos de lectura.

Lista de sugerencias
Ejemplo de una lista de sugerencias

Implementación de las sugerencias automáticas

Para que esta experiencia sea accesible, el campo de entrada y la lista deben asociarse en el árbol de UIA. Esta asociación se realiza con la propiedad UIA_ControllerForPropertyId en las aplicaciones de escritorio o con la propiedad ControlledPeers en las aplicaciones para UWP.

En un nivel alto, existen 2 tipos de experiencias de sugerencias automáticas.

Selección predeterminada
Si se realiza una selección predeterminada en la lista, Narrador busca un evento de UIA_SelectionItem_ElementSelectedEventId en una aplicación de escritorio o el evento AutomationEvents.SelectionItemPatternOnElementSelected que se activará en una aplicación para UWP. Cada vez que cambia la selección, cuando el usuario escribe otra letra y las sugerencias se actualizan o cuando un usuario navega por la lista, debería activarse el evento ElementSelected.

Lista con una selección predeterminada
Ejemplo en el que existe una selección predeterminada

Ninguna selección predeterminada
Si no hay ninguna selección predeterminada, como en el cuadro de ubicación de la aplicación El Tiempo, Narrador busca que cada vez que se actualice la lista, en dicha lista se genere el evento UIA_LayoutInvalidatedEventId en una aplicación de escritorio o el evento LayoutInvalidated en una aplicación para UWP.

Lista sin ninguna selección predeterminada
Ejemplo en el que no existe ninguna selección predeterminada

Implementación de XAML

Si se utiliza la clase XAML AutosuggestBox predeterminada, todo está ya enlazado de forma automática. Si vas a crear tu propia experiencia de sugerencias automáticas con una clase TextBox y una lista, tendrás que establecer la lista como AutomationProperties.ControlledPeers en la clase TextBox. Debes activar el evento AutomationPropertyChanged para la propiedad ControlledPeers cada vez que agregues o quites esta propiedad y también activar tus propios eventos SelectionItemPatternOnElementSelected o LayoutInvalidated según el tipo de escenario, algo que se explica anteriormente en este mismo artículo.

Implementación de HTML

Si usas los controles intrínsecos de HTML, la implementación de UIA ya se habrá asignado automáticamente. A continuación hay un ejemplo de una implementación que ya está enlazada automáticamente:

<label>Sites <input id="input1" type="text" list="datalist1" /></label>
<datalist id="datalist1">
        <option value="http://www.google.com/" label="Google"></option>
        <option value="http://www.reddit.com/" label="Reddit"></option>
</datalist>

Si vas a crear tus propios controles, debes configurar tus propios controles ARIA, que se explican en los estándares de W3C.

Texto en gráficos

Siempre que sea posible, evita incluir texto en un gráfico. Por ejemplo, las tecnologías de asistencia no podrán leer automáticamente los textos que incluyas en el archivo de origen de imagen que se muestre en la aplicación como un elemento Image ni tampoco acceder a ellos. Si tienes que usar texto en los gráficos, asegúrate de que el valor AutomationProperties.Name que proporcionas como equivalente del texto alternativo incluya el texto o un resumen del significado del texto. Se aplican consideraciones similares si va a crear caracteres de texto a partir de vectores como parte de una ruta de acceso o mediante glifos.

Tamaño y escala de fuente de texto

Los usuarios pueden tener dificultades para leer texto en una aplicación cuando las fuentes usan son simplemente demasiado pequeñas, por lo que asegúrese de que cualquier texto de la aplicación sea un tamaño razonable en primer lugar.

Una vez que hayas hecho lo obvio, Windows incluye varias herramientas y configuraciones de accesibilidad que los usuarios pueden aprovechar y ajustar a sus propias necesidades y preferencias para leer texto. Entre ellas se incluyen las siguientes:

  • La herramienta Lupa, que amplía un área seleccionada de la interfaz de usuario. Debes asegurarte de que el diseño del texto de la aplicación no dificulta el uso de Lupa para leer.
  • Configuración global de escala y resolución en Configuración-System-Display-Scale>>> y layout. Exactamente qué opciones de ajuste de tamaño están disponibles puede variar, ya que esto depende de las funciones del dispositivo de pantalla.
  • Configuración de tamaño de texto en Configuración-Facilidad> de acceso-Visualización>. Ajusta la opción Hacer texto más grande para especificar solo el tamaño del texto en controles auxiliares en todas las aplicaciones y pantallas (todos los controles de texto de UWP admiten la experiencia de escalado de texto sin ninguna personalización o plantillas).

Nota

La opción Hacer todo más grande permite a un usuario especificar su tamaño preferido para el texto y las aplicaciones en general solo en su pantalla principal.

Varios controles y elementos de texto tienen una propiedad IsTextScaleFactorEnabled. Esta propiedad tiene el valor true de forma predeterminada. Cuando es true, se puede escalar el tamaño del texto de ese elemento. El escalado afecta al texto que tiene un tamaño FontSize pequeño a mayor grado que el texto que tiene un tamaño FontSize grande. Puede deshabilitar el cambio de tamaño automático estableciendo la propiedad IsTextScaleFactorEnabled de un elemento en false.

Consulte Escalado de texto para obtener más detalles.

Agregue el marcado siguiente a una aplicación y ejecútelo. Ajuste la configuración Tamaño de texto y vea lo que sucede con cada TextBlock.

XAML

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been left set to its default value of true."
    Style="{StaticResource BodyTextBlockStyle}"/>

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been set to false."
    Style="{StaticResource BodyTextBlockStyle}" IsTextScaleFactorEnabled="False"/>

No se recomienda deshabilitar el escalado de texto como el escalado universal del texto de la interfaz de usuario en todas las aplicaciones es una experiencia de accesibilidad importante para los usuarios.

También puedes usar el evento TextScaleFactorChanged y la propiedad TextScaleFactor para averiguar sobre los cambios realizados en la opción Tamaño del texto del teléfono. Este es el procedimiento:

C#

{
    ...
    var uiSettings = new Windows.UI.ViewManagement.UISettings();
    uiSettings.TextScaleFactorChanged += UISettings_TextScaleFactorChanged;
    ...
}

private async void UISettings_TextScaleFactorChanged(Windows.UI.ViewManagement.UISettings sender, object args)
{
    var messageDialog = new Windows.UI.Popups.MessageDialog(string.Format("It's now {0}", sender.TextScaleFactor), "The text scale factor has changed");
    await messageDialog.ShowAsync();
}

El valor de TextScaleFactor es un doble en el intervalo [1,2,25]. El texto más pequeño se aumenta según esta cantidad. El valor se podría usar para, por ejemplo, escalar elementos gráficos para que vayan a tono con el texto. Recuerda, de todas formas, que no todo el texto escala mediante el mismo factor. En términos generales, el texto más grande es el que menos se ve afectado por el ajuste de escala.

Estos tipos tienen una propiedad IsTextScaleFactorEnabled:

Ejemplos

Sugerencia

Abra la aplicación Galería de WinUI 3 y vea compatibilidad con accesibilidad de texto en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, las características y la funcionalidad de WinUI 3. Obtenga la aplicación en Microsoft Store o el código fuente en GitHub.