Crie aplicativos acessíveis com propriedades semânticas

A semântica para acessibilidade se preocupa em criar experiências que tornem seus aplicativos inclusivos para pessoas que usam tecnologia em uma ampla gama de ambientes e abordam sua interface do usuário com uma variedade de necessidades e experiências. Em muitas situações, os requisitos legais de acessibilidade podem fornecer um impulso para que os desenvolvedores resolvam problemas de acessibilidade. Independentemente disso, é aconselhável criar aplicativos inclusivos e acessíveis para que seus aplicativos alcancem o maior público possível.

As Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) são o padrão global de acessibilidade e referência legal para web e dispositivos móveis. Essas diretrizes descrevem as várias maneiras pelas quais os aplicativos podem ser mais perceptíveis, operáveis, compreensíveis e robustos para todos.

Muitas necessidades de acessibilidade do usuário são atendidas por produtos de tecnologia assistiva instalados pelo usuário ou por ferramentas e configurações fornecidas pelo sistema operacional. Isso inclui funcionalidades como leitores de tela, ampliação de tela e configurações de alto contraste.

Os leitores de tela normalmente fornecem descrições auditivas dos controles que são exibidos na tela. Essas descrições ajudam os usuários a navegar pelo aplicativo e fornecem referências a controles, como imagens, que não têm entrada ou texto. Os leitores de ecrã são frequentemente controlados através de gestos no ecrã tátil, trackpad ou teclado. Para obter informações sobre como habilitar leitores de tela, consulte Habilitar leitores de tela.

Os sistemas operacionais têm seus próprios leitores de tela com seu próprio comportamento e configuração exclusivos. Por exemplo, a maioria dos leitores de tela lê o texto associado a um controle quando ele recebe foco, permitindo que os usuários se orientem enquanto navegam pelo aplicativo. No entanto, alguns leitores de tela também podem ler toda a interface do usuário do aplicativo quando uma página é exibida, o que permite que o usuário receba todo o conteúdo informativo disponível da página antes de tentar navegar nela.

A maioria dos leitores de tela lerá automaticamente qualquer texto associado a um controle que receba o foco de acessibilidade. Isso significa que os controles, como Label ou Button, que têm um conjunto de Text propriedades estarão acessíveis para o usuário. No entanto, Image, ImageButton, ActivityIndicator e outros podem não estar na árvore de acessibilidade, pois nenhum texto está associado a eles.

A interface do usuário do aplicativo multiplataforma .NET (.NET MAUI) oferece suporte a duas abordagens para fornecer acesso à experiência de acessibilidade da plataforma subjacente. As propriedades semânticas são a abordagem do .NET MAUI para fornecer valores de acessibilidade em aplicativos e são a abordagem recomendada. As propriedades de automação são a abordagem Xamarin.Forms para fornecer valores de acessibilidade em aplicativos e foram substituídas por propriedades semânticas. Em ambos os casos, a ordem de acessibilidade padrão dos controles é a mesma ordem em que eles são listados em XAML ou adicionados ao layout. No entanto, layouts diferentes podem ter fatores adicionais que influenciam a ordem de acessibilidade. Por exemplo, a ordem de acessibilidade de também é baseada em sua orientação, e a ordem de acessibilidade de é baseada em sua disposição de StackLayoutGrid linha e coluna. Para obter mais informações sobre ordenação de conteúdo, consulte Ordenação significativa de conteúdo no blog do Xamarin.

Propriedades semânticas

As propriedades semânticas são usadas para definir informações sobre quais controles devem receber foco de acessibilidade e qual texto deve ser lido em voz alta para o usuário. As propriedades semânticas são propriedades anexadas que podem ser adicionadas a qualquer elemento para definir as APIs de acessibilidade da plataforma subjacente.

A SemanticProperties classe define as seguintes propriedades anexadas:

• Description, do tipo string, que representa uma descrição que será lida em voz alta pelo leitor de tela. Para obter mais informações, consulte Description.
• Hint, do tipo string, que é semelhante ao Description, mas fornece contexto adicional, como a finalidade de um controle. Para obter mais informações, consulte Dica.
• HeadingLevel, do tipo SemanticHeadingLevel, que permite que um elemento seja marcado como um título para organizar a interface do usuário e facilitar a navegação. Para obter mais informações, consulte Níveis de título.

Essas propriedades anexadas definem valores de acessibilidade da plataforma para que um leitor de tela possa falar sobre o elemento. Para obter mais informações sobre propriedades anexadas, consulte Propriedades anexadas.

Descrição

A Description propriedade anexada representa um curto e descritivo string que um leitor de tela usa para anunciar um elemento. Essa propriedade deve ser definida para elementos que tenham um significado importante para entender o conteúdo ou interagir com a interface do usuário. A configuração dessa propriedade pode ser realizada em XAML:

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

Como alternativa, ele pode ser definido em C#:

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

Além disso, o SetValue método também pode ser usado para definir a Description propriedade anexada:

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

As informações de acessibilidade de um elemento também podem ser definidas em outro elemento. Por exemplo, um Label próximo a um Switch pode ser usado para descrever o que o Switch representa. Isso pode ser feito no XAML da seguinte maneira:

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

Como alternativa, ela pode ser definida em C# da seguinte maneira:

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

Dica

A Hint propriedade anexada representa um que fornece contexto adicional para a propriedade anexada, como a Description finalidade de um string controle. A configuração dessa propriedade pode ser realizada em XAML:

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

Como alternativa, ele pode ser definido em C#:

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

Além disso, o SetValue método também pode ser usado para definir a Hint propriedade anexada:

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

No Android, essa propriedade se comporta de forma ligeiramente diferente dependendo do controle ao qual está anexada. Por exemplo, para controles sem valores de texto, como Switch e CheckBox, os controles exibirão a dica com o controle. No entanto, para controles com valores de texto, a dica não é exibida e é lida após o valor de texto.

Níveis de título

A HeadingLevel propriedade attached permite que um elemento seja marcado como um título para organizar a interface do usuário e facilitar a navegação. Alguns leitores de tela permitem que os usuários pulem rapidamente entre os títulos.

Os títulos têm um nível de 1 a 9, e são representados pela SemanticHeadingLevel enumeração, que define None, e Level1 através de Level9 membros.

O exemplo a seguir demonstra a configuração dessa propriedade anexada:

<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, ele pode ser definido em 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);

Além disso, o SetValue método também pode ser usado para definir a HeadingLevel propriedade anexada:

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

Foco semântico

Os controles têm um método de extensão que força o foco do leitor de tela a um SetSemanticFocus elemento especificado. Por exemplo, dado um nome , o foco do leitor de tela pode ser forçado ao elemento com o Labellabelseguinte código:

label.SetSemanticFocus();

Leitor de tela semântico

O .NET MAUI fornece a interface, com a qual você pode instruir um leitor de tela a ISemanticScreenReader anunciar texto ao usuário. A interface é exposta por meio da Default propriedade e está disponível no Microsoft.Maui.Accessibility namespace.

Para instruir um leitor de tela a anunciar texto, use o método, passando um string argumento que representa o Announce texto. O exemplo a seguir demonstra o uso desse método:

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

Limitações

O leitor de tela da plataforma padrão deve estar habilitado para que o texto seja lido em voz alta.

Propriedades de automação

As propriedades de automação são propriedades anexadas que podem ser adicionadas a qualquer elemento para indicar como o elemento é relatado à estrutura de acessibilidade da plataforma subjacente.

A AutomationProperties classe define as seguintes propriedades anexadas:

• ExcludedWithChildren, do tipo bool?, determina se um elemento e seus filhos devem ser excluídos da árvore de acessibilidade. Para obter mais informações, consulte ExcludedWithChildren.
• IsInAccessibleTree, do tipo bool?, indica se o elemento está disponível na árvore de acessibilidade. Para obter mais informações, consulte IsInAccessibleTree.
• Name, do tipo string, representa uma breve descrição do elemento que serve como um identificador falável para esse elemento. Para obter mais informações, consulte Name.
• HelpText, do tipo string, representa uma descrição mais longa do elemento, que pode ser considerada como texto de dica de ferramenta associado ao elemento. Para obter mais informações, consulte HelpText.
• LabeledBy, do tipo VisualElement, que permite que outro elemento defina informações de acessibilidade para o elemento atual. Para obter mais informações, consulte LabeledBy.

Essas propriedades anexadas definem valores de acessibilidade da plataforma para que um leitor de tela possa falar sobre o elemento. Para obter mais informações sobre propriedades anexadas, consulte Propriedades anexadas.

Diferentes leitores de tela leem diferentes valores de acessibilidade. Portanto, ao usar propriedades de automação, é recomendável que testes de acessibilidade completos sejam realizados em cada plataforma para garantir uma experiência ideal.

ExcluídoComCrianças

A ExcludedWithChildren propriedade anexada, do tipo bool?, determina se um elemento e seus filhos devem ser excluídos da árvore de acessibilidade. Isso permite cenários como a exibição de um layout sobre outro, como um AbsoluteLayoutStackLayout, com a StackLayout exclusão da árvore de acessibilidade quando ela não estiver visível. Ele pode ser usado a partir de XAML da seguinte maneira:

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

Como alternativa, ela pode ser definida em C# da seguinte maneira:

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

Quando essa propriedade anexada é definida, o .NET MAUI define a propriedade anexada IsInAccessibleTree como false no elemento especificado e seus filhos.

IsInAccessibleTree

A IsInAccessibleTree propriedade anexada, do tipo bool?, determina se o elemento está visível para os leitores de tela. Ele deve ser definido para true usar as outras propriedades de automação. Isso pode ser feito no XAML da seguinte maneira:

<Entry AutomationProperties.IsInAccessibleTree="true" />

Como alternativa, ela pode ser definida em C# da seguinte maneira:

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

Nome

O valor da propriedade anexada Name deve ser uma cadeia de caracteres de texto curta e descritiva que usa de um leitor de tela para anunciar um elemento. Essa propriedade deve ser definida para elementos cujo significado é importante para entender o conteúdo ou para interagir com a interface do usuário. Isso pode ser feito no XAML da seguinte maneira:

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

Como alternativa, ela pode ser definida em C# da seguinte maneira:

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

HelpText

A propriedade anexada HelpText deve ser definida como o texto que descreve o elemento da interface do usuário e pode ser considerada como um texto de dica de ferramenta associado ao elemento. Isso pode ser feito no XAML da seguinte maneira:

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

Como alternativa, ela pode ser definida em C# da seguinte maneira:

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

Em algumas plataformas, para controles de edição como um Entry, a propriedade HelpText às vezes pode ser omitida e substituída por um texto de espaço reservado. Por exemplo, "Digite seu nome aqui" é um bom candidato para a propriedade Entry.Placeholder, que coloca o texto no controle antes da entrada feita pelo usuário.

LabeledBy

A propriedade anexada LabeledBy permite que outro elemento defina informações de acessibilidade sobre o elemento atual. Por exemplo, um Label próximo a um Entry pode ser usado para descrever o que o Entry representa. Isso pode ser feito no XAML da seguinte maneira:

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

Como alternativa, ela pode ser definida em C# da seguinte maneira:

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

Testando a acessibilidade

Os aplicativos .NET MAUI geralmente visam várias plataformas, o que significa testar os recursos de acessibilidade de acordo com a plataforma. Siga estes links para saber como testar a acessibilidade em cada plataforma:

• Teste a acessibilidade do seu aplicativo no Android.
• Verificando a acessibilidade do aplicativo no iOS.
• Testes de acessibilidade no OS X
• Teste de acessibilidade no Windows.

As ferramentas a seguir podem ajudar no teste de acessibilidade:

• Insights de acessibilidade para aplicativos Android e Windows.
• Scanner de acessibilidade para aplicativos Android.
• Inspetor de acessibilidade para aplicativos iOS e macOS.
• Android Studio Layout Inspector para aplicativos Android.
• Depurador Xcode View para aplicativos iOS e macOS.

No entanto, nenhuma dessas ferramentas pode emular perfeitamente a experiência do usuário do leitor de tela, e a melhor maneira de testar e solucionar problemas de acessibilidade de seus aplicativos sempre será manualmente em dispositivos físicos com leitores de tela.

Ativando leitores de tela

Cada plataforma tem um leitor de tela padrão diferente para narrar valores de acessibilidade:

• O Android tem o TalkBack. Para obter informações sobre como habilitar o TalkBack, consulte Habilitar o TalkBack.
• iOS e macOS têm VoiceOver. Para obter informações sobre como ativar o VoiceOver, consulte Ativar o VoiceOver.
• O Windows tem o Narrador. Para obter informações sobre como habilitar o Narrador, consulte Habilitar o Narrador.

Ativar o TalkBack

TalkBack é o leitor de tela primário usado no Android. A forma como ele está ativado depende do fabricante do dispositivo, da versão do Android e da versão do TalkBack. No entanto, o TalkBack normalmente pode ser ativado no seu dispositivo Android através das configurações do dispositivo:

1. Abra o aplicativo Configurações .
2. Selecione Acessibilidade>TalkBack.
3. Ative Usar o TalkBack .
4. Selecione OK.

Um tutorial do TalkBack é aberto automaticamente na primeira vez que você ativa o TalkBack.

Para obter métodos alternativos para ativar o TalkBack, consulte Ativar ou desativar o Talkback.

Ativar o VoiceOver

O VoiceOver é o principal leitor de tela usado no iOS e macOS. No iOS, o VoiceOver pode ser ativado da seguinte forma:

1. Abra o aplicativo Configurações .
2. Selecione Acessibilidade>VoiceOver.
3. Ative o VoiceOver .

Um tutorial do VoiceOver pode ser aberto selecionando Prática do VoiceOver, assim que o VoiceOver estiver ativado.

Para obter métodos alternativos para ativar o VoiceOver, consulte Ativar e praticar o VoiceOver no iPhone e Ativar e praticar o VoiceOver no iPad.

No macOS, o VoiceOver pode ser ativado da seguinte forma:

1. Abra as Preferências do Sistema.
2. Selecione Acessibilidade>VoiceOver.
3. Selecione Ativar o VoiceOver.
4. Selecione Usar o VoiceOver.

Um tutorial do VoiceOver pode ser aberto selecionando Abrir treinamento do VoiceOver....

Para obter métodos alternativos para ativar o VoiceOver, consulte Ativar ou desativar o VoiceOver no Mac.

Ativar o Narrador

O Narrator é o principal leitor de tela usado no Windows. O Narrador pode ser ativado pressionando a tecla + do logotipo do Windows Ctrl + Enter juntos. Essas teclas podem ser pressionadas novamente para parar o Narrador.

Para obter mais informações sobre o Narrador, consulte Guia completo do Narrador.

Lista de verificação de acessibilidade

Siga estas dicas para garantir que seus aplicativos .NET MAUI estejam acessíveis ao maior público possível: