Creación de aplicaciones accesibles con propiedades semánticas

  • Artículo
  • Tiempo de lectura: 17 minutos

La semántica de accesibilidad se refiere a la creación de experiencias que hacen que las aplicaciones sean inclusivas para las personas que usan tecnología en una amplia gama de entornos y se acerquen a la interfaz de usuario con una variedad de necesidades y experiencias. En muchas situaciones, los requisitos legales para la accesibilidad pueden proporcionar un impulso para que los desarrolladores solucione los problemas de accesibilidad. Independientemente, es aconsejable crear aplicaciones inclusivas y accesibles para que las aplicaciones lleguen al público más grande posible.

Las Directrices de accesibilidad de contenido web (WCAG) son el estándar de accesibilidad global y el banco de pruebas legales para web y móviles. Estas directrices describen las distintas formas en que las aplicaciones se pueden hacer más percebibles, operables, comprensibles y sólidas para todos.

Muchas de las necesidades de accesibilidad del usuario se satisfacen a través de productos de tecnología de asistencia instalados por este o por herramientas y de la configuración proporcionada por el sistema operativo. Esto incluye funciones como lectores de pantalla, ampliación de pantalla y configuración de contraste alto.

Los lectores de pantalla suelen proporcionar descripciones auditivas de los controles que se muestran en la pantalla. Estas descripciones ayudan a los usuarios a navegar por la aplicación y proporcionan referencias a controles, como imágenes, que no tienen entrada ni texto. A menudo, los lectores de pantalla se controlan mediante gestos en la pantalla táctil, el panel de seguimiento o el teclado. Para obtener información sobre cómo habilitar lectores de pantalla, vea Habilitar lectores de pantalla.

Los sistemas operativos tienen sus propios lectores de pantalla con su propio comportamiento y configuración únicos. Por ejemplo, la mayoría de los lectores de pantalla leen el texto asociado a un control cuando recibe el foco, lo que permite a los usuarios orientarse a sí mismos a medida que navegan por la aplicación. Sin embargo, algunos lectores de pantalla también pueden leer toda la interfaz de usuario de la aplicación cuando aparece una página, lo que permite al usuario recibir todo el contenido informativo disponible de la página antes de intentar navegar por ella.

La mayoría de los lectores de pantalla leerán automáticamente cualquier texto asociado a un control que reciba el foco de accesibilidad. Esto significa que los controles, como Label o Button, que tienen un Text conjunto de propiedades serán accesibles para el usuario. Pero es posible que Image, ImageButton, ActivityIndicator y otros no se encuentren en el árbol de accesibilidad porque no hay ningún texto asociado a ellos.

La interfaz de usuario de aplicaciones multiplataforma de .NET (.NET MAUI) admite dos enfoques para proporcionar acceso a la experiencia de accesibilidad de la plataforma subyacente. Las propiedades semánticas son el enfoque de MAUI de .NET para proporcionar valores de accesibilidad en las aplicaciones y son el enfoque recomendado. Las propiedades de automatización son el enfoque de Xamarin.Forms para proporcionar valores de accesibilidad en las aplicaciones y se han reemplazado por propiedades semánticas. En ambos casos, el orden de accesibilidad predeterminado de los controles es el mismo orden en el que se muestran en XAML o se agregan al diseño. Sin embargo, diferentes diseños pueden tener factores adicionales que influyen en el orden de accesibilidad. Por ejemplo, el orden de accesibilidad de StackLayout también se basa en su orientación y el orden de accesibilidad de Grid se basa en su disposición de fila y columna. Para obtener más información sobre el orden de contenido, consulte Ordenación significativa del contenido en el blog de Xamarin.

Nota:

Cuando se WebView muestra un sitio web al que se puede acceder, también será accesible en una aplicación MAUI de .NET. Por el contrario, cuando se WebView muestra un sitio web que no es accesible, no será accesible en una aplicación MAUI de .NET.

Propiedades semánticas

Las propiedades semánticas se usan para definir información sobre qué controles deben recibir el foco de accesibilidad y qué texto se debe leer en voz alta al usuario. Las propiedades semánticas son propiedades adjuntas que se pueden agregar a cualquier elemento para establecer las API de accesibilidad de la plataforma subyacentes.

Importante

Las propiedades semánticas no intentan forzar el comportamiento equivalente en cada plataforma. En su lugar, se basan en la experiencia de accesibilidad proporcionada por cada plataforma.

La SemanticProperties clase define las siguientes propiedades adjuntas:

  • Description, de tipo string, que representa una descripción que el lector de pantalla leerá en voz alta. Para obtener más información, vea Propiedad DtsContainer.Description.
  • Hint, de tipo string, que es similar a Description, pero proporciona contexto adicional, como el propósito de un control. Para obtener más información, vea Sugerencia.
  • HeadingLevel, de tipo SemanticHeadingLevel, que permite que un elemento se marque como un encabezado para organizar la interfaz de usuario y facilitar la navegación. Para obtener más información, vea Niveles de título.

Estas propiedades adjuntas establecen valores de accesibilidad de plataforma para que un lector de pantalla pueda hablar sobre el elemento. Para obtener más información sobre las propiedades adjuntas, vea Propiedades adjuntas.

Descripción

La SemanticProperties.Description propiedad adjunta representa un breve y descriptivo string que un lector de pantalla usa para anunciar un elemento. Esta propiedad debe establecerse para los elementos que tienen un significado importante para comprender el contenido o interactuar con la interfaz de usuario. Establecer esta propiedad se puede lograr en XAML:

<Image Source="dotnet_bot.png"
       SemanticProperties.Description="Cute dot net bot waving hi to you!" />

Como alternativa, se puede establecer en C#:

Image image = new Image { Source = "dotnet_bot.png" };
SemanticProperties.SetDescription(image, "Cute dot net bot waving hi to you!");

Además, el SetValue método también se puede usar para establecer la SemanticProperties.Description propiedad adjunta:

image.SetValue(SemanticProperties.DescriptionProperty, "Cute dot net bot waving hi to you!");

Advertencia

Evite establecer la SemanticProperties.Description propiedad adjunta en .Label Esto detendrá la Text propiedad que habla el lector de pantalla. Esto se debe a que el texto visual debe coincidir idealmente con el texto leído en voz alta por el lector de pantalla.

La información de accesibilidad de un elemento también se puede definir en otro elemento. Por ejemplo, un elemento Label junto a un elemento Entry puede utilizarse para describir lo que representa Entry. Esto se puede lograr en XAML de la siguiente manera:

<Label x:Name="label"
       Text="Enter your name: " />
<Entry SemanticProperties.Description="{Binding Source={x:Reference label} Path=Text}" />

Como alternativa, puede establecerse en C# de la siguiente manera:

Label label = new Label
{
    Text = "Enter your name: "
};
Entry entry = new Entry();
SemanticProperties.SetDescription(entry, label.Text);

Pista

La SemanticProperties.Hint propiedad adjunta representa un string objeto que proporciona contexto adicional a la SemanticProperties.Description propiedad adjunta, como el propósito de un control. Establecer esta propiedad se puede lograr en XAML:

<Image Source="like.png"
       SemanticProperties.Description="Like"
       SemanticProperties.Hint="Like this post." />

Como alternativa, se puede establecer en C#:

Image image = new Image { Source = "like.png" };
SemanticProperties.SetDescription(image, "Like");
SemanticProperties.SetHint(image, "Like this post.");

Además, el SetValue método también se puede usar para establecer la SemanticProperties.Hint propiedad adjunta:

image.SetValue(SemanticProperties.HintProperty, "Like this post.");

En Android, esta propiedad se comporta de forma ligeramente diferente en función del control al que está asociado. Por ejemplo, para los controles sin valores de texto, como Switch y CheckBox, los controles mostrarán la sugerencia con el control . Sin embargo, para los controles con valores de texto, la sugerencia no se muestra y se lee después del valor de texto.

Advertencia

La SemanticProperties.Hint propiedad entra en conflicto con la Entry.Placeholder propiedad en Android, que ambas se asignan a la misma propiedad de plataforma. Por lo tanto, no se recomienda establecer un valor diferente SemanticProperties.Hint en el Entry.Placeholder valor.

Niveles de título

La SemanticProperties.HeadingLevel propiedad adjunta permite que un elemento se marque como un encabezado para organizar la interfaz de usuario y facilitar la navegación. Algunos lectores de pantalla permiten a los usuarios saltar rápidamente entre encabezados.

Los encabezados tienen un nivel de 1 a 9 y se representan mediante la SemanticHeadingLevel enumeración , que define Noney Level1 a través de Level9 miembros.

Importante

Aunque Windows ofrece 9 niveles de títulos, Android y iOS solo ofrecen un solo título. Por lo tanto, cuando SemanticProperties.HeadingLevel se establece en Windows se asigna al nivel de título correcto. Sin embargo, cuando se establece en Android y iOS se asigna a un solo nivel de encabezado.

En el ejemplo siguiente se muestra cómo establecer esta propiedad adjunta:

<Label Text="Get started with .NET MAUI"
       SemanticProperties.HeadingLevel="Level1" />
<Label Text="Paragraphs of text go here." />
<Label Text="Installation"
       SemanticProperties.HeadingLevel="Level2" />
<Label Text="Paragraphs of text go here." />    
<Label Text="Build your first app"
       SemanticProperties.HeadingLevel="Level3" />
<Label Text="Paragraphs of text go here." />     
<Label Text="Publish your app"
       SemanticProperties.HeadingLevel="Level4" />
<Label Text="Paragraphs of text go here." />

Como alternativa, se puede establecer en C#:

Label label1 = new Label { Text = "Get started with .NET MAUI" };
Label label2 = new Label { Text = "Paragraphs of text go here." };
Label label3 = new Label { Text = "Installation" };
Label label4 = new Label { Text = "Paragraphs of text go here." };
Label label5 = new Label { Text = "Build your first app" };
Label label6 = new Label { Text = "Paragraphs of text go here." };
Label label7 = new Label { Text = "Publish your app" };
Label label8 = new Label { Text = "Paragraphs of text go here." };
SemanticProperties.SetHeadingLevel(label1, SemanticHeadingLevel.Level1);
SemanticProperties.SetHeadingLevel(label3, SemanticHeadingLevel.Level1);
SemanticProperties.SetHeadingLevel(label5, SemanticHeadingLevel.Level1);
SemanticProperties.SetHeadingLevel(label7, SemanticHeadingLevel.Level1);

Además, el SetValue método también se puede usar para establecer la SemanticProperties.HeadingLevel propiedad adjunta:

label1.SetValue(SemanticProperties.HeadingLevelProperty, SemanticHeadingLevel.Level1);

Enfoque semántico

Los controles tienen un SetSemanticFocus método de extensión, definido en el espacio de nombres , que fuerza el Microsoft.Maui foco del lector de pantalla a un elemento especificado. Por ejemplo, dado un Label foco de lector de pantalla con nombre label, se puede forzar al elemento con el código siguiente:

label.SetSemanticFocus();

Lector de pantalla semántico

.NET Maui proporciona la interfaz , con la ISemanticScreenReader que puede indicar a un lector de pantalla que anuncie texto al usuario. La interfaz se expone a través de la SemanticScreenReader.Default propiedad y está disponible en el Microsoft.Maui.Accessability espacio de nombres .

Para indicar a un lector de pantalla que anuncie texto, use el Announce método y pase un string argumento que represente el texto. En el ejemplo siguiente se muestra el uso de este método:

SemanticScreenReader.Default.Announce("This is the announcement text.");

Limitaciones

El lector de pantalla de plataforma predeterminado debe estar habilitado para que el texto se lea en voz alta.

Propiedades de automatización

Las propiedades de Automatización son propiedades adjuntas que se pueden agregar a cualquier elemento para indicar cómo se notifica el elemento al marco de accesibilidad de la plataforma subyacente.

La AutomationProperties clase define las siguientes propiedades adjuntas:

  • ExcludedWithChildren, de tipo bool?, determina si un elemento y sus elementos secundarios deben excluirse del árbol de accesibilidad. Para obtener más información, vea ExcludedWithChildren.
  • IsInAccessibleTree, de tipo bool?, indica si el elemento está disponible en el árbol de accesibilidad. Para obtener más información, vea IsInAccessibleTree.
  • Name, de tipo string, representa una breve descripción del elemento que actúa como identificador hablable para ese elemento. Para obtener más información, vea Propiedad DtsContainer.Name.
  • HelpText, de tipo string, representa una descripción más larga del elemento, que se puede considerar como texto de información sobre herramientas asociado al elemento . Para obtener más información, vea HelpText.
  • LabeledBy, de tipo VisualElement, que permite que otro elemento defina información de accesibilidad para el elemento actual. Para obtener más información, consulte LabeledBy.

Estas propiedades adjuntas establecen valores de accesibilidad de plataforma para que un lector de pantalla pueda hablar sobre el elemento. Para obtener más información sobre las propiedades adjuntas, vea Propiedades adjuntas.

Los diferentes lectores de pantalla leen valores de accesibilidad diferentes. Por lo tanto, al usar propiedades de automatización, se recomienda realizar pruebas exhaustivas de accesibilidad en cada plataforma para garantizar una experiencia óptima.

Importante

Las propiedades de automatización son el enfoque de Xamarin.Forms para proporcionar valores de accesibilidad en las aplicaciones y se han reemplazado por propiedades semánticas. Para obtener más información sobre las propiedades semánticas, vea Propiedades semánticas.

ExcludedWithChildren

La AutomationProperties.ExcludeWithChildren propiedad adjunta, de tipo bool?, determina si un elemento y sus elementos secundarios deben excluirse del árbol de accesibilidad. Esto permite escenarios como mostrar un AbsoluteLayout sobre otro diseño, como , StackLayoutcon el elemento que StackLayout se excluye del árbol de accesibilidad cuando no está visible. Se puede usar desde XAML de la siguiente manera:

<StackLayout AutomationProperties.ExcludedWithChildren="true">
...
</StackLayout>

Como alternativa, puede establecerse en C# de la siguiente manera:

StackLayout stackLayout = new StackLayout();
...
AutomationProperties.SetExcludedWithChildren(stackLayout, true);

Cuando se establece esta propiedad adjunta, .NET MAUI establece la AutomationProperties.IsInAccessibleTree propiedad false adjunta en en el elemento especificado y sus elementos secundarios.

IsInAccessibleTree

Advertencia

Esta propiedad adjunta normalmente debe permanecer sin establecer. La mayoría de los controles deben estar presentes en el árbol de accesibilidad y la AutomationProperties.ExcludedWithChildren propiedad adjunta se puede establecer en escenarios en los que un elemento y sus elementos secundarios necesitan quitarse del árbol de accesibilidad.

La AutomationProperties.IsInAccessibleTree propiedad adjunta, de tipo bool?, determina si el elemento es visible para los lectores de pantalla. Debe establecerse en true para usar las demás propiedades de automatización. Esto se puede lograr en XAML de la siguiente manera:

<Entry AutomationProperties.IsInAccessibleTree="true" />

Como alternativa, puede establecerse en C# de la siguiente manera:

Entry entry = new Entry();
AutomationProperties.SetIsInAccessibleTree(entry, true);

Nombre

Importante

La AutomationProperties.Name propiedad adjunta se ha reemplazado por la SemanticProperties.Description propiedad adjunta.

El valor de la propiedad adjunta AutomationProperties.Name debe ser una cadena de texto corta y descriptiva que usa un lector de pantalla anunciar un elemento. Esta propiedad debe establecerse para los elementos que tengan un significado que sea importante para comprender el contenido o interactuar con la interfaz de usuario. Esto se puede lograr en XAML de la siguiente manera:

<ActivityIndicator AutomationProperties.IsInAccessibleTree="true"
                   AutomationProperties.Name="Progress indicator" />

Como alternativa, puede establecerse en C# de la siguiente manera:

ActivityIndicator activityIndicator = new ActivityIndicator();
AutomationProperties.SetIsInAccessibleTree(activityIndicator, true);
AutomationProperties.SetName(activityIndicator, "Progress indicator");

HelpText

Importante

La AutomationProperties.HelpText propiedad adjunta se ha reemplazado por la SemanticProperties.Hint propiedad adjunta.

La propiedad adjunta de AutomationProperties.HelpText debe establecerse en el texto que describe el elemento de interfaz de usuario y puede ser considerarse el texto de información sobre herramientas asociado al elemento. Esto se puede lograr en XAML de la siguiente manera:

<Button Text="Toggle ActivityIndicator"
        AutomationProperties.IsInAccessibleTree="true"
        AutomationProperties.HelpText="Tap to toggle the activity indicator" />

Como alternativa, puede establecerse en C# de la siguiente manera:

Button button = new Button { Text = "Toggle ActivityIndicator" };
AutomationProperties.SetIsInAccessibleTree(button, true);
AutomationProperties.SetHelpText(button, "Tap to toggle the activity indicator");

En algunas plataformas, para editar controles, como un elemento Entry, la propiedad HelpText a veces puede omitirse y reemplazarse por el texto de marcador de posición. Por ejemplo, "Escriba aquí su nombre" es un buen candidato para la propiedad Entry.Placeholder que coloca el texto en el control antes de la entrada real del usuario.

LabeledBy

Importante

La AutomationProperties.LabeledBy propiedad adjunta se ha reemplazado por enlaces. Para obtener más información, vea SemanticProperties: Description.

La propiedad adjunta AutomationProperties.LabeledBy permite que otro elemento defina la información de accesibilidad para el elemento actual. Por ejemplo, un elemento Label junto a un elemento Entry puede utilizarse para describir lo que representa Entry. Esto se puede lograr en XAML de la siguiente manera:

<Label x:Name="label" Text="Enter your name: " />
<Entry AutomationProperties.IsInAccessibleTree="true"
       AutomationProperties.LabeledBy="{x:Reference label}" />

Como alternativa, puede establecerse en C# de la siguiente manera:

Label label = new Label { Text = "Enter your name: " };
Entry entry = new Entry();
AutomationProperties.SetIsInAccessibleTree(entry, true);
AutomationProperties.SetLabeledBy(entry, label);

Importante

No AutomationProperties.LabeledByProperty se admite en iOS.

Prueba de accesibilidad

Las aplicaciones MAUI de .NET suelen tener como destino varias plataformas, lo que significa probar las características de accesibilidad según la plataforma. Siga estos vínculos para saber más sobre cómo probar la accesibilidad en cada plataforma:

Las siguientes herramientas pueden ayudar con las pruebas de accesibilidad:

Sin embargo, ninguna de estas herramientas puede emular perfectamente la experiencia del usuario del lector de pantalla, y la mejor manera de probar y solucionar problemas de las aplicaciones de accesibilidad siempre estará manualmente en dispositivos físicos con lectores de pantalla.

Habilitación de lectores de pantalla

Cada plataforma tiene un lector de pantalla predeterminado diferente para narrar los valores de accesibilidad:

  • Android tiene TalkBack. Para obtener información sobre cómo habilitar TalkBack, consulte Habilitar TalkBack.
  • iOS y macOS tienen VoiceOver. Para obtener información sobre cómo habilitar VoiceOver, consulte Habilitar VoiceOver.
  • Windows tiene el Narrador. Para obtener información sobre cómo habilitar Narrador, vea Habilitar Narrador.

Habilitar TalkBack

TalkBack es el lector de pantalla principal que se usa en Android. La forma en que está habilitada depende del fabricante del dispositivo, la versión Android y la versión de TalkBack. Sin embargo, TalkBack normalmente se puede habilitar en el dispositivo Android a través de la configuración del dispositivo:

  1. Abra la aplicación Configuración.
  2. Seleccione Accesibilidad>TalkBack.
  3. Active Use TalkBack (Usar TalkBack ).
  4. Seleccione Aceptar.

Nota

Aunque estos pasos se aplican a la mayoría de los dispositivos, es posible que experimente algunas diferencias.

Se abrirá automáticamente un tutorial de TalkBack la primera vez que habilite TalkBack.

Para obtener métodos alternativos de habilitación de TalkBack, consulte Activar o desactivar Talkback.

Habilitación de VoiceOver

VoiceOver es el lector de pantalla principal que se usa en iOS y macOS. En iOS, VoiceOver se puede habilitar de la siguiente manera:

  1. Abra la aplicación Configuración.
  2. Seleccione Accesibilidad>TalkBack.
  3. Active VoiceOver .
  4. Seleccione Aceptar.

Para abrir un tutorial de VoiceOver, seleccione VoiceOver Practice(Práctica de VoiceOver), una vez que VoiceOver esté habilitado.

Para obtener métodos alternativos para habilitar VoiceOver, consulte Activar y practicar VoiceOver en iPhone y Activar y practicar VoiceOver en iPad.

En macOS, VoiceOver se puede habilitar de la siguiente manera:

  1. Abra las preferencias del sistema.
  2. Seleccione Accessibility>VoiceOver.
  3. Seleccione Habilitar VoiceOver.
  4. Seleccione Usar VoiceOver.

Para abrir un tutorial de VoiceOver, seleccione Open VoiceOver Training....

Para obtener métodos alternativos de habilitación de VoiceOver, consulte Activar o desactivar VoiceOver en Mac.

Habilitar Narrador

Narrador es el lector de pantalla principal que se usa en Windows. Narrador se puede habilitar presionando la tecla + de logotipo de WindowsCtrl + Entrar juntos. Estas teclas se pueden presionar de nuevo para detener Narrador.

Para obtener más información sobre Narrador, consulte Guía completa de Narrador.

Lista de comprobación de accesibilidad

Siga estas sugerencias para asegurarse de que las aplicaciones de .NET MAUI son accesibles para el público más amplio posible:

  • Asegúrese de que la aplicación sea percebible, operable, comprensible y sólida para todo siguiendo las Directrices de accesibilidad de contenido web (WCAG). WCAG es el estándar de accesibilidad global y el banco de pruebas legales para web y móviles. Para obtener más información, vea Información general sobre las directrices de accesibilidad de contenido web (WCAG).
  • Asegúrese de que la interfaz de usuario se describe automáticamente. Compruebe que todos los elementos de la interfaz de usuario son accesibles para el lector de pantalla. Agregue texto descriptivo y sugerencias cuando sea necesario.
  • Asegúrese de que las imágenes y los iconos tengan descripciones de texto alternativas.
  • Admite fuentes grandes y contraste alto. Evite las dimensiones de control de codificación de forma dura y, en su lugar, prefiera diseños que cambien el tamaño para adaptarse a tamaños de fuente más grandes. Pruebe las combinaciones de colores en modo de contraste alto para asegurarse de que son legibles.
  • Diseñe el árbol visual teniendo en cuenta la navegación. Use los controles de diseño adecuados para que la navegación entre los controles mediante métodos de entrada alternativos siga el mismo flujo lógico que el uso de la función táctil. Además, excluya elementos innecesarios de los lectores de pantalla (por ejemplo, imágenes decorativas o etiquetas para campos que ya son accesibles).
  • No se base solo en indicaciones de audio o color. Evite situaciones en las que la única indicación del progreso, la finalización o algún otro estado sea un cambio de sonido o color. Diseñe la interfaz de usuario para incluir indicaciones visuales claras, con sonido y color solo para refuerzo o agregue indicadores de accesibilidad específicos. Al elegir colores, intente evitar una paleta difícil de distinguir para los usuarios con daltonismo.
  • Proporcione subtítulos para el contenido de vídeo y un script legible para el contenido de audio. También es útil proporcionar controles que ajusten la velocidad del contenido de audio o vídeo, y asegurarse de que los controles de volumen y transporte sean fáciles de encontrar y usar.
  • Localice las descripciones de accesibilidad cuando la aplicación admita varios idiomas.
  • Pruebe las características de accesibilidad de la aplicación en cada plataforma a la que se dirige. Para obtener más información, consulte Pruebas de accesibilidad.