Compartir a través de

Creación de aplicaciones accesibles con propiedades semánticas

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 de 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 punto de referencia legal para web y móvil. Estas directrices describen las distintas formas en que las aplicaciones se pueden hacer más percebibles, operables, comprensibles y sólidas para todos.

Muchas necesidades de accesibilidad de usuario se cumplen mediante productos tecnológicos de asistencia instalados por el usuario o por herramientas y configuraciones proporcionadas por el sistema operativo. Esto incluye funcionalidades 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 o texto. Los lectores de pantalla a menudo se controlan a través de 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 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. Sin embargo, es posible que Image, ImageButton, ActivityIndicatory otros no estén 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, los 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 un WebView muestra un sitio web al que se puede acceder, también será accesible en una aplicación de .NET MAUI. Por el contrario, cuando WebView muestra un sitio web que no es accesible, tampoco 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 Descripción.
  • 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, consulte Sugerencia.
  • HeadingLevel, de tipo SemanticHeadingLevel, que permite que un elemento se marque como encabezado para organizar la interfaz de usuario y facilitar la navegación. Para obtener más información, consulta Niveles de encabezado.

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 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 que es importante para comprender el contenido o interactuar con la interfaz de usuario. Establecer esta propiedad se puede realizar 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 Description propiedad adjunta:

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

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

<Label x:Name="label"
       Text="Enable dark mode: " />
<Switch SemanticProperties.Description="{Binding x:DataType='Label', Source={x:Reference label}, Path=Text}" />

Como alternativa, se puede establecer en C# como se indica a continuación:

Label label = new Label
{
    Text = "Enable dark mode: "
};
Switch mySwitch = new Switch();
SemanticProperties.SetDescription(mySwitch, label.Text);

Advertencia

  • Evita establecer la propiedad adjunta Description en Label. Esto detendrá la propiedad Text 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.
  • Evite establecer la propiedad adjunta Description en un Entry o un Editor en Android. Al hacerlo, se detendrá el funcionamiento de las acciones de Talkback. En su lugar, use la propiedad Placeholder o la propiedad adjunta Hint.
  • En iOS, si establece la propiedad Description en cualquier control que tenga hijos, el lector de pantalla no podrá acceder a los hijos. Esto se debe a que iOS no proporciona características de accesibilidad que permiten la navegación desde un elemento primario a un elemento secundario.

Sugerencia

La Hint propiedad adjunta representa un string que proporciona contexto adicional a la Description propiedad adjunta, como el propósito de un control. Establecer esta propiedad se puede realizar 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 Hint propiedad adjunta:

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

En Android, esta propiedad se comporta ligeramente de forma 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

Las propiedades Hint y Entry.Placeholder entran en conflicto en Android porque ambas se asignan a la misma propiedad de plataforma. Por lo tanto, no se recomienda establecer un valor diferente Hint del valor Entry.Placeholder.

Niveles de encabezado

La HeadingLevel propiedad adjunta permite marcar un elemento como 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 enumeración SemanticHeadingLevel, que define None, y Level1 a través de miembros Level9.

Importante

Aunque Windows ofrece 9 niveles de encabezados, Android e iOS solo ofrecen un único encabezado. Por lo tanto, cuando HeadingLevel se configura en Windows, se asigna al nivel de encabezado correcto. Pero cuando se establece en Android e 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.Level2);
SemanticProperties.SetHeadingLevel(label5, SemanticHeadingLevel.Level3);
SemanticProperties.SetHeadingLevel(label7, SemanticHeadingLevel.Level4);

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

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

Enfoque semántico

Los controles tienen un SetSemanticFocus método de extensión que fuerza el foco del lector de pantalla a un elemento especificado. Por ejemplo, dado un Label denominado label, el foco del lector de pantalla puede ser forzado al elemento con el código siguiente:

label.SetSemanticFocus();

Lector de pantalla semántico

.NET MAUI proporciona la interfaz ISemanticScreenReader, con la que puede indicar a un lector de pantalla que anuncie texto al usuario. La interfaz se expone a través de la Default propiedad y está disponible en el Microsoft.Maui.Accessibility 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, consulte IsInAccessibleTree.
  • Name, de tipo string, representa una breve descripción del elemento que actúa como identificador pronunciable 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 y se puede considerar como el texto de información sobre herramientas asociado al elemento. Para obtener más información, vea HelpText.
  • LabeledBy, de tipo VisualElement, que permite a otro elemento definir 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 las propiedades de automatización, se recomienda realizar pruebas de accesibilidad exhaustivas 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 ExcludedWithChildren 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 un StackLayout, con el StackLayout excluido del árbol de accesibilidad cuando no está visible. Se puede usar desde XAML de la siguiente manera:

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

Como alternativa, se puede establecer en C# como se indica a continuación:

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

Cuando se establece esta propiedad adjunta, .NET MAUI aplica la propiedad adjunta IsInAccessibleTree a false 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 hijos necesitan ser eliminados del árbol de accesibilidad.

La 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, se puede establecer en C# como se indica a continuación:

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

Advertencia

En iOS, si la propiedad IsInAccessibleTree es true en cualquier control que tenga elementos secundarios, el lector de pantalla no podrá acceder a los elementos secundarios. Esto se debe a que iOS no proporciona características de accesibilidad que permiten la navegación desde un elemento primario a un elemento secundario.

Nombre

Importante

La propiedad adjunta Name ha pasado a estar en desuso en .NET 8. En su lugar, use la propiedad adjunta Description.

El Name valor de la propiedad adjunta debe ser una cadena de texto breve y descriptiva que un lector de pantalla usa para anunciar un elemento. Esta propiedad debe establecerse para los elementos que tienen un significado que es 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, se puede establecer en C# como se indica a continuación:

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

HelpText

Importante

La HelpText propiedad adjunta ha quedado obsoleta en .NET 8. En su lugar, usa la propiedad adjunta Hint.

La propiedad adjunta HelpText debe establecerse en un texto que describa el elemento de la interfaz de usuario y puede considerarse como texto de ayuda 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, se puede establecer en C# como se indica a continuación:

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 su nombre aquí" es un buen candidato para la Entry.Placeholder propiedad que coloca el texto en el control antes de la entrada real del usuario.

EtiquetadoPor

Importante

La propiedad adjunta LabeledBy ha pasado a estar en desuso en .NET 8. En su lugar, usa un enlace SemanticProperties.Description. Para obtener más información, vea SemanticProperties: Description.

La LabeledBy propiedad adjunta permite que otro elemento defina información de accesibilidad para el elemento actual. Por ejemplo, se puede usar un Label junto a un Entry para describir lo que representa el 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, se puede establecer en C# como se indica a continuación:

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

Importante

AutomationProperties.LabeledByProperty No 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 aprender a 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 para la 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:

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 de 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 de configuración .
  2. Seleccione Accesibilidad>TalkBack.
  3. Activa TalkBack.
  4. Selecciona Aceptar.

Nota:

Aunque estos pasos se aplican a la mayoría de los dispositivos, puede experimentar algunas diferencias.

Un tutorial de TalkBack se abre automáticamente la primera vez que habilita TalkBack.

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

Habilitar 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 de configuración .
  2. Seleccione Accessibility>VoiceOver.
  3. Enciende VoiceOver.

Se puede abrir un tutorial de VoiceOver seleccionando VoiceOver Practice, una vez habilitado VoiceOver.

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 preferencias del sistema.
  2. Seleccione Accessibility>VoiceOver.
  3. Seleccione Activar 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

El Narrador de Windows es el lector de pantalla principal que se utiliza en este sistema operativo. El Narrador se puede habilitar presionando la tecla del logotipo de Windows + Ctrl + Entrar al mismo tiempo. Presione estas teclas de nuevo para detener narrador.

Para obtener más información sobre narrador, vea Guía completa del narrador.

Lista de comprobación de accesibilidad

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

  • Asegúrese de que la aplicación sea visible, operable, comprensible y sólida para todos 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 Web Content Accessibility Guidelines (WCAG) Overview (Guías de accesibilidad de contenido web [WCAG]).
  • Asegúrese de que la interfaz de usuario sea autodescripta. Pruebe 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 dura y, en su lugar, prefiera diseños que cambien el tamaño para adaptarse a tamaños de fuente más grandes. Pruebe 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 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 resulta útil proporcionar controles que ajusten la velocidad del contenido de audio o vídeo y garantizan 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 Probar accesibilidad.