Visão geral de acessibilidadeAccessibility overview

Este artigo é uma visão geral dos conceitos e tecnologias relacionados a cenários de acessibilidade de aplicativos da Plataforma Universal do Windows (UWP).This article is an overview of the concepts and technologies related to accessibility scenarios for Universal Windows Platform (UWP) apps.

Acessibilidade e seu aplicativoAccessibility and your app

Há muitas deficiências ou problemas possíveis, incluindo limites de movimento, visão, percepção de cores, audição, fala, cognição e alfabetização.There are many possible disabilities or impairments, including limitations in mobility, vision, color perception, hearing, speech, cognition, and literacy. Entretanto, você pode atender à maioria das exigências seguindo as diretrizes oferecidas aqui.However, you can address most requirements by following the guidelines offered here. Isso significa fornecer:This means providing:

  • Suporte a interações de teclado e leitores de tela.Support for keyboard interactions and screen readers.
  • Suporte a personalização do usuário, como fonte, ajuste de zoom (ampliação), cor e configurações de alto contraste.Support for user customization, such as font, zoom setting (magnification), color, and high-contrast settings.
  • Alternativas ou suplementos para partes de sua interface do usuário.Alternatives or supplements for parts of your UI.

Os controles do XAML fornecem suporte interno a teclado e suporte a tecnologias adaptativas, como leitores de tela, que aproveitam as estruturas de acessibilidade que já dão suporte a aplicativos UWP, HTML e outras tecnologias de interface de usuário.Controls for XAML provide built-in keyboard support and support for assistive technologies such as screen readers, which take advantage of accessibility frameworks that already support UWP apps, HTML, and other UI technologies. Esse suporte interno permite um nível básico de acessibilidade que você pode personalizar com muito pouco trabalho, definindo apenas algumas propriedades.This built-in support enables a basic level of accessibility that you can customize with very little work, by setting just a handful of properties. Se você estiver criando seus próprios controles e componentes personalizados de XAML, também poderá adicionar suporte semelhante a esses controles usando o conceito de um par de automatização.If you are creating your own custom XAML components and controls, you can also add similar support to those controls by using the concept of an automation peer.

Além disso, a vinculação de dados, o estilo e os recursos de modelos facilitam a implementação do suporte para mudanças dinâmicas para as configurações de exibição e texto para interfaces de usuário alternativas.In addition, data binding, style, and template features make it easy to implement support for dynamic changes to display settings and text for alternative UIs.

Automação da Interface de UsuárioUI Automation

O suporte à acessibilidade vem principalmente do suporte integrado à estrutura de Automação da IU da Microsoft.Accessibility support comes primarily from the integrated support for the Microsoft UI Automation framework. Esse suporte é fornecido através de classes base e do comportamento nativo da implementação de classe para tipos de controle, e uma representação da interface da API do provedor de Automação da Interface do Usuário.That support is provided through base classes and the built-in behavior of the class implementation for control types, and an interface representation of the UI Automation provider API. Cada classe de controle usa os conceitos de pares e padrões de automação da Automação da Interface do Usuário para relatar a função do controle e o conteúdo para os clientes de Automação da Interface do Usuário.Each control class uses the UI Automation concepts of automation peers and automation patterns that report the control's role and content to UI Automation clients. O aplicativo é tratado como janela principal pela Automação da Interface do Usuário e pela Estrutura de Automação da IU todo conteúdo relevante à acessibilidade dentro da janela do aplicativo está disponível para um cliente de Automação da Interface do Usuário.The app is treated as a top-level window by UI Automation, and through the UI Automation framework all the accessibility-relevant content within that app window is available to a UI Automation client. Para saber mais sobre Automação da Interface do Usuário, consulte UI Automation Overview.For more info about UI Automation, see UI Automation Overview.

Tecnologia adaptativaAssistive technology

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.Many user accessibility needs are met by assistive technology products installed by the user or by tools and settings provided by the operating system. Isso inclui funcionalidades como leitores de tela, ampliação de tela e configurações de alto contraste.This includes functionality such as screen readers, screen magnification, and high-contrast settings.

Produtos de tecnologia adaptativa incluem uma ampla variedade de softwares e hardwares.Assistive technology products include a wide variety of software and hardware. Esses produtos funcionam por meio de estruturas de interface e acessibilidade de teclado padrão que relatam informações sobre o conteúdo e a estrutura de uma interface de usuário para leitores de tela e outras tecnologias adaptativas.These products work through the standard keyboard interface and accessibility frameworks that report information about the content and structure of a UI to screen readers and other assistive technologies. Exemplos de produtos de tecnologia adaptativa:Examples of assistive technology products include:

  • O Teclado Virtual, que permite às pessoas usar um ponteiro no lugar de um teclado para digitar um texto.The On-Screen Keyboard, which enables people to use a pointer in place of a keyboard to type text.
  • Software de reconhecimento de voz, que converte as palavras faladas em texto digitado.Voice-recognition software, which converts spoken words into typed text.
  • Leitores de tela, que convertem o texto em palavras faladas ou outras formas, como o Braille.Screen readers, which convert text into spoken words or other forms such as Braille.
  • O leitor de tela Narrador, que é especificamente parte do Windows.The Narrator screen reader, which is specifically part of Windows. O Narrador possui um modo de toque que pode executar tarefas de leitura de tela ao processar gestos de toque quando não houver um teclado disponível.Narrator has a touch mode, which can perform screen reading tasks by processing touch gestures, for when there is no keyboard available.
  • Programas ou configurações que ajustam a exibição ou suas áreas, por exemplo, temas de alto contraste, configurações de pontos por polegada (dpi) da exibição ou a ferramenta Lupa.Programs or settings that adjust the display or areas of it, for example high contrast themes, dots per inch (dpi) settings of the display, or the Magnifier tool.

Os aplicativos que têm um bom suporte a leitor de telas e teclado costumam funcionar bem com diversos produtos de tecnologia adaptativa.Apps that have good keyboard and screen reader support usually work well with various assistive technology products. Em muitos casos, um aplicativo UWP funciona com esses produtos sem a modificação adicional de informações ou estrutura.In many cases, a UWP app works with these products without additional modification of information or structure. Mas convém modificar algumas configurações para obter a melhor experiência de acessibilidade ou para implementar suporte adicional.However, you may want to modify some settings for optimal accessibility experience or to implement additional support.

Algumas das opções que você pode usar para testar os cenários de acessibilidade básica com tecnologias assistenciais são listadas em Testes de acessibilidade.Some of the options that you can use for testing basic accessibility scenarios with assistive technologies are listed in Accessibility testing.

Suporte a leitores de tela e informações básicas de acessibilidadeScreen reader support and basic accessibility information

Os leitores de tela fornecem acesso ao texto em um aplicativo transformando-o em algum outro formato, como um idioma falado ou Braille.Screen readers provide access to the text in an app by rendering it in some other format, such as spoken language or Braille output. O comportamento exato de um leitor de tela depende do software e da configuração do usuário nele.The exact behavior of a screen reader depends on the software and on the user's configuration of it.

Por exemplo, alguns leitores de tela leem a interface do usuário do aplicativo inteira quando o usuário executa ou alterna para o aplicativo que está sendo visualizado, permitindo ao usuário receber todo o conteúdo informativo disponível antes de tentar navegar nele.For example, some screen readers read the entire app UI when the user starts or switches to the app being viewed, which enables the user to receive all of the available informational content before attempting to navigate it. Alguns leitores de telas também leem o texto associado a um controle individual quando ele recebe foco durante a navegação por tabulação.Some screen readers also read the text associated with an individual control when it receives focus during tab navigation. Isso permite que os usuários se orientem conforme navegam pelos controles de entrada de um aplicativo.This enables users to orient themselves as they navigate among the input controls of an application. O Narrador é um exemplo de leitor de tela que fornece os dois comportamentos, dependendo da escolha do usuário.Narrator is an example of a screen reader that provides both behaviors, depending on user choice.

A informação mais importante que um leitor de tela ou qualquer outra tecnologia adaptativa precisa para ajudar os usuários a entender ou navegar um aplicativo é um nome acessível para partes do elementos do aplicativo.The most important information that a screen reader or any other assistive technology needs in order to help users understand or navigate an app is an accessible name for the element parts of the app. Em muitos casos, um controle ou elemento já tem um nome acessível que é calculado a partir de outros valores de propriedade que você forneceu.In many cases, a control or element already has an accessible name that is calculated from other property values that you have otherwise provided. O caso mais comum em que você pode usar um nome já calculado é com um elemento que suporta e exibe o texto interno.The most common case in which you can use an already-calculated name is with an element that supports and displays inner text. Para outros elementos, você pode precisar contabilizar outras maneiras de fornecer um nome acessível seguindo as práticas recomendadas para a estrutura do elemento.For other elements, you sometimes need to account for other ways to provide an accessible name by following best practices for element structure. E, às vezes, você precisa fornecer um nome que se destina explicitamente a ser o nome acessível para acessibilidade do aplicativo.And sometimes you need to provide a name that is explicitly intended as the accessible name for app accessibility. Para obter uma lista de quantos desses valores calculados funcionam em elementos comuns de interface do usuário e para saber mais sobre os nomes acessíveis em geral, consulte Informações básicas de acessibilidade.For a listing of how many of these calculated values work in common UI elements, and for more info about accessible names in general, see Basic accessibility information.

Existem várias outras propriedades de automação disponíveis (incluindo as propriedades de teclado descritas na próxima seção).There are several other automation properties available (including the keyboard properties described in the next section). Contudo, nem todos os leitores de tela dão suporte a todas as propriedades de automação.However, not all screen readers support all automation properties. Em geral, você deve definir todas as propriedades e teste de automação apropriadas para dar o suporte mais amplo possível para os leitores de tela.In general, you should set all appropriate automation properties and test to provide the widest possible support for screen readers.

Suporte ao tecladoKeyboard support

Para fornecer um bom suporte ao teclado, você precisa assegurar que todas as partes de seu aplicativo possam ser usadas com teclado.To provide good keyboard support, you must ensure that every part of your application can be used with a keyboard. Se o seu aplicativo usa basicamente os controles padrão e não usa controles personalizados, você já avançou bastante.If your app uses mostly the standard controls and doesn't use any custom controls, you are most of the way there already. O modelo de controle XAML básico fornece suporte interno a teclado, incluindo navegação da guia, entrada de texto, e suporte específico de controle.The basic XAML control model provides built-in keyboard support including tab navigation, text input, and control-specific support. Os elementos que servem como contêineres de layout (como painéis) usam a ordem do layout para estabelecer uma ordem de tabulação padrão.The elements that serve as layout containers (such as panels) use the layout order to establish a default tab order. Essa ordem costuma ser a ordem de guia correta a se usar em uma representação acessível de interface do usuário.That order is often the correct tab order to use for an accessible representation of the UI. Se você usa os controles ListBox e GridView para exibir dados, eles fornecem navegação interna por setas.If you use ListBox and GridView controls to display data, they provide built-in arrow-key navigation. Ou se você usa um controle Button, ele já lida com a barra de espaço e a tecla enter para ativação de botões.Or if you use a Button control, it already handles the Spacebar or Enter keys for button activation.

Para saber mais sobre todos os aspectos de suporte a teclado, incluindo a ordem de tabulação e a ativação ou navegação baseada em teclas, consulte Acessibilidade de teclado.For more info about all the aspects of keyboard support, including tab order and key-based activation or navigation, see Keyboard accessibility.

Mídia e legendasMedia and captioning

Você costuma exibir mídia audiovisual através de um objeto MediaElement.You typically display audiovisual media through a MediaElement object. Você pode usar APIs do MediaElement para controlar a reprodução de mídia.You can use MediaElement APIs to control the media playback. Por questões de acessibilidade, forneça controles que permitam que os usuários reproduzam, pausem e interrompam a mídia quando necessário.For accessibility purposes, provide controls that enable users to play, pause, and stop the media as needed. Às vezes, a mídia inclui componentes adicionais que são destinados à acessibilidade, como legendagem ou faixas de áudio alternativas que incluem descrições narrativas.Sometimes, media includes additional components that are intended for accessibility, such as captioning or alternative audio tracks that include narrative descriptions.

Texto acessívelAccessible text

Três aspectos principais do texto são relevantes para a acessibilidade:Three main aspects of text are relevant to accessibility:

  • As ferramentas devem determinar se o texto deve ser lido como parte de uma passagem de sequência de guias ou apenas como parte de uma representação geral do documento.Tools must determine whether the text is to be read as part of a tab-sequence traversal or only as part of an overall document representation. Você pode ajudar a controlar essa determinação escolhendo o elemento adequado para exibir o texto ou ajustando as propriedades desses elementos de texto.You can help control this determination by choosing the appropriate element for displaying the text or by adjusting properties of those text elements. Cada elemento de texto tem uma finalidade específica, e essa finalidade geralmente tem uma função correspondente de Automação da Interface do Usuário.Each text element has a specific purpose, and that purpose often has a corresponding UI Automation role. Usar o elemento errado pode resultar no relatório da função errada para a Automação da Interface do Usuário e na criação de uma experiência confusa para um usuário de tecnologia adaptativa.Using the wrong element can result in reporting the wrong role to UI Automation and creating a confusing experience for an assistive technology user.
  • Muitos usuários têm limitações de visão que tornam difícil para eles lerem o texto, a menos que haja contraste adequado no contexto.Many users have sight limitations that make it difficult for them to read text unless it has adequate contrast against the background. A maneira na qual isso afeta o usuário não é intuitiva para os designers de aplicativo que não tem essa limitação de visão.How this impacts the user is not intuitive for app designers who do not have that sight limitation. Por exemplo, para usuários daltônicos, opções erradas de cores na concepção podem impedir que alguns usuários sejam capazes de ler o texto.For example, for color-blind users, poor color choices in the design can prevent some users from being able to read the text. As recomendações de acessibilidade que originalmente foram feitas para o conteúdo da Web definem os padrões de contraste que também podem evitar esses problemas em aplicativos.Accessibility recommendations that were originally made for web content define standards for contrast that can avoid these problems in apps as well. Para obter mais informações, consulte Requisitos de texto acessível.For more info, see Accessible text requirements.
  • Muitos usuários têm dificuldade em ler texto muito pequeno.Many users have difficulty reading text that is simply too small. Primeiramente, você pode evitar esse problema deixando o texto na interface do usuário do seu aplicativo consideravelmente grande.You can prevent this issue by making the text in your app's UI reasonably large in the first place. No entanto, isso é um desafio para os aplicativos que exibem grandes quantidades de texto ou os textos intercalados com outros elementos visuais.However, that's challenging for apps that display large quantities of text, or text interspersed with other visual elements. Nesses casos, verifique se o aplicativo interage corretamente com os recursos do sistema que podem aumentar a visualização na tela, de modo que todos os textos contidos no aplicativo sejam ampliados com ele.In such cases, make sure that the app correctly interacts with the system features that can scale up the display, so that any text in apps scales up along with it. (Alguns usuários alteram os valores de dpi como uma opção de acessibilidade.(Some users change dpi values as an accessibility option. Essa opção está disponível em Ampliar itens da tela, em Facilidade de Acesso, que redireciona para uma interface do usuário do Painel de Controle para Aparência e Personalização / Tela).That option is available from Make things on the screen larger in Ease of Access, which redirects to a Control Panel UI for Appearance and Personalization / Display.)

Oferecendo suporte a temas de alto contrasteSupporting high-contrast themes

Os controles de IU usam uma representação visual definida como parte de um dicionário de recursos XAML de temas.UI controls use a visual representation that is defined as part of a XAML resource dictionary of themes. Um ou mais desses temas é usado especificamente quando o sistema é definido para alto contraste.One or more of these themes is specifically used when the system is set for high contrast. Quando o usuário alterna para alto contraste, ao consultar o tema adequado de um dicionário de recursos dinamicamente, todos os controles da interface do usuário também usarão um tema de alto contraste adequado.When the user switches to high contrast, by looking up the appropriate theme from a resource dictionary dynamically, all your UI controls will use an appropriate high-contrast theme too. Apenas verifique se você não desabilitou os temas especificando um estilo explícito ou usando outra técnica de estilização que impede que os temas de alto contraste sejam carregados e substituam as mudanças de estilo.Just make sure that you haven't disabled the themes by specifying an explicit style or using another styling technique that prevents the high-contrast themes from loading and overriding your style changes. Para obter mais informações, consulte Temas de alto contraste.For more info, see High-contrast themes.

Design de interface do usuário alternativaDesign for alternative UI

Ao projetar seus aplicativos, leve em consideração como eles podem ser usados por pessoas com mobilidade, visão e audição limitadas.When you design your apps, consider how they may be used by people with limited mobility, vision, and hearing. Como os produtos de tecnologia adaptativa fazem amplo uso de interfaces do usuário padrão, é particularmente importante fornecer um bom suporte ao teclado e a leitores de tela mesmo se você não fizer outros ajustes de acessibilidade.Because assistive technology products make extensive use of standard UI, it is particularly important to provide good keyboard and screen-reader support even if you make no other adjustments for accessibility.

Em muitos casos, você pode transportar informações essenciais usando várias técnicas para ampliar a sua audiência.In many cases, you can convey essential information by using multiple techniques to widen your audience. Por exemplo, você pode destacar informações usando informações de ícone e de cor para ajudar aos usuários que são cegos e exibir alertas visuais com efeitos sonoros para ajudar aos usuários que possuem deficiência de audição.For example, you can highlight information using both icon and color information to help users who are color blind, and you can display visual alerts along with sound effects to help users who are hearing impaired.

Se necessário, você pode fornecer elementos de interface do usuário acessíveis e alternativos que removem completamente os elementos e animações não essenciais e fornecem outras simplificações para dinamizar a experiência do usuário.If necessary, you can provide alternative, accessible user interface elements that completely remove nonessential elements and animations, and provide other simplifications to streamline the user experience. O exemplo de código a seguir demonstra como exibir uma instância UserControl em um lugar de outra, de acordo com a configuração do usuário.The following code example demonstrates how to display one UserControl instance in place of another depending on a user setting.

XAMLXAML

<StackPanel x:Name="LayoutRoot" Background="White">

  <CheckBox x:Name="ShowAccessibleUICheckBox" Click="ShowAccessibleUICheckBox_Click">
    Show Accessible UI
  </CheckBox>

  <UserControl x:Name="ContentBlock">
    <local:ContentPage/>
  </UserControl>

</StackPanel>

Visual BasicVisual Basic

Private Sub ShowAccessibleUICheckBox_Click(ByVal sender As Object,
    ByVal e As RoutedEventArgs)

    If (ShowAccessibleUICheckBox.IsChecked.Value) Then
        ContentBlock.Content = New AccessibleContentPage()
    Else
        ContentBlock.Content = New ContentPage()
    End If
End Sub

C#C#

private void ShowAccessibleUICheckBox_Click(object sender, RoutedEventArgs e)
{
    if ((sender as CheckBox).IsChecked.Value)
    {
        ContentBlock.Content = new AccessibleContentPage();
    }
    else
    {
        ContentBlock.Content = new ContentPage();
    }
}

Verificação e publicaçãoVerification and publishing

Para saber mais sobre as declarações de acessibilidade e a publicação do seu aplicativo, consulte Accessibility in the Store.For more info about accessibility declarations and publishing your app, see Accessibility in the Store.

Observação

Declarar o aplicativo como acessível somente é relevante para a Microsoft Store.Declaring the app as accessible is only relevant to the Microsoft Store.

Suporte a tecnologia adaptativa em controles personalizadosAssistive technology support in custom controls

Quando você cria um controle personalizado, recomendamos que também implemente ou estenda uma ou mais subclasses AutomationPeer para fornecer suporte à acessibilidade.When you create a custom control, we recommend that you also implement or extend one or more AutomationPeer subclasses to provide accessibility support. Em alguns casos, desde que você use a mesma classe de par que foi usada pela classe de controle de base, o suporte de automação para sua classe derivada é adequado em um nível básico.In some cases, so long as you use the same peer class as was used by the base control class, the automation support for your derived class is adequate at a basic level. Entretanto, você deve testar isso e implementar um par ainda é uma prática recomendada, dessa forma, o par pode relatar corretamente o nome da classe de sua nova classe de controle.However, you should test this, and implementing a peer is still recommended as a best practice so that the peer can correctly report the class name of your new control class. Implementar um par de automação personalizado envolve algumas etapas.Implementing a custom automation peer has a few steps involved. Para obter mais informações, consulte Pares de automação personalizados.For more info, see Custom automation peers.

Suporte a tecnologia adaptativa em aplicativos que dão suporte à interoperabilidade de XAML/Microsoft DirectXAssistive technology support in apps that support XAML / Microsoft DirectX interop

O conteúdo do Microsoft DirectX hospedado em uma interface do usuário XAML (usando SwapChainPanel or SurfaceImageSource) não é acessível por padrão.Microsoft DirectX content that's hosted in a XAML UI (using SwapChainPanel or SurfaceImageSource) is not accessible by default. XAML SwapChainPanel DirectX interop sample mostra como criar pares de Automação da Interface do Usuário para o conteúdo DirectX hospedado.The XAML SwapChainPanel DirectX interop sample shows how to create UI Automation peers for the hosted DirectX content. Essa técnica deixa o conteúdo hospedado acessível na Automação da Interface do Usuário.This technique makes the hosted content accessible through UI Automation.