Requisitos de texto acessível

Este tópico descreve as práticas recomendadas 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 da Plataforma Universal do Windows (UWP) podem ter e práticas recomendadas para texto em gráficos.

Taxas de contraste

Embora os usuários sempre tenham a opção de mudar para um modo de alto contraste, o design do aplicativo para texto deve considerar essa opção como um ú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 sua tela de fundo. A avaliação do nível de contraste baseia-se em técnicas determinísticas que não consideram matiz de cor. Por exemplo, se você tiver texto vermelho em um plano de fundo verde, esse texto poderá não ser legível para alguém com deficiência de cegueira de cor. Verificar e corrigir a taxa de contraste pode impedir esses tipos de problemas de acessibilidade.

As recomendações de contraste de texto documentadas aqui se baseiam em um padrão de acessibilidade da Web, G18: garantindo que exista uma taxa de contraste de pelo menos 4,5:1 entre texto (e imagens de texto) e plano de fundo por trás do texto. Essa orientação existe na especificação técnicas W3C para WCAG 2.0 .

Para ser considerado acessível, o texto visível deve ter uma taxa mínima de contraste de luminosidade de 4,5:1 em relação à tela 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 que é decorativo e não transmite nenhuma informação é excluído. Por exemplo, se palavras aleatórias forem usadas para criar um plano de fundo e as palavras puderem ser reorganizadas ou substituídas sem alterar o significado, as palavras serão consideradas decorativas e não precisarão 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 (seção Recursos) para ferramentas que podem testar as taxas de contraste.

Funções de elemento de texto

Um aplicativo UWP pode usar esses elementos padrão (geralmente chamados de elementos de texto ou controles textedit):

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

Quando um controle relata que tem uma função de Edição, as tecnologias adaptativas pressupõem que há maneiras de os usuários alterarem os valores. Portanto, se você colocar o texto estático em um TextBox, você está subnotificação incorreta da função e, portanto, o relatório errado da 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 é focalizável no teclado ou pode aparecer na ordem de tabulação. Mas isso não significa que as tecnologias adaptativas não podem ou não lê-las. Os leitores de tela normalmente 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 coloque o usuário lá. Os usuários de tecnologia adaptativa 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 por conta própria 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.

Acessibilidade de sugestão automática

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 To: 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 Clima e assim por diante. Se você estiver usando um XAML AutosuggestBox ou controles intrínsecos HTML, essa experiência já está 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 Implementar sugestão automática .

O Narrador foi atualizado para tornar esse tipo de experiência acessível com um modo de sugestões especial. 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 é 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

Implementação da 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 alto nível, há dois 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 é alterada, quando o usuário digita outra letra e as sugestões são atualizadas ou quando um usuário navega pela lista, o evento ElementSelected deve ser acionado.

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

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

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

Implementação de XAML

Se você estiver usando o XAML AutosuggestBox padrão, tudo já está conectado para você. Se você estiver fazendo 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 disparar seus próprios eventos SelectionItemPatternOnElementSelected ou eventos LayoutInvalidated , dependendo do seu 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ê. Veja abaixo 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 é automaticamente acessível ou legível por tecnologias adaptativas. Se você precisar usar texto em elementos gráficos, verifique se o valor AutomationProperties.Name que você fornece como equivalente a "texto alt" inclui esse texto ou um resumo do significado do texto. Considerações semelhantes se aplicam se você estiver criando caracteres de texto de vetores como parte de um caminho ou usando glifos.

Tamanho e escala da fonte de texto

Os usuários podem ter dificuldade para ler texto em um aplicativo quando as fontes usam são simplesmente muito pequenas, portanto, verifique se qualquer texto em seu aplicativo é um tamanho razoável em primeiro lugar.

Depois de fazer o óbvio, o Windows inclui várias ferramentas de acessibilidade e configurações que os usuários podem aproveitar e ajustar às suas próprias necessidades e preferências para ler texto. Elas incluem:

• 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 torne difícil usar a Lupa para leitura.
• Configurações globais de escala e resolução em Settings-System-Display-Scale>>> e layout. Exatamente quais opções de dimensionamento estão 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 Tornar o texto maior 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 nenhuma personalização ou modelagem).

Vários elementos de texto e controles têm uma propriedade IsTextScaleFactorEnabled . Essa propriedade tem o valor verdadeiro 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 grande. Você pode desabilitar o redimensionamento automático definindo a propriedade IsTextScaleFactorEnabled de um elemento como false.

Consulte o dimensionamento de texto para obter mais detalhes.

Adicione a marcação a seguir a um aplicativo e execute-a. Ajuste a configuração de tamanho de 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 desabilitar 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 descobrir sobre alterações na configuração de tamanho de 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 é escalado verticalmente por essa quantidade. 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 for o texto, menos ele será 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 da Galeria do WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo na Microsoft Store ou obtenha 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
• Exemplo de acessibilidade XAML