Compartir a través de

Requisitos de texto accesible

  • Artículo

En este tema se describen los procedimientos recomendados para la accesibilidad del texto en una aplicación, asegurándose de que los colores y los fondos cumplan la relación de contraste necesaria. En este tema también se describen los roles de Microsoft Automatización de la interfaz de usuario que pueden tener los elementos de texto de una aplicación de Plataforma universal de Windows (UWP) 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 texto debe tener en cuenta esa opción como último recurso. Una práctica mucho mejor es asegurarse de que el texto de la aplicación cumple ciertas directrices establecidas 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 consideran el matiz de color. Por ejemplo, si tiene texto rojo en un fondo verde, es posible que ese texto no sea legible para alguien con un deterioro de la daltonismo. Comprobar y corregir la relación de contraste puede evitar estos tipos de problemas de accesibilidad.

Las recomendaciones para el contraste de texto que se documentan aquí se basan en un estándar de accesibilidad web, G18: Asegurarse de que existe una relación de contraste de al menos 4.5:1 entre texto (e imágenes de texto) y fondo detrás del texto. Esta guía existe en la especificación W3C Técnicas para WCAG 2.0 .

Para considerarse accesible, el texto visible debe tener una relación mínima de contraste de luminosidad de 4,5:1 en segundo plano. Las excepciones incluyen logotipos y texto incidental, como texto que forma parte de un componente de interfaz de usuario inactivo.

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

Use herramientas de contraste de color para comprobar que la relación de contraste de texto visible es aceptable. Consulte Técnicas para WCAG 2.0 G18 (sección Recursos) para obtener herramientas que pueden probar las relaciones de contraste.

Nota:

Algunas de las herramientas enumeradas por Técnicas para WCAG 2.0 G18 no se pueden usar de forma interactiva con una aplicación para UWP. Es posible que tenga que escribir los valores de color de primer plano y de fondo manualmente en la herramienta, o hacer capturas de pantalla de la interfaz de usuario de la aplicación y, a continuación, ejecutar la herramienta de proporción de contraste sobre la imagen de captura de pantalla.

Roles de elemento Text

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

Cuando un control informa que tiene un rol de Editar, las tecnologías de asistencia asumen que hay maneras de que los usuarios cambien los valores. Por lo tanto, si colocas texto estático en un TextBox, estás informando erróneamente del rol y, por tanto, informando erróneamente de la estructura de la aplicación al usuario de accesibilidad.

En los modelos de texto para XAML, hay dos elementos que se usan principalmente para texto estático, TextBlock y RichTextBlock. Ninguna de ellas es una subclase Control y, como tal, ninguna de ellas es con foco de teclado o puede aparecer en el orden de tabulación. Pero eso no significa que las tecnologías de asistencia no puedan leerlas o no las leerán. Normalmente, los lectores de pantalla están diseñados para admitir varios modos de lectura del contenido en una aplicación, incluidos 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 coloque el texto estático en contenedores centrados solo para que el orden de tabulación llegue al usuario. Los usuarios de tecnología de asistencia esperan que cualquier cosa en el orden de tabulación sea interactiva y, si encuentran texto estático allí, es más confuso que útil. Debe probar esto usted mismo con Narrador para obtener una idea de la experiencia del usuario con la aplicación al usar un lector de pantalla para examinar el texto estático de la aplicación.

Accesibilidad de sugerencias automáticas

Cuando un usuario escribe en un campo de entrada y aparece una lista de posibles sugerencias, este tipo de escenario se denomina sugerencia automática. Esto es común en la línea Para: línea de un campo de correo, el cuadro de búsqueda Cortana en Windows, el campo de entrada url en Microsoft Edge, el campo de entrada de ubicación en la aplicación Weather, etc. Si usas un XAML AutosuggestBox o los controles intrínsecos HTML, esta experiencia ya está enlazada de forma predeterminada. Para que esta experiencia sea accesible, se debe asociar el campo de entrada y la lista. Esto se explica en la sección Implementación de la sugerencia automática.

El narrador se ha actualizado para hacer que este tipo de experiencia sea accesible con un modo de sugerencias especiales. En un nivel alto, cuando el campo de edición y la lista estén conectados correctamente, el usuario final hará lo siguiente:

  • Saber que la lista está presente y cuándo se cierra la lista
  • Saber cuántas sugerencias están disponibles
  • Conocer el elemento seleccionado, si existe
  • Poder mover el foco del narrador a la lista
  • Poder navegar por una sugerencia con todos los demás modos de lectura

Lista de sugerencias
Ejemplo de una lista de sugerencias

Implementación de la sugerencia automática

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

En un nivel alto hay dos 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 desencadenará en una aplicación para UWP. Cada vez que cambia la selección, cuando el usuario escribe otra letra y las sugerencias se han actualizado o cuando un usuario navega por la lista, se debe desencadenar el evento ElementSelected .

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

Ninguna selección predeterminada
Si no hay ninguna selección predeterminada, como en el cuadro Ubicación de la aplicación Weather, Narrador busca el evento UIA_LayoutInvalidatedEventId de escritorio o el evento LayoutInvalidated de UWP que se activará en la lista cada vez que se actualice la lista.

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

Implementación de XAML

Si usas el XAML AutosuggestBox predeterminado, todo ya está conectado para ti. Si va a realizar su propia experiencia de sugerencias automáticas con un TextBox y una lista, deberá establecer la lista como AutomationProperties.ControlledPeers en textBox. Debe activar el evento AutomationPropertyChanged para la propiedad ControlledPeers cada vez que agregue o quite esta propiedad y también active sus propios eventos SelectionItemPatternOnElementSelected o Eventos LayoutInvalidated en función del tipo de escenario, que se explicó anteriormente en este artículo.

Implementación de HTML

Si usa los controles intrínsecos en HTML, la implementación de UIA ya se ha asignado automáticamente. A continuación se muestra un ejemplo de una implementación que ya está enlazada para usted:

<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 va a crear sus propios controles, debe configurar sus propios controles ARIA, que se explican en los estándares W3C.

Texto en gráficos

Siempre que sea posible, evite incluir texto en un gráfico. Por ejemplo, cualquier texto que incluya en el archivo de origen de imagen que se muestra en la aplicación como un elemento Image no es accesible o legible automáticamente por las tecnologías de asistencia. Si debe usar texto en gráficos, asegúrese de que el AutomationProperties.Name valor que proporcione como equivalente de "texto alternativo" incluye ese 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 haya 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 escalado y resolución en Configuración-Sistema-Pantalla-Escala>>> y diseño. Exactamente qué opciones de ajuste de tamaño están disponibles puede variar, ya que depende de las funcionalidades del dispositivo de visualización.
  • Configuración de tamaño de texto en Configuración-Facilidad> de acceso-Visualización>. Ajuste la configuración Hacer que el texto sea 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 texto y 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 afecta al 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 puede usar el evento TextScaleFactorChanged y la propiedad TextScaleFactor para averiguar los cambios en la configuración Tamaño de texto en el 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 escala verticalmente por esta cantidad. Es posible que pueda usar el valor para, por ejemplo, escalar gráficos para que coincidan con el texto. Pero recuerde que no todo el texto se escala según el mismo factor. Por lo general, el texto más grande consiste en comenzar, menos se ve afectado por el escalado.

Estos tipos tienen una propiedad IsTextScaleFactorEnabled :

Ejemplos

Sugerencia

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

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