Requisitos de texto acessível

Este tópico descreve as melhores práticas para acessibilidade de texto em um aplicativo, garantindo que cores e planos de fundo atendam à taxa de contraste necessária. Este tópico também discute as funções de Automação da Interface do Usuário da Microsoft que os elementos de texto em um aplicativo UWP (Plataforma Universal do Windows) podem ter e as práticas recomendadas para texto em elementos gráficos.

Taxas de contraste

Embora os usuários sempre tenham a opção de alternar para um modo de alto contraste, o design do aplicativo para texto deve considerar essa opção como último recurso. Uma prática muito melhor é garantir que o texto do aplicativo atenda a determinadas diretrizes estabelecidas para o nível de contraste entre o texto e seu plano de fundo. A avaliação do nível de contraste é baseada em técnicas determinísticas que não consideram a tonalidade da cor. Por exemplo, se você tiver texto vermelho em um fundo verde, esse texto pode não ser legível para alguém com deficiência de daltonismo. Verificar e corrigir a taxa de contraste pode evitar esses tipos de problemas de acessibilidade.

As recomendações para contraste de texto documentadas aqui são baseadas em um padrão de acessibilidade da Web, G18: Garantir que exista uma taxa de contraste de pelo menos 4,5:1 entre o texto (e as imagens do texto) e o plano de fundo por trás do texto. Essas diretrizes existem na especificação Técnicas do W3C para WCAG 2.0 .

Para ser considerado acessível, o texto visível deve ter uma taxa de contraste de luminosidade mínima de 4,5:1 em relação ao plano de fundo. As exceções incluem logotipos e texto incidental, como texto que faz parte de um componente de interface do usuário inativo.

O texto decorativo e que não transmite nenhuma informação é excluído. Por exemplo, se palavras aleatórias são usadas para criar um plano de fundo e as palavras podem ser reorganizadas ou substituídas sem alterar o significado, as palavras são consideradas decorativas e não precisam atender a esse critério.

Use ferramentas de contraste de cores para verificar se a taxa de contraste do texto visível é aceitável. Consulte Técnicas para WCAG 2.0 G18 (seção Recursos) para obter ferramentas que podem testar taxas de contraste.

Funções de elemento de texto

Um aplicativo UWP pode usar esses elementos padrão (comumente chamados de elementos de texto ou controles de edição de texto):

• TextBlock: a função é Text
• TextBox: a função é Editar
• RichTextBlock (e classe de estouro RichTextBlockOverflow): a função é Text
• RichEditBox: a função é Editar

Quando um controle relata que tem uma função de Editar, as tecnologias adaptativas pressupõem que há maneiras de os usuários alterarem os valores. Portanto, se você colocar texto estático em um TextBox, estará relatando incorretamente a função e, portanto, relatando incorretamente a estrutura do seu aplicativo para o usuário de acessibilidade.

Nos modelos de texto para XAML, há dois elementos que são usados principalmente para texto estático, TextBlock e RichTextBlock. Nenhum deles é uma subclasse Control e, como tal, nenhum deles pode ser focalizado no teclado ou pode aparecer na ordem de tabulação. Mas isso não significa que as tecnologias assistivas não possam ou não queiram lê-los. Os leitores de tela geralmente são projetados para dar suporte a vários modos de leitura do conteúdo em um aplicativo, incluindo um modo de leitura dedicado ou padrões de navegação que vão além do foco e da ordem de tabulação, como um "cursor virtual". Portanto, não coloque seu texto estático em contêineres focalizáveis apenas para que a ordem de tabulação leve o usuário até lá. Os usuários de tecnologia assistencial esperam que qualquer coisa na ordem de tabulação seja interativa e, se encontrarem texto estático lá, isso é mais confuso do que útil. Você deve testar isso com o Narrador para ter uma noção da experiência do usuário com seu aplicativo ao usar um leitor de tela para examinar o texto estático do aplicativo.

Sugerir acessibilidade automaticamente

Quando um usuário digita em um campo de entrada e uma lista de possíveis sugestões é exibida, esse tipo de cenário é chamado de sugestão automática. Isso é comum na linha Para: de um campo de email, na caixa de pesquisa da Cortana no Windows, no campo de entrada de URL no Microsoft Edge, no campo de entrada de local no aplicativo Clima e assim por diante. Se você estiver usando um XAML AutosuggestBox ou os controles intrínsecos HTML, essa experiência já estará conectada para você por padrão. Para tornar essa experiência acessível, o campo de entrada e a lista devem ser associados. Isso é explicado na seção Implementação da sugestão automática.

O Narrador foi atualizado para tornar esse tipo de experiência acessível com um modo de sugestões especiais. Em um alto nível, quando o campo de edição e a lista estiverem conectados corretamente, o usuário final:

• Saiba se a lista está presente e quando a lista é fechada
• Saiba quantas sugestões estão disponíveis
• Conheça o item selecionado, se houver
• Ser capaz de mover o foco do Narrador para a lista
• Ser capaz de navegar por uma sugestão com todos os outros modos de leitura

Exemplo de uma lista de sugestões

Implementando a sugestão automática

Para tornar essa experiência acessível, o campo de entrada e a lista devem ser associados na árvore UIA. Essa associação é feita com a propriedade UIA_ControllerForPropertyId em aplicativos da área de trabalho ou a propriedade ControlledPeers em aplicativos UWP.

Em um nível alto, existem 2 tipos de experiências de sugestão automática.

Seleção padrão
Se uma seleção padrão for feita na lista, o Narrador procurará um evento UIA_SelectionItem_ElementSelectedEventId em um aplicativo da área de trabalho ou o evento AutomationEvents.SelectionItemPatternOnElementSelected a ser acionado em um aplicativo UWP. Sempre que a seleção for alterada, quando o usuário digitar outra letra e as sugestões forem atualizadas ou quando um usuário navegar pela lista, o evento ElementSelected deverá ser acionado.

Exemplo em que há uma seleção padrão

Sem seleção padrão
Se não houver nenhuma seleção padrão, como na caixa de localização do aplicativo Clima, o Narrador procurará o evento UIA_LayoutInvalidatedEventId área de trabalho ou o evento UWP LayoutInvalidated a ser disparado na lista sempre que a lista for atualizada.

Exemplo em que não há seleção padrão

Implementação XAML

Se você estiver usando o XAML AutosuggestBox padrão, tudo já estará conectado para você. Se você estiver criando sua própria experiência de sugestão automática usando um TextBox e uma lista, precisará definir a lista como AutomationProperties.ControlledPeers no TextBox. Você deve disparar o evento AutomationPropertyChanged para a propriedade ControlledPeers sempre que adicionar ou remover essa propriedade e também disparar seus próprios eventos SelectionItemPatternOnElementSelected ou eventos LayoutIninvalided, dependendo do tipo de cenário, que foi explicado anteriormente neste artigo.

Implementação de HTML

Se você estiver usando os controles intrínsecos em HTML, a implementação do UIA já foi mapeada para você. Abaixo está um exemplo de uma implementação que já está conectada para você:

<label>Sites <input id="input1" type="text" list="datalist1" /></label>
<datalist id="datalist1">
        <option value="http://www.google.com/" label="Google"></option>
        <option value="http://www.reddit.com/" label="Reddit"></option>
</datalist>

Se você estiver criando seus próprios controles, deverá configurar seus próprios controles ARIA, que são explicados nos padrões do W3C.

Texto em gráficos

Sempre que possível, evite incluir texto em um gráfico. Por exemplo, qualquer texto que você incluir no arquivo de origem da imagem exibido no aplicativo como um elemento Image não será automaticamente acessível ou legível por tecnologias assistivas. Se você precisar usar texto em gráficos, certifique-se de que o valor AutomationProperties.Name fornecido como equivalente a "texto alternativo" inclua esse texto ou um resumo do significado do texto. Considerações semelhantes se aplicam se você estiver criando caracteres de texto a partir de vetores como parte de um caminho ou usando glifos.

Tamanho e escala da fonte do texto

Os usuários podem ter dificuldade em ler o texto em um aplicativo quando as fontes usadas são simplesmente muito pequenas, portanto, certifique-se de que qualquer texto em seu aplicativo tenha um tamanho razoável em primeiro lugar.

Depois de fazer o óbvio, o Windows inclui várias ferramentas e configurações de acessibilidade que os usuários podem aproveitar e ajustar às suas próprias necessidades e preferências de leitura de texto. Estão incluídos:

• A ferramenta Lupa, que amplia uma área selecionada da interface do usuário. Você deve garantir que o layout do texto em seu aplicativo não dificulte o uso da Lupa para leitura.
• Configurações de escala e resolução globais em Configurações-Sistema-Exibição-Escala>>> e layout. As opções de dimensionamento disponíveis podem variar, pois isso depende dos recursos do dispositivo de exibição.
• Configurações de tamanho de texto em Configurações-Facilidade> de acesso-Exibição>. Ajuste a configuração Aumentar o texto para especificar apenas o tamanho do texto em controles de suporte em todos os aplicativos e telas (todos os controles de texto UWP dão suporte à experiência de dimensionamento de texto sem qualquer personalização ou modelagem).

Vários elementos de texto e controles têm uma propriedade IsTextScaleFactorEnabled. Essa propriedade tem o valor true por padrão. Quando true, o tamanho do texto nesse elemento pode ser dimensionado. O dimensionamento afeta o texto que tem um FontSize pequeno em um grau maior do que afeta o texto que tem um FontSize grande. Você pode desabilitar o redimensionamento automático definindo a propriedade IsTextScaleFactorEnabled de um elemento como false.

Consulte Dimensionamento de texto para obter mais detalhes.

Adicione a marcação a seguir a um aplicativo e execute-o. Ajuste a configuração Tamanho do texto e veja o que acontece com cada TextBlock.

XAML

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been left set to its default value of true."
    Style="{StaticResource BodyTextBlockStyle}"/>

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been set to false."
    Style="{StaticResource BodyTextBlockStyle}" IsTextScaleFactorEnabled="False"/>

Não recomendamos que você desabilite o dimensionamento de texto, pois dimensionar o texto da interface do usuário universalmente em todos os aplicativos é uma experiência de acessibilidade importante para os usuários.

Você também pode usar o evento TextScaleFactorChanged e a propriedade TextScaleFactor para saber mais sobre as alterações na configuração Tamanho do texto no telefone. Veja como:

C#

{
    ...
    var uiSettings = new Windows.UI.ViewManagement.UISettings();
    uiSettings.TextScaleFactorChanged += UISettings_TextScaleFactorChanged;
    ...
}

private async void UISettings_TextScaleFactorChanged(Windows.UI.ViewManagement.UISettings sender, object args)
{
    var messageDialog = new Windows.UI.Popups.MessageDialog(string.Format("It's now {0}", sender.TextScaleFactor), "The text scale factor has changed");
    await messageDialog.ShowAsync();
}

O valor de TextScaleFactor é um duplo no intervalo [1,2.25]. O menor texto é ampliado por esse valor. Você pode usar o valor para, digamos, dimensionar gráficos para corresponder ao texto. Mas lembre-se de que nem todo texto é dimensionado pelo mesmo fator. De um modo geral, quanto maior o texto, menos ele é afetado pelo dimensionamento.

Esses tipos têm uma propriedade IsTextScaleFactorEnabled :

• ContentPresenter
• Controle e classes derivadas
• FontIcon
• RichTextBlock
• TextBlock
• TextElement e classes derivadas

Exemplos

O aplicativo Galeria da WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades da WinUI 3. Obtenha o aplicativo na Microsoft Store ou o código-fonte no GitHub

Tópicos relacionados

• Dimensionamento de texto
• Acessibilidade
• Informações básicas de acessibilidade
• Exemplo de exibição de texto XAML
• Exemplo de edição de texto XAML
• Amostra de Acessibilidade XAML