Crie aplicativos acessíveis com propriedades semânticas

  • Artigo

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.

Observação

Quando um exibe um site que é acessível, ele também estará acessível em um WebView aplicativo .NET MAUI. Por outro lado, quando um exibe um site que não está acessível, ele não estará acessível em um WebView aplicativo .NET MAUI.

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.

Importante

As propriedades semânticas não tentam forçar um comportamento equivalente em cada plataforma. Em vez disso, eles contam com a experiência de acessibilidade fornecida por cada plataforma.

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);

Aviso

  • Evite definir a propriedade anexada Description em um Labelarquivo . Isso impedirá que a Text propriedade seja falada pelo leitor de tela. Isso ocorre porque o texto visual deve corresponder idealmente ao texto lido em voz alta pelo leitor de tela.
  • Evite definir a propriedade anexada Description em um Entry ou Editor no Android. Isso interromperá o funcionamento das ações de Talkback. Em vez disso, use a propriedade ou a Placeholder propriedade anexada Hint .
  • No iOS, se você definir a Description propriedade em qualquer controle que tenha filhos, o leitor de tela não conseguirá alcançar as crianças. Isso ocorre porque o iOS não fornece recursos de acessibilidade que permitem a navegação de um elemento pai para um elemento filho.

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.

Aviso

A Hint propriedade entra em conflito com a propriedade no Android, que ambos mapeiam para a Entry.Placeholder mesma propriedade de plataforma. Portanto, definir um valor diferente Hint para o Entry.Placeholder valor não é recomendado.

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.

Importante

Enquanto o Windows oferece 9 níveis de títulos, Android e iOS oferecem apenas um único título. Portanto, quando HeadingLevel é definido no Windows, ele mapeia para o nível de título correto. No entanto, quando definido no Android e iOS, ele é mapeado para um único nível de título.

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.

Importante

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. Para obter mais informações sobre propriedades semânticas, consulte Propriedades semânticas.

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

Aviso

Essa propriedade anexada normalmente deve permanecer indefinida. A maioria dos controles deve estar presente na árvore de acessibilidade, e a propriedade anexada AutomationProperties.ExcludedWithChildren pode ser definida em cenários em que um elemento e seus filhos precisam ser removidos da árvore de acessibilidade.

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);

Aviso

No iOS, se a IsInAccessibleTree propriedade estiver true em qualquer controle que tenha crianças, o leitor de tela não conseguirá alcançar as crianças. Isso ocorre porque o iOS não fornece recursos de acessibilidade que permitem a navegação de um elemento pai para um elemento filho.

Nome

Importante

A Name propriedade anexada foi preterida no .NET 8. Em vez disso, use a Description propriedade anexada.

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

Importante

A HelpText propriedade anexada foi preterida no .NET 8. Em vez disso, use a Hint propriedade anexada.

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

Importante

A LabeledBy propriedade anexada foi preterida no .NET 8. Em vez disso, use uma SemanticProperties.Description associação. Para obter mais informações, consulte SemanticProperties: Description.

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);

Importante

O não é suportado AutomationProperties.LabeledByProperty no iOS.

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:

As ferramentas a seguir podem ajudar no teste de acessibilidade:

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.

Observação

Embora essas etapas se apliquem à maioria dos dispositivos, você pode enfrentar algumas diferenças.

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:

  • Certifique-se de que seu aplicativo seja perceptível, operável, compreensível e robusto para todos, seguindo as Diretrizes de Acessibilidade de Conteúdo da Web (WCAG). WCAG é o padrão global de acessibilidade e referência legal para web e dispositivos móveis. Para obter mais informações, consulte Visão geral das diretrizes de acessibilidade de conteúdo da Web (WCAG).
  • Verifique se a interface do usuário é autodescritiva. Teste se todos os elementos da interface do usuário estão acessíveis ao leitor de tela. Adicione texto descritivo e dicas quando necessário.
  • Certifique-se de que as imagens e os ícones tenham descrições de texto alternativas.
  • Suporte fontes grandes e alto contraste. Evite dimensões de controle de codificação e, em vez disso, prefira layouts que redimensionam para acomodar tamanhos de fonte maiores. Teste esquemas de cores no modo de alto contraste para garantir que sejam legíveis.
  • Projete a árvore visual com a navegação em mente. Use controles de layout apropriados para que a navegação entre controles usando métodos de entrada alternativos siga o mesmo fluxo lógico que usando o toque. Além disso, exclua elementos desnecessários dos leitores de tela (por exemplo, imagens decorativas ou rótulos para campos que já estão acessíveis).
  • Não confie apenas em sinais de áudio ou cores. Evite situações em que a única indicação de progresso, conclusão ou algum outro estado seja uma mudança de som ou cor. Projete a interface do usuário para incluir pistas visuais claras, com som e cor apenas para reforço, ou adicione indicadores de acessibilidade específicos. Ao escolher cores, tente evitar uma paleta difícil de distinguir para usuários com daltonismo.
  • Forneça legendas para conteúdo de vídeo e um script legível para conteúdo de áudio. Também é útil fornecer controles que ajustem a velocidade do conteúdo de áudio ou vídeo e garantam que os controles de volume e transporte sejam fáceis de encontrar e usar.
  • Localize suas descrições de acessibilidade quando o aplicativo oferecer suporte a vários idiomas.
  • Teste os recursos de acessibilidade do seu aplicativo em cada plataforma direcionada. Para obter mais informações, consulte Testando a acessibilidade.