Requisitos de texto acessível

Este tópico descreve as práticas recomendadas para a acessibilidade do texto em um aplicativo, garantindo que as cores e os planos de fundo satisfaçam a 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 da Plataforma Universal do Windows (UWP) podem ter e as práticas recomendadas para texto em elementos gráficos.

Relações de contraste

Embora os usuários sempre tenham a opção de alternar para um modo de alto contraste, o design do seu aplicativo para texto deve considerar essa opção como um último recurso. Uma prática muito melhor é garantir que o texto do seu 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 baseia-se 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 relação 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 relação de contraste de pelo menos 4,5:1 entre o texto (e imagens de texto) e o plano de fundo atrás do texto. Esta orientação existe na especificação W3C Techniques for WCAG 2.0 .

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

Texto decorativo e que não transmita nenhuma informação é excluído. Por exemplo, se palavras aleatórias são usadas para criar um 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 de texto visível é aceitável. Consulte Técnicas para WCAG 2.0 G18 (secção Recursos) para obter ferramentas que podem testar taxas de contraste.

Funções do 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: função é Texto
• TextBox: a função é Editar
• RichTextBlock (e classe de estouro RichTextBlockOverflow): função é Text
• RichEditBox: função é Edit

Quando um controle relata que tem uma função de Editar, as tecnologias assistenciais assumem 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 é focado pelo 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ê-las. Os leitores de tela são normalmente projetados para suportar 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 assistiva 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ê mesmo 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.

Auto-sugerir acessibilidade

Quando um usuário digita em um campo de entrada e uma lista de sugestões potenciais aparece, 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 Cortana no Windows, no campo de entrada de URL no Microsoft Edge, no campo de entrada de local no aplicativo Meteorologia e assim por diante. Se você estiver usando um AutosuggestBox XAML ou os controles intrínsecos HTML, essa experiência já está conectada para você por padrão. Para tornar esta experiência acessível, o campo de entrada e a lista devem ser associados. Isso é explicado na seção Implementando sugestão automática .

O Narrador foi atualizado para tornar este 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 que a lista está presente e quando a lista fecha
• 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 através de 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 estar associados na árvore UIA. Essa associação é feita com a propriedade UIA_ControllerForPropertyId em aplicativos de área de trabalho ou a propriedade ControlledPeers em aplicativos UWP.

Em um alto nível, existem 2 tipos de experiências de autossugestão.

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 de área de trabalho ou o evento AutomationEvents.SelectionItemPatternOnElementSelected a ser disparado em um aplicativo UWP. Sempre que a seleção for alterada, quando o usuário digitar outra letra e as sugestões tiverem sido atualizadas ou quando um usuário navegar pela lista, o evento ElementSelected deverá ser acionado.

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

Nenhuma seleção padrão
Se não houver nenhuma seleção padrão, como na caixa de localização do aplicativo Meteorologia, o Narrador procurará o evento UIA_LayoutInvalidatedEventId da área de trabalho ou o evento UWP LayoutInvalidated a ser acionado na lista toda vez que a lista for atualizada.

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

Implementação de XAML

Se você estiver usando a AutosuggestBox XAML padrão, tudo já está 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 acionar o evento AutomationPropertyChanged para a propriedade ControlledPeers sempre que adicionar ou remover essa propriedade e também acionar seus próprios eventos SelectionItemPatternOnElementSelected ou eventos LayoutInvalidados , dependendo do seu tipo de cenário, que foi explicado anteriormente neste artigo.

Implementação HTML

Se você estiver usando os controles intrínsecos em HTML, a implementação da 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, você deve configurar seus próprios controles ARIA, que são explicados nos padrões W3C.

Texto em gráficos

Sempre que possível, evite incluir texto num gráfico. Por exemplo, qualquer texto incluído no arquivo de origem da imagem exibido no aplicativo como um elemento Image não é automaticamente acessível ou legível por tecnologias assistenciais. Se tiver de utilizar texto em gráficos, certifique-se de que o valor AutomationProperties.Name que fornece como equivalente a "texto alternativo" inclui 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 do tipo de letra do texto

Os usuários podem ter dificuldade para ler 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 para ler texto. Estes são, entre outros:

• 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 globais de escala e resolução em Configurações-Sistema-Exibição-Escala>>> e layout. Exatamente quais opções de dimensionamento estão disponíveis pode variar, pois isso depende das capacidades 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 nos controles de suporte em todos os aplicativos e telas (todos os controles de texto UWP oferecem suporte à experiência de dimensionamento de texto sem qualquer personalização ou modelo).

Vários elementos de texto e controles têm uma propriedade IsTextScaleFactorEnabled . Esta propriedade tem o valor true por padrão. Quando verdadeiro, 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. 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 seguinte marcação 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 texto mais pequeno é ampliado por este montante. Talvez seja possível usar o valor para, digamos, dimensionar gráficos para corresponder ao texto. Mas lembre-se que nem todo texto é dimensionado pelo mesmo fator. De um modo geral, quanto maior for o texto inicial, menos ele será afetado pelo dimensionamento.

Esses tipos têm uma propriedade IsTextScaleFactorEnabled :

• ContentPresenter
• Classes de controlo e derivadas
• FontIcon
• RichTextBlock
• Bloco de texto
• TextElement e classes derivadas

Examples

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

Tópicos relacionados

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