Recursos sobre a criação de sites acessíveis

  • Artigo

A Web é preenchida com sites, aplicativos e interfaces de usuário dinâmicos e complexos criados usando uma combinação de HTML, CSS e JavaScript. No entanto, quando projetados e criados sem acessibilidade em mente, esses sites complexos são difíceis de usar por pessoas que dependem de tecnologias assistivas para navegar na Web.

Criar sites acessíveis para pessoas com deficiência requer informações semânticas sobre a interface do usuário. Sites acessíveis permitem que tecnologias assistivas, como leitores de tela, transmitam as informações necessárias para ajudar pessoas com uma variedade de habilidades a usar o site.

Visite HTML5Accessibility para obter informações sobre quais novos recursos HTML5 têm suporte acessível pelo Microsoft Edge.

Como funciona a acessibilidade

As tecnologias assistivas adicionam recursos que os computadores normalmente não têm. Por exemplo, um usuário com baixa visão pode usar o teclado em combinação com a tecnologia assistiva, como um leitor de tela, em vez de usar diretamente o navegador com o mouse e a tela.

Para aplicativos em plataformas microsoft e na Web, a tecnologia auxiliar interage com qualquer combinação de:

Para desenvolvedores Web, determinados elementos HTML são mapeados para objetos Automação da Interface do Usuário, portanto, ao selecionar esses elementos HTML, o desenvolvedor pode usar as propriedades de acessibilidade e os eventos integrados a esses elementos. Ao desenvolver seu site, você geralmente só precisa ter certeza de que a API está corretamente escrita ou se o elemento apropriado está especificado, para que o aplicativo seja acessível.

Confira automação de ARIA e interface do usuário no Microsoft Edge para obter mais informações. Aplicativos de Plataforma Universal do Windows acessíveis (UWP) são explicados na Acessibilidade no Centro de Desenvolvimento do Windows.

Muitos problemas comuns de acessibilidade com conteúdo dinâmico podem ser resolvidos por uma boa prática de codificação. A documentação do WCAG 2.0 inclui muitas técnicas e práticas recomendadas para ajudar você a criar aplicativos Web dinâmicos mais acessíveis. Mesmo quando codificado corretamente, no entanto, o conteúdo dinâmico não é necessariamente acessível. Aplicativos de Internet avançados acessíveis (ARIA) ajuda a superar esse problema.

Para obter mais informações sobre acessibilidade da Web, marcar a Introdução à Acessibilidade da Web pela WAI (Iniciativa de Acessibilidade Web).

ARIA

A especificação ARIA (Aplicativos de Internet Avançadas Acessíveis) da Iniciativa de Acessibilidade Da Web do W3C define como uma sintaxe para tornar o conteúdo dinâmico da Web e interfaces de usuário personalizadas acessíveis a todas as pessoas. O ARIA estende o HTML usando atributos adicionais (funções, propriedades e estados) que são projetados para transmitir semântica personalizada. Esses atributos são usados pelos navegadores para transmitir o estado e a função dos controles para a API de acessibilidade.

Funções, propriedades e estados

As funções ARIA são definidas em elementos usando o atributo de função para fornecer informações de APIs de acessibilidade e tecnologias assistivas sobre o elemento. Por exemplo, o elemento abaixo <li> é atribuído role="menuitem" para significar que ele é um item em um menu.

<li role="menuitem">Home</li>

Estados e propriedades ARIA são atributos prefixados por aria que fornecem informações específicas sobre um objeto para ajudar a formar a definição da natureza das funções. As propriedades são atributos essenciais para a natureza de um objeto, como aria-readonly e aria-haspopup. A alteração de uma propriedade afeta o significado do objeto.

No exemplo abaixo, a propriedade aria-haspopup="true" é definida em um <li> item de menu para significar que ela tem um pop-up:

<li role="menuitem" aria-haspopup="true">Open</li>

Os estados não alteram a natureza do objeto, mas representam informações associadas ao objeto ou à interação do usuário com o objeto, como aria-hidden ou aria-checked. Por exemplo, o estado aria-checked="false" no exemplo abaixo representa que a caixa de seleção está desmarcada, em vez de selecionada:

<div role="checkbox" aria-checked="false">Accept</div>

Para ver uma lista completa de funções, propriedades e estados, acesse O Modelo de Funções no W3C.

Teste de compatibilidade com tecnologia assistiva

Verificar se o site que você está criando funciona com tecnologias auxiliares reais é a melhor maneira de garantir que você forneça uma boa experiência para usuários com deficiência. Como muitas tecnologias auxiliares usam o teclado, testar a acessibilidade do teclado do seu site é um bom lugar para começar.

O teste de compatibilidade do teclado valida que os usuários têm acesso a todos os controles interativos sem exigir um mouse. O Microsoft Accessibility Insights para Web é uma extensão de navegador para Microsoft Edge e Chrome que orienta você e revela vários problemas comuns.

Depois de ter certeza de que seu site funciona bem com um teclado, experimente-o com outras tecnologias assistivas, como leitores de tela. Este teste pode descobrir problemas no seguinte:

  • Seu HTML, ARIA e CSS.
  • O nível de suporte de uma tecnologia assistiva para um recurso ou técnica.

Diferentes navegadores podem mapear elementos para as APIs de acessibilidade da plataforma de forma diferente das mapeadas pelo Microsoft Edge. Ao criar sua interface, é importante considerar cada diferença.

O WebAIM realiza pesquisas com leitor de tela e usuários de baixa visão que ajudam você a decidir quais tecnologias e navegadores auxiliares testar.

Aprendendo a testar

As tecnologias auxiliares são ferramentas sofisticadas. Não suponha que você seja capaz de iniciar imediatamente o teste com uma tecnologia assistiva sem primeiro saber como ela funciona. Aprender a testar com um leitor de tela tem uma curva de aprendizado especialmente íngreme. Um usuário novato de leitores de tela pode pensar que um leitor de tela tem um bug, enquanto o problema pode realmente ser um erro ao usar o leitor de tela.

O teste com leitores de tela na WebAIM fornece mais informações sobre como aprender a testar com tecnologias auxiliares.

Testar localmente

A maioria dos dispositivos inclui tecnologia assistiva que é interna para o sistema operacional. O Microsoft Windows inclui o leitor de tela do Narrador do Windows e a Lupa do Windows. Tecnologias assistenciais de terceiros como NVDA, FreedomscientificSoftwareJaws e ZoomText estão disponíveis para download. O macOS da Apple inclui o leitor de tela VoiceOver . E iOS, Android e Linux dão suporte a uma variedade de tecnologias assistivas.

Teste em máquinas virtuais e emuladores

Em macOS, se você quiser testar com uma tecnologia assistiva disponível apenas para Windows, como o Narrador do Windows ou o NVDA, crie uma máquina virtual do Windows.

O Android Studio inclui um emulador que para você testar tecnologias assistivas no Android Accessibility Suite. Siga as instruções para configurar um dispositivo virtual e iniciar o emulador e, em seguida, instalar o Android Accessibility Suite na loja GooglePlay.

Observação

No momento, o Simulador do iOS não inclui o VoiceOver.

Ferramentas de teste baseadas em nuvem

Se uma tecnologia assistiva não estiver disponível no sistema operacional ou não for possível instalar uma em uma máquina virtual ou emulador, as ferramentas de teste de tecnologia assistida baseadas em nuvem serão a próxima melhor coisa.

  • O Assistiv Labs (um produto comercial) permite que você teste manualmente com tecnologias auxiliares por meio de qualquer navegador da Web moderno. Selecione uma tecnologia e um navegador auxiliares e ele o conecta a uma máquina virtual, emulador ou dispositivo real com o qual você pode interagir.

Consulte também emuladores e simuladores baseados em nuvem.

Recursos para noções básicas de acessibilidade

São projetos e iniciativas para acessibilidade.

O projeto A11Y

O Projeto A11Y é um esforço orientado pela comunidade para facilitar a acessibilidade da Web. Confira O site do Projeto A11Y para saber mais sobre princípios básicos de acessibilidade, seu padrão acessível e biblioteca de widget e seus recursos em software de acessibilidade, blogs, livros e ferramentas.

WAI (Iniciativa de Acessibilidade Da Web)

A WAI (Iniciativa de Acessibilidade Web) do W3C é um esforço para ajudar a melhorar a acessibilidade da Web. Seu site fornece uma variedade de recursos para Introdução com Acessibilidade da Web, Design para Inclusão, tutoriais e apresentações e muito mais.

Blogs de acessibilidade

São blogs sobre acessibilidade.

TPGi, LLC

TPGi, LLC fornece soluções de consultoria e tecnologia para organizações em todo o mundo para garantir que seus clientes alcancem todos os públicos de forma eficaz e eficiente, ao mesmo tempo em que atendem aos padrões governamentais e internacionais. Seu blog aborda tópicos como práticas recomendadas de acessibilidade da Web, ferramentas de acessibilidade e tendências de acessibilidade.

Acesso de Nível

O Level Access é uma empresa de acessibilidade digital que dá suporte a seus clientes no desenvolvimento e implantação de produtos e serviços acessíveis. Seu blog aborda tópicos como práticas recomendadas do ARIA, tendências de acessibilidade, webinars e muito mais.

Exemplos acessíveis

São bibliotecas e exemplos de acessibilidade.

ally.js – Tutoriais

Biblioteca JavaScript para ajudar aplicativos Web modernos com preocupações de acessibilidade, tornando a acessibilidade mais simples. Para obter mais informações, acesse ally.js – Tutoriais.

Exemplos do OpenAjax

O site da OpenAjax Alliance é um excelente recurso para verificar as regras para WAI-ARIA e fornece uma série de exemplos de implementações WAI-ARIA.

Padrões

O Projeto A11Y oferece uma biblioteca de widgets e padrões acessíveis, como menus, botões, dicas de ferramentas e muito mais. Para obter mais informações, acesse Padrões.

Técnicas e ferramentas de acessibilidade

São técnicas e ferramentas para melhorar a acessibilidade.

Acessibilidade: criando ícones de extensão acessíveis para o Microsoft Edge

Obtenha diretrizes sobre como criar ícones de extensões acessíveis para o Microsoft Edge. Para obter mais informações, acesse Acessibilidade: criando ícones de extensão acessíveis para o Microsoft Edge.

Nome e descrição acessíveis: computação e mapeamentos 1.1

Este documento de mapeamento do W3C explica como os navegadores determinam nome e descrições de objetos acessíveis de linguagens de conteúdo da Web e os expõem em APIs de acessibilidade. Para obter mais informações, acesse Nome Acessível e Descrição: Computação e Mapeamentos 1.1.

Recursos de avaliação de acessibilidade

Recursos de avaliação de acessibilidade é um recurso de várias páginas do W3C que descreve diferentes abordagens para avaliar sites para acessibilidade. Para obter mais informações, acesse Recursos de Avaliação de Acessibilidade.

Testes de compatibilidade de tecnologia assistiva

Resultados de teste mostrando como diferentes tipos de conteúdo e padrões se comportam em tecnologias assistivas (AT) como leitores de tela. Para obter mais informações, acesse testes de compatibilidade de tecnologia assistiva.

Criar sites acessíveis ficou muito mais fácil

Esta postagem do blog .NET Web Development and Tools descreve o Verificador de Acessibilidade Web da extensão do Visual Studio. Para obter mais informações, acesse Criar sites acessíveis ficou muito mais fácil.

Mapeamentos principais da API de Acessibilidade 1.1

Este documento de mapeamento W3C explica como a semântica dos idiomas de conteúdo da Web é exposta a APIs de acessibilidade. Para obter mais informações, acesse Mapeamentos da API de Acessibilidade Principal 1.1.

Verificações fáceis – uma primeira revisão da acessibilidade da Web

Uma série de verificações rápidas pela WAI que ajudam você a avaliar a acessibilidade de uma página da Web. Para obter mais informações, acesse Verificações Fáceis – Uma Primeira Revisão da Acessibilidade da Web.

Como atender ao WCAG 2.0

Uma referência rápida aos requisitos e técnicas das Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) 2.0 (critérios de êxito). Para obter mais informações, acesse Como atender ao WCAG 2.0.

Mapeamentos da API de Acessibilidade HTML 1.0

Este documento de mapeamento do W3C explica como o elemento HTML5.1 e os atributos mapeiam para APIs de acessibilidade da plataforma. Para obter mais informações, acesse Mapeamentos de API de Acessibilidade HTML 1.0.

Dicas Rápidas

Uma lista de dicas rápidas de desenvolvimento da Web para acessibilidade pelo Projeto A11Y. Para obter mais informações, acesse Dicas Rápidas.

Verificação de Site

A ferramenta Verificação de Site no Centro de Microsoft Edge Dev verifica se há bibliotecas desatualizadas, problemas de layout e problemas de acessibilidade. Para obter mais informações, acesse Verificação de Site.

Técnicas para WCAG 2.0

Técnicas do W3C que fornecem diretrizes para desenvolvedores Web sobre como atender aos critérios de sucesso WCAG (Diretrizes de Acessibilidade de Conteúdo Da Web) 2.0 . Para obter mais informações, acesse Técnicas para WCAG 2.0.

Dicas sobre como desenvolver para acessibilidade da Web

Dicas do W3C sobre o desenvolvimento de conteúdo da Web mais acessíveis para pessoas com deficiência. Para obter mais informações, acesse Dicas sobre como desenvolver para acessibilidade da Web.

Práticas de criação WAI-ARIA 1.1

Um documento do W3C que fornece aos leitores uma compreensão de como usar o WAI-ARIA 1.1 e recomenda abordagens para tornar widgets, navegação e comportamentos acessíveis usando funções, estados e propriedades WAI-ARIA. Para obter mais informações, acesse Práticas de Criação WAI-ARIA 1.1.

Diretrizes e técnicas de WAI

Uma série de diretrizes e padrões de acessibilidade da Web desenvolvidos pela WAI. Para obter mais informações, acesse Diretrizes e Técnicas de WAI.

Lista de ferramentas de avaliação de acessibilidade da Web

Uma lista de ferramentas de avaliação de acessibilidade da Web para ajudar a determinar se os sites atendem às diretrizes de acessibilidade. Para obter mais informações, acesse Lista de Ferramentas de Avaliação de Acessibilidade da Web.

Perspectivas de acessibilidade da Web: explorar o impacto e os benefícios para todos

Uma série de vídeos situacionais curtos do W3C sobre o impacto da acessibilidade e os benefícios para todos. Para obter mais informações, acesse Perspectivas de Acessibilidade da Web: Explore o impacto e os benefícios para todos.