Compartilhar via

Criar aplicativos acessíveis com propriedades semânticas

A semântica para acessibilidade está preocupada com a criação de experiências que tornam seus aplicativos inclusivos para pessoas que usam a tecnologia em uma ampla variedade 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 os desenvolvedores resolverem problemas de acessibilidade. Independentemente disso, é aconselhável criar aplicativos inclusivos e acessíveis para que seus aplicativos atinjam o maior público possível.

As Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) são o padrão de acessibilidade global e o parâmetro de comparação legal para web e móvel. Essas diretrizes descrevem as várias maneiras pelas quais os aplicativos podem se tornar mais percebíveis, operáveis, compreensíveis e robustos, para todos.

Muitas necessidades de acessibilidade do usuário são atendidas por produtos de tecnologia adaptativa 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 de controles exibidos na tela. Essas descrições ajudam os usuários a navegar pelo aplicativo e fornecer referências a controles, como imagens, que não têm entrada ou texto. Os leitores de tela geralmente são controlados por meio de gestos na tela sensível ao toque, 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 navegá-la.

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 Text conjunto de propriedades estarão acessíveis para o usuário. No entanto, Image, ImageButton e ActivityIndicator, entre outros, podem não estar na árvore de acessibilidade porque nenhum texto está associado a eles.

A Interface do Usuário de Aplicativo Multiplataforma do .NET (.NET MAUI) suporta duas abordagens para fornecer acesso à experiência de acessibilidade da plataforma subjacente. As propriedades semânticas são a abordagem MAUI do .NET para fornecer valores de acessibilidade em aplicativos e são a abordagem recomendada. As propriedades de automação são a abordagem do 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 StackLayout também se baseia em sua orientação, e a ordem de acessibilidade de Grid é baseada em sua disposição de linha e coluna. Para obter mais informações sobre a ordenação de conteúdo, consulte Ordenação significativa de conteúdo no blog do Xamarin.

Observação

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

Propriedades semânticas

Propriedades semânticas são usadas para definir informações sobre quais controles devem receber o 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 o comportamento equivalente em cada plataforma. Em vez disso, eles dependem da 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 Descrição.
  • Hint, do tipo string, que é semelhante a Description, mas fornece contexto adicional, como a finalidade de um controle. Para saber mais, 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 propriedade anexada Description representa uma cadeia de caracteres de texto curta e descritiva que string um leitor de tela usa para anunciar um elemento. Essa propriedade deve ser definida para elementos que têm um significado importante para entender o conteúdo ou interagir com a interface do usuário. A definiçã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 representa Switch . Isso pode ser feito no XAML da seguinte maneira:

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

Como alternativa, ele pode ser definido 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 Description associada em um Label. Isso impedirá que a propriedade Text 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 Description propriedade anexada num Entry ou Editor no Android. Isso interromperá o funcionamento das ações do Talkback. Em vez disso, use a propriedade Placeholder ou a propriedade anexada Hint.
  • No iOS, se você definir a propriedade Description em qualquer controle que tenha filhos, o leitor de tela não poderá alcançar os filhos. Isso ocorre porque o iOS não fornece recursos de acessibilidade que permitem a navegação de um elemento pai em um elemento filho.

Dica

A Hint propriedade anexada representa um string que fornece contexto adicional para a Description propriedade anexada, como a finalidade de um controle. A definiçã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 um pouco 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 do texto.

Aviso

A propriedade Hint entra em conflito com a propriedade Entry.Placeholder no Android, pois ambas mapeiam para a mesma propriedade de plataforma. Portanto, não é recomendável definir um valor diferente Hint para o Entry.Placeholder valor.

Níveis de título

A HeadingLevel propriedade anexada 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 títulos.

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

Importante

Embora o Windows ofereça 9 níveis de títulos, o Android e o 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, em dispositivos Android e iOS, isso é mapeado para um único nível de título.

O exemplo a seguir demonstra como definir essa 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.Level2);
SemanticProperties.SetHeadingLevel(label5, SemanticHeadingLevel.Level3);
SemanticProperties.SetHeadingLevel(label7, SemanticHeadingLevel.Level4);

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 SetSemanticFocus método de extensão que força o foco do leitor de tela a um elemento especificado. Por exemplo, dado um Label chamado label, o foco do leitor de tela pode ser forçado para o elemento com o seguinte código:

label.SetSemanticFocus();

Leitor de tela semântico

.NET MAUI fornece a interface ISemanticScreenReader, com a qual você pode instruir um leitor de tela a anunciar o 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 o texto, use o Announce método, passando um string argumento que representa o texto. O exemplo a seguir demonstra o uso deste 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 funciona como um identificador pronunciá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 um 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.

Leitores de tela diferentes leem valores de acessibilidade diferentes. Portanto, ao usar propriedades de automação, é recomendável que o teste de acessibilidade completo seja realizado em cada plataforma para garantir uma experiência ideal.

Importante

As propriedades de automação são a abordagem do 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.

ExcludedWithChildren

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 AbsoluteLayout sobre outro layout, como um StackLayout, com StackLayout sendo excluído da árvore de acessibilidade quando não estiver visível. Ele pode ser usado do XAML da seguinte maneira:

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

Como alternativa, ele pode ser definido em C# da seguinte maneira:

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

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

IsInAccessibleTree

Aviso

Essa propriedade anexada normalmente deve permanecer não definida. 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 leitores de tela. Ele deve ser definido como true para que possa usar as outras propriedades de automação. Isso pode ser feito no XAML da seguinte maneira:

<Entry AutomationProperties.IsInAccessibleTree="true" />

Como alternativa, ele pode ser definido em C# da seguinte maneira:

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

Aviso

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

Nome

Importante

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

O Name valor da propriedade anexada deve ser uma cadeia de caracteres de texto curta e descritiva que um leitor de tela usa para anunciar um elemento. Essa propriedade deve ser definida para elementos que têm um significado importante para entender o conteúdo ou 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, ele pode ser definido em C# da seguinte maneira:

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

Texto de Ajuda

Importante

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

a HelpText propriedade anexada deve ser definida como texto que descreve o elemento de interface do usuário e pode ser considerada como um texto de dica de ferramenta (tooltip) 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, ele pode ser definido 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, "Insira seu nome aqui" é um bom candidato para a Entry.Placeholder propriedade que coloca o texto no controle antes da entrada real do usuário.

LabeledBy

Importante

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

A LabeledBy propriedade anexada permite que outro elemento defina informações de acessibilidade para o elemento atual. Por exemplo, um Label próximo a um Entry pode ser usado para descrever o que representa Entry . 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, ele pode ser definido 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

AutomationProperties.LabeledByProperty não é compatível com o iOS.

Testando a acessibilidade

Os aplicativos MAUI do .NET normalmente têm como destino 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 sempre será manualmente em dispositivos físicos com leitores de tela.

Habilitando 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 TalkBack.
  • O iOS e o macOS têm o VoiceOver. Para obter informações sobre como habilitar o VoiceOver, consulte Habilitar o VoiceOver.
  • O Windows tem o Narrador. Para obter informações sobre como habilitar o Narrador, consulte Habilitar o Narrador.

Habilitar TalkBack

TalkBack é o leitor de tela principal usado no Android. Como ele está habilitado depende do fabricante do dispositivo, da versão do Android e da versão do TalkBack. No entanto, o TalkBack normalmente pode ser habilitado em seu dispositivo Android por meio das configurações do dispositivo:

  1. Abra o aplicativo Configurações .
  2. Selecione Acessibilidade>TalkBack.
  3. Ativar o Uso do TalkBack .
  4. Selecione OK.

Observação

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

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

Para obter métodos alternativos de habilitação do TalkBack, consulte Ativar ou desativar o Talkback.

Ativar o VoiceOver

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

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

Um tutorial do VoiceOver pode ser aberto selecionando a Prática de VoiceOver, depois que o VoiceOver estiver habilitado.

Para obter métodos alternativos de habilitação do VoiceOver, consulte Ativar e praticar o VoiceOver no iPhone e ativar e praticar o VoiceOver no iPad.

No macOS, o VoiceOver pode ser habilitado da seguinte maneira:

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

Um tutorial do VoiceOver pode ser aberto selecionando Open VoiceOver Training....

Para obter métodos alternativos de habilitação do VoiceOver, consulte Ativar ou desativar o VoiceOver no Mac.

Ativar o Narrador

O Narrador é o leitor de tela principal usado no Windows. O Narrador pode ser habilitado pressionando a tecla do logotipo do Windows + Ctrl + Enter juntas. Pressione essas teclas novamente para parar o Narrador.

Para obter mais informações sobre o Narrador, consulte o guia Completo para o Narrador.

Lista de verificação de acessibilidade

Siga estas dicas para garantir que seus aplicativos MAUI do .NET estejam acessíveis para o público mais amplo possível:

  • Verifique se seu aplicativo é percebível, operável, compreensível e robusto para todos seguindo as Diretrizes de Acessibilidade de Conteúdo da Web (WCAG). O WCAG é o padrão de acessibilidade global e o parâmetro de comparação legal para web e móvel. Para obter mais informações, consulte a visão geral das Diretrizes de Acessibilidade de Conteúdo da Web (WCAG).
  • Verifique se a interface do usuário está se autodescrevendo. Teste se todos os elementos da interface do usuário estão acessíveis para o leitor de tela. Adicione texto descritivo e dicas quando necessário.
  • Verifique se as imagens e os ícones têm descrições de texto alternativas.
  • Suporte a fontes grandes e alto contraste. Evite codificação rígida das dimensões de controle e, em vez disso, prefira layouts que podem ser redimensionados para acomodar tamanhos de fonte maiores. Teste esquemas de cores no modo de alto contraste para garantir que eles sejam legíveis.
  • Projete a árvore visual com a navegação em mente. Use controles de layout apropriados para que navegar entre controles usando métodos de entrada alternativos siga o mesmo fluxo lógico que usar 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 indicações de áudio ou cores. Evite situações em que a única indicação de progresso, conclusão ou algum outro estado seja uma alteração de som ou cor. Projete a interface do usuário para incluir indicações 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 cegueira de cores.
  • 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 ajustam a velocidade do conteúdo de áudio ou vídeo e garantir que os controles de volume e transporte sejam fáceis de localizar e usar.
  • Localize suas descrições de acessibilidade se o aplicativo oferecer suporte a vários idiomas.
  • Teste os recursos de acessibilidade do seu aplicativo em cada plataforma direcionada a ele. Para obter mais informações, consulte Testando a acessibilidade.