Compartir a través de

Creación de aplicaciones accesibles con propiedades semánticas

  • Artículo

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 solucionen 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 Pautas de Accesibilidad para el Contenido Web (WCAG) son el estándar de accesibilidad global y el punto de referencia legal para web y móvil. Estas pautas 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. Estos descriptores ayudan a los usuarios a desplazarse por la aplicación y proporcionan referencia para controles, como las imágenes, que no tienen entrada ni texto escrito. Los lectores de pantalla a menudo se controlan mediante gestos en una pantalla táctil, un trackpad o un teclado. Para obtener información sobre cómo habilitar los lectores de pantalla, consulta 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 con un control cuando queda focalizado, permitiendo a los usuarios orientarse a medida que se mueven entre los controles en la aplicación. Algunos lectores de pantalla leen también pueden leer la interfaz de usuario de la aplicación completa cuando aparece una página, lo cual permite que el usuario reciba todo de 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 controles como Label o Button que tienen la propiedad Text establecida 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.

.NET Multi-platform App UI (.NET MAUI) admite dos enfoques para proporcionar acceso a la experiencia de accesibilidad de la plataforma subyacente. Las propiedades ssemánticas son el enfoque de .NET MAUI para proporcionar valores de accesibilidad en las aplicaciones y son el enfoque recomendado. Las propiedades de automatizaió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 en el que se enumeran en el código 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, consulta Meaningful Content Ordering 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 .NET MAUI. Por el contrario, cuando WebView muestra un sitio web que no es accesible, no será accesible en una aplicación .NET MAUI.

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 clase SemanticProperties define las propiedades adjuntas siguientes:

  • 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 más información, consulta Sugerencias.
  • 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 título.

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

Descripción

La propiedad adjunta Description representa un string corto y descriptivo que usa un lector de pantalla para 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. 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, puede establecerse en C#:

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

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

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, un elemento Label junto a un elemento Switch puede utilizarse para describir lo que representa Switch. Esto se puede lograr en XAML de la siguiente manera:

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

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

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 lee 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.
  • Evita establecer la propiedad adjunta Description en Entry o Editor en Android. Al hacerlo, se detendrá el funcionamiento de las acciones de Talkback. Use la propiedad Placeholder o la propiedad adjunta Hint en su lugar.
  • En iOS, si estableces la propiedad Description 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.

Sugerencia

La propiedad adjunta Hint representa un string que proporciona contexto adicional a la propiedad adjunta Description, 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, puede establecerse en C#:

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

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

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á adjunta. 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 propiedad Hint entra en conflicto con la propiedad Entry.Placeholder en Android, que ambas se asignan a la misma propiedad de plataforma. Por lo tanto, no se recomienda establecer un valor Hint diferente en el valor Entry.Placeholder.

Niveles de título

La propiedad adjunta HeadingLevel permite marcar un elemento como título para organizar la interfaz de usuario y facilitar la navegación. Algunos lectores de pantalla permiten a los usuarios saltar rápidamente entre títulos.

Los títulos tienen un nivel de 1 a 9 y se representan mediante la enumeración SemanticHeadingLevel, que define None, y Level1 a través de los miembros Level9.

Importante

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

El siguiente ejemplo demuestra 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, puede establecerse 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 método SetValue también se puede usar para establecer la propiedad adjunta HeadingLevel:

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

Enfoque semántico

Los controles tienen un método de extensión SetSemanticFocus 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 se puede forzar al elemento con el código siguiente:

label.SetSemanticFocus();

Lector de pantalla semántico

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

Para indicar a un lector de pantalla que anuncie texto, usa el método Announce y pasa un argumento string que represente el texto. En el siguiente ejemplo se muestra 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 clase AutomationProperties define las propiedades adjuntas siguientes:

  • ExcludedWithChildren, de tipo bool?, determina si un elemento y sus elementos secundarios deben excluirse del árbol de accesibilidad. Para obtener más información, consulta ExcludedWithChildren.
  • IsInAccessibleTree, de tipo bool?, indica si el elemento está disponible en el árbol de accesibilidad. Para obtener más información, consulta IsInAccessibleTree.
  • Name, de tipo string, representa una breve descripción del elemento que actúa como un identificador con capacidad de lectura 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 más información, consulta HelpText .
  • LabeledBy, de tipo VisualElement, que permite que otro elemento defina la información de accesibilidad para el elemento actual. Para obtener más información, consulta LabeledBy.

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

Los diferentes lectores de pantalla leen valores de accesibilidad distintos. Por lo tanto, cuando se usan propiedades de automatización se recomienda llevar a cabo 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 han sido reemplazados por propiedades semánticas. Para obtener más información sobre las propiedades, consulta Propiedades semánticas.

ExcludedWithChildren

La propiedad adjunta ExcludedWithChildren, 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 StackLayout con StackLayout que se excluye del árbol de accesibilidad cuando no está visible. Se puede usar desde XAML del modo indicado a continuación:

<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 propiedad adjunta IsInAccessibleTree propiedad en 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 propiedad adjunta AutomationProperties.ExcludedWithChildren se puede establecer en escenarios en los que se necesita quitar un elemento y sus elementos secundarios del árbol de accesibilidad.

La propiedad adjunta IsInAccessibleTree, 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);

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, usa la propiedad adjunta Description.

El valor de la propiedad adjunta 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 propiedad adjunta HelpText ha pasado a estar en desuso en .NET 8. En su lugar, usa la propiedad adjunta Hint.

La propiedad adjunta de 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 propiedad adjunta LabeledBy ha pasado a estar en desuso en .NET 8. En su lugar, usa un enlace SemanticProperties.Description. Para más información, consulta SemanticProperties: Description.

La propiedad adjunta 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

Todavía no se admite AutomationProperties.LabeledByProperty en iOS.

Pruebas de accesibilidad

Las aplicaciones .NET MAUI normalmente van dirigidas a varias plataformas, lo que significa que las pruebas de las características de accesibilidad se realizan 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:

Pero 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 diferente para leer los valores de accesibilidad:

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

Nota:

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

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

Para obtener métodos alternativos de habilitación de TalkBack, consulta 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 de configuración .
  2. Selecciona Accesibilidad>VoiceOver.
  3. Activa VoiceOver.

Para abrir un tutorial de VoiceOver selecciona Práctica de VoiceOver, una vez habilitado VoiceOver.

Para obtener métodos alternativos de habilitación de VoiceOver, consulta Activar y practicar gestos en VoiceOver en el iPhone y Activar y practicar gestos en VoiceOver en el iPad.

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

  1. Abre el nodo Preferencias del sistema.
  2. Selecciona Accesibilidad>VoiceOver.
  3. Selecciona Habilitar VoiceOver.
  4. Selecciona Usar VoiceOver.

Para abrir un tutorial de VoiceOver, selecciona Abrir entrenamiento de VoiceOver....

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

Habilitación del Narrador

Narrador es el lector de pantalla principal que se usa en Windows. El Narrador se puede habilitar pulsando la tecla de logotipo de Windows + Ctrl + Entrar conjuntamente. Puedes volver a pulsar estas teclas para detenerlo.

Para obtener más información sobre el Narrador, consulta la Guía completa del Narrador.

Lista de comprobación de accesibilidad

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

  • Asegúrate de que la aplicación sea perceptible, operable, comprensible y sólida para todos siguiendo las Directrices de accesibilidad a contenido web (WCAG). WCAG es el estándar de accesibilidad global y el punto de referencia legal para web y dispositivos móviles. Para más información, consulta Introducción a las Pautas de accesibilidad para el Contenido Web (WCAG).
  • Asegúrate de que la interfaz de usuario sea autodescriptiva. Prueba que todos los elementos de la interfaz de usuario sean accesibles para el lector de pantalla. Agrega texto descriptivo y sugerencias cuando sea necesario.
  • Asegúrate de que las imágenes y los iconos tengan descripciones de texto alternativas.
  • Compatible con fuentes grandes y contraste alto. Evita la codificación rígida de las dimensiones de los controles y, en su lugar, da preferencia a diseños que cambien de tamaño para adaptarse a tamaños de fuente más grandes. Prueba combinaciones de colores en modo de contraste alto para asegurarte de que son legibles.
  • Diseña el árbol visual teniendo en cuenta la navegación. Usa los controles de diseño adecuados para que la navegación entre controles con métodos de entrada alternativos siga el mismo flujo lógico que el uso de la función táctil. Además, excluye elementos innecesarios de los lectores de pantalla (por ejemplo, imágenes decorativas o etiquetas para campos que ya son accesibles).
  • No confíes solo en las indicaciones de audio o color. Evita 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ña la interfaz de usuario para incluir indicaciones visuales claras, con sonido y color solo para refuerzo, o agrega indicadores de accesibilidad específicos. Al elegir colores, intenta evitar una paleta difícil de distinguir para las personas con daltonismo.
  • Proporciona 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.
  • Localiza las descripciones de accesibilidad cuando la aplicación admite varios idiomas.
  • Prueba las características de accesibilidad de la aplicación en cada una de las plataformas de destino. Para más información, consulta Pruebas de accesibilidad.