Compartir a través de

Exponer información básica de accesibilidad

Los aspectos básicos de accesibilidad se asignan al nombre, el rol y el valor. En este tema se muestra cómo exponer estas propiedades en la aplicación para que las tecnologías de asistencia puedan interpretar la interfaz de usuario correctamente.

Nombre accesible

Un nombre accesible es la etiqueta que anuncia un lector de pantalla para un elemento de interfaz de usuario. Establézcalo en elementos que transmiten significado o admiten la interacción, incluidas imágenes, campos de entrada, botones, controles y regiones.

En la tabla siguiente se describe cómo definir u obtener un nombre accesible para varios tipos de elementos en una interfaz de usuario XAML.

Tipo de elemento Descripción
Texto estático Para los elementos TextBlock y RichTextBlock, se determina automáticamente un nombre accesible a partir del texto visible (interno). Todo el texto de ese elemento se usa como nombre. Consulte Nombre del texto interno.
Imágenes El elemento XAML Image no tiene una analogía directa con el atributo HTML alt de img y elementos similares. Use AutomationProperties.Name para proporcionar un nombre o use la técnica de subtitulado. Consulte Nombres accesibles para imágenes.
Elementos del formulario El nombre accesible de un elemento de formulario debe ser el mismo que la etiqueta que se muestra para ese elemento. Consulte etiquetas y LabeledBy.
Botones y vínculos De forma predeterminada, el nombre accesible de un botón o vínculo se basa en el texto visible, con las mismas reglas que se describen en Nombre del texto interno. En los casos en los que un botón contiene solo una imagen, use AutomationProperties.Name para proporcionar un equivalente de solo texto de la acción prevista del botón.

La mayoría de los elementos contenedor (como paneles) no exponen un nombre accesible. En la automatización de la interfaz de usuario, los elementos secundarios significativos deben proporcionar el nombre y el rol, mientras que el contenedor expone principalmente la estructura para su navegación.

Rol y valor

Los controles XAML exponen el rol (y, cuando procede, el valor) a través de su compatibilidad integrada con Automatización de la Interfaz de Usuario. Inspeccione estas propiedades con herramientas de automatización de la interfaz de usuario o en la documentación de AutomationPeer de cada control. Los roles se asignan a AutomationControlType y se exponen para las tecnologías de asistencia a través del AutomationPeer del control.

Solo los controles con semántica de valor exponen un valor de Automatización de la interfaz de usuario. Por ejemplo, TextBox admite IValueProvider a través de TextBoxAutomationPeer, por lo que las tecnologías de asistencia pueden detectar y leer su valor actual.

Nota:

Si establece AutomationProperties.Name explícitamente, no repita los términos de rol o tipo, como "botón" o "lista" en el nombre. Role/type procede de LocalizedControlType y muchas tecnologías de asistencia la anexan al nombre. El texto de rol repetido puede generar resultados como "botón". Verifique este comportamiento con el Narrador.

Influenciar las vistas de árbol de la automatización de la interfaz de usuario

La automatización de IU representa las relaciones de elementos en tres vistas de árbol: raw, control y contenido. Cada vista sirve para un propósito diferente. La vista sin procesar incluye casi todos los elementos de automatización, la vista de control destaca los controles interactivos y los puntos de navegación estructurales, y la vista de contenido se centra en los elementos que comunican el contenido orientado al usuario. En la práctica, las tecnologías de asistencia y las herramientas de inspección de accesibilidad suelen basarse en la vista de control, ya que proporciona el equilibrio más útil entre integridad y facilidad de uso.

De forma predeterminada, la mayoría de los elementos derivados de Control aparecen en la vista de control cuando la aplicación se expone a través de la automatización de la interfaz de usuario. En las interfaces compuestas, esto puede introducir nodos duplicados o de bajo valor que añaden ruido para los usuarios de tecnologías de asistencia. Use AutomationProperties.AccessibilityView para controlar cómo se exponen los elementos específicos en las vistas de árbol. Por ejemplo, colocar un elemento en Raw normalmente lo mantiene disponible para escenarios de diagnóstico y recorrido al excluirlo de las vistas principales usadas por muchas tecnologías de asistencia. Para revisar los patrones reales, inspeccione las plantillas de control en generic.xaml y busque AutomationProperties.AccessibilityView.

Nombre del texto interno

Muchos controles XAML pueden derivar un nombre accesible predeterminado del texto que ya está visible en la interfaz de usuario. Este comportamiento reduce la necesidad de establecer AutomationProperties.Name explícitamente para patrones comunes basados en texto y ayuda a mantener lo que los usuarios escuchan alineados con lo que ven.

  • TextBlock, RichTextBlock y TextBox suelen promover su contenido de texto como nombre accesible predeterminado.
  • Las subclases ContentControl evalúan su valor content y usan una estrategia iterativa "ToString" para extraer contenido de cadena para el nombre accesible predeterminado.

Nota:

La automatización de la interfaz de usuario aplica un máximo de 2048 caracteres para el nombre accesible. Si la generación automática de nombres genera una cadena más larga, el valor se trunca.

Nombres accesibles para imágenes

Para contenido que no sea de texto, como imágenes y gráficos, proporcione una alternativa de texto para que los lectores de pantalla puedan identificar y anunciar correctamente el elemento. Dado que estos elementos normalmente no exponen texto interno, la automatización de la interfaz de usuario no puede derivar automáticamente un nombre accesible predeterminado. (Los objetos visuales puramente decorativos o estructurales son una excepción y, por lo general, no deben denominarse). Cuando es necesario anunciar una imagen significativa, establezca AutomationProperties.Name explícitamente, como se muestra en el ejemplo siguiente.

<Image
    Source="Assets/product.png"
    AutomationProperties.Name="Customer using the product" />

Como alternativa, exponga un título visible y asócielo a la imagen a través de AutomationProperties.LabeledBy. Esto mantiene la etiqueta hablada alineada con el texto en pantalla y evita duplicar las cadenas en el marcado. En el siguiente ejemplo de WinUI se muestra este patrón:

<StackPanel Spacing="8">
    <Image
        x:Name="heroImage"
        Width="480"
        Source="Assets/snoqualmie-NF.jpg"
        AutomationProperties.LabeledBy="{Binding ElementName=heroCaption}" />
    <TextBlock x:Name="heroCaption" Text="Mount Snoqualmie Skiing" />
</StackPanel>

Etiquetas y EtiquetadoPor

Para los campos de formulario, el patrón de etiquetado preferido es definir el texto de etiqueta visible en un TextBlock y hacer referencia a ese elemento desde el control de entrada a través de AutomationProperties.LabeledBy. Esto crea una asociación entre la etiqueta de la interfaz de usuario y el control en el árbol de automatización, por lo que las tecnologías de asistencia pueden anunciar un nombre de campo que coincida con lo que se muestra en la pantalla. Este patrón suele ser más fácil de mantener que duplicar el texto de la etiqueta en varias propiedades porque la misma cadena de origen controla el etiquetado visual y accesible.

<StackPanel x:Name="LayoutRoot" Spacing="12">
    <StackPanel Orientation="Horizontal" Spacing="8">
        <TextBlock x:Name="firstNameLabel" Text="First name" />
        <TextBox
            x:Name="firstNameTextBox"
            Width="180"
            AutomationProperties.LabeledBy="{Binding ElementName=firstNameLabel}" />
    </StackPanel>

    <StackPanel Orientation="Horizontal" Spacing="8">
        <TextBlock x:Name="lastNameLabel" Text="Last name" />
        <TextBox
            x:Name="lastNameTextBox"
            Width="180"
            AutomationProperties.LabeledBy="{Binding ElementName=lastNameLabel}" />
    </StackPanel>
</StackPanel>

Descripción accesible (opcional)

Una descripción accesible proporciona información complementaria sobre un elemento de interfaz de usuario cuando el nombre accesible por sí solo no es suficiente. Úselo para agregar contexto de aclaración, como intenciones, sugerencias de uso o detalles de comportamiento importantes que ayudan a los usuarios de tecnología de asistencia a comprender cómo trabajar con el control.

En Narrador, la descripción suele leerse a petición en lugar de como parte del anuncio predeterminado. Los usuarios pueden solicitar este detalle adicional presionando CapsLock+F.

Trate el nombre accesible como identificador principal del control y manténgalo conciso. Cuando se requiera más explicación, proporcione ese detalle adicional a través de AutomationProperties.HelpText además de AutomationProperties.Name.

Probar la accesibilidad temprano y a menudo

La manera más confiable de validar la compatibilidad con lectores de pantalla es probar la aplicación directamente con un lector de pantalla durante el desarrollo, no solo en tiempo de lanzamiento. Las pruebas tempranas y repetidas le ayudan a identificar nombres accesibles que faltan o engañosos, una exposición de control incorrecta y problemas de navegación, mientras que los cambios siguen siendo económicos para corregir. Después de cada paso, refina la estructura de la interfaz de usuario y las propiedades de automatización de la interfaz de usuario en función de lo que los usuarios escuchan realmente y cómo se mueven a través de la interfaz. Para obtener más información, consulte Pruebas de accesibilidad.

AccScope es una herramienta útil para este flujo de trabajo porque visualiza la interfaz de usuario como un árbol de automatización, lo que facilita la inspección de lo que las tecnologías de asistencia pueden detectar. Su vista centrada en narrador le ayuda a comprobar cómo se genera el texto y cómo se agrupan y ordenan los elementos para la salida hablada. Úselo durante todo el ciclo de vida del producto, incluida la validación temprana del diseño y la plantilla de control, para detectar problemas de accesibilidad estructural antes de que aparezcan en las pruebas de usuario. Para obtener más información, consulte AccScope.

Nombres accesibles a partir de datos dinámicos

Muchos controles de Windows representan contenido a través del enlace de datos, lo que significa que los nombres accesibles a menudo se determinan a partir de datos en tiempo de ejecución en lugar de XAML estático. Cuando las plantillas de lista o elemento se rellenan dinámicamente, compruebe que cada elemento generado expone un nombre accesible significativo una vez completado el enlace. Según la composición del control y la plantilla, es posible que tenga que establecer o actualizar las propiedades de accesibilidad mediante programación para que el árbol de automatización refleje el estado representado final. Para ver un ejemplo completo, consulta "Escenario 4" en el ejemplo de accesibilidad XAML (ejemplo heredado archivado).

Nombres y localización accesibles

Los nombres accesibles deben localizarse con el mismo rigor que el texto visible de la interfaz de usuario. Almacene cadenas de etiqueta en recursos de localización y conéctelas a través de asignaciones de directivas x:Uid para que la salida hablada coincida con el idioma del usuario. Si establece AutomationProperties.Name explícitamente, asegúrese de que el valor también procede de recursos localizados en lugar de texto codificado de forma rígida.

Las propiedades adjuntas de AutomationProperties usan una sintaxis de clave de recurso calificada para que la localización pueda dirigirse a la propiedad adjunta en un elemento específico. Por ejemplo, si el elemento se denomina MediumButton, la clave de recurso de AutomationProperties.Name es MediumButton.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name.

  • Last updated on