Recursos sobre como criar sites acessíveis

A web está repleta de 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 construídos sem acessibilidade em mente, esses sites complexos são difíceis de usar por pessoas que dependem de tecnologias assistivas para navegar na web.

A criação de sites acessíveis a pessoas com deficiências requer informações semânticas sobre a interface do usuário. Os 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 são acessíveis com suporte 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 uma tecnologia adaptativa, 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 adaptativa interage com qualquer combinação de:

• Automação da Interface do Usuário do Usuário.
• Um modelo de objeto específico do aplicativo, como o DOM (Modelo de Objeto do Documento) no Microsoft Edge.

Para desenvolvedores da Web, determinados elementos HTML são mapeados para objetos de 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 garantir que a API seja gravada corretamente ou que o elemento apropriado seja especificado para que o aplicativo seja acessível.

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

Muitos problemas comuns de acessibilidade com conteúdo dinâmico podem ser resolvidos por boas práticas de codificação. A documentação do WCAG 2.0 inclui muitas técnicas e práticas recomendadas para ajudá-lo 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. Os Aplicativos Avançados de Internet Acessíveis (ARIA) ajudam a superar esse problema.

Para obter mais informações sobre acessibilidade na Web, marcar a Introdução à Acessibilidade na Web pela Web Accessibility Initiative (WAI).

ARIA

A especificação ARIA (Accessible Rich Internet Applications) 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) projetados para transmitir semântica personalizada. Esses atributos são usados pelos navegadores para passar 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 role para fornecer tecnologias assistivas e APIs de acessibilidade informações sobre o elemento. Por exemplo, o elemento abaixo <li> é atribuído role="menuitem" para significar que é um item em um menu.

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

Os 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. Propriedades são atributos essenciais para a natureza de um objeto, como aria-readonly e aria-haspopup. Alterar uma propriedade afeta o significado do objeto.

No exemplo abaixo, a propriedade aria-haspopup="true" é definida em um item de <li> menu para indicar 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 a 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 marcada:

<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 de tecnologia assistiva

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

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

Quando tiver certeza de que seu site funciona bem com um teclado, experimente-o com outras tecnologias adaptativas, como leitores de tela. Esse teste pode revelar problemas no seguinte:

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

Navegadores diferentes podem mapear elementos para as APIs de acessibilidade da plataforma de maneira diferente do que o Microsoft Edge mapeia eles. Ao criar sua interface, é importante considerar cada diferença.

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

Saiba como testar

As tecnologias adaptativas são ferramentas sofisticadas. Não assuma que você é capaz de começar imediatamente a testar com uma tecnologia assistiva sem primeiro aprender sobre como ela funciona. Aprender a testar com um leitor de tela tem uma curva de aprendizado especialmente íngreme. Um usuário iniciante de leitores de tela pode pensar que um leitor de tela tem um bug, enquanto o problema pode ser um erro ao usar o leitor de tela.

Teste com leitores de tela no WebAIM fornece mais informações sobre como aprender a testar com tecnologias assistivas.

Testando localmente

A maioria dos dispositivos inclui tecnologia adaptativa integrada ao sistema operacional. O Microsoft Windows inclui o leitor de tela e a Lupa do Windows Narrador. Tecnologias adaptativas 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 suportam uma variedade de tecnologias assistivas.

Testes em máquinas virtuais e emuladores

No macOS, se você quiser testar com uma tecnologia adaptativa 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 para testar tecnologias assistivas no Android Accessibility Suite. Siga as instruções para configurar um dispositivo virtual , iniciar o emulador e instalar o Pacote de Acessibilidade para Android da GooglePlay Store.

Ferramentas de teste baseadas em nuvem

Se uma tecnologia assistiva não estiver disponível em seu sistema operacional ou se você não for possível instalá-la em uma máquina virtual ou emulador, as ferramentas de teste de tecnologia assistiva baseadas em nuvem são a próxima melhor coisa.

• O Assistiv Labs (um produto comercial) permite que você teste manualmente com tecnologias adaptativas por meio de qualquer navegador da Web moderno. Selecione uma tecnologia adaptativa e um navegador e ele conectará você 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 de acessibilidade.

O projeto A11Y

O Projeto A11Y é um esforço voltado para a comunidade para facilitar a acessibilidade na web. Confira o site do Projeto A11Y para aprender sobre os princípios básicos de acessibilidade, seus padrões acessíveis e biblioteca de widgets e seus recursos em software, blogs, livros e ferramentas de acessibilidade.

Iniciativa de Acessibilidade da Web (WAI)

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

Blogs sobre acessibilidade

Estes são blogs sobre acessibilidade.

TPGi, LLC

A 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 na web, ferramentas de acessibilidade e tendências de acessibilidade.

Nível de Acesso

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

Exemplos acessíveis

Estas 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

A OpenAjax Alliance é um excelente recurso para verificar as regras para WAI-ARIA e fornece vários 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: criação de í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 o nome e as 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 e descrição acessíveis: 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 a acessibilidade de sites. 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 e padrões de conteúdo se comportam em tecnologias assistivas (TA), como leitores de tela. Para obter mais informações, acesse Testes de compatibilidade de tecnologia adaptativa.

Criar sites acessíveis ficou muito mais fácil

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

Mapeamentos da API de Acessibilidade Principal 1.1

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

Easy Checks – Uma primeira revisão da acessibilidade na 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 na Web.

Como Atender às WCAG 2.0

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

Mapeamentos da API de acessibilidade HTML 1.0

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

Dicas rápidas

Uma lista de dicas rápidas de desenvolvimento web para acessibilidade pelo The A11Y Project. Para obter mais informações, acesse Dicas rápidas.

Varredura do Site

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

Técnicas para WCAG 2.0

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

Dicas de desenvolvimento para acessibilidade na Web

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

Práticas de autoria 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 do WAI-ARIA. Para obter mais informações, acesse WAI-ARIA Authoring Practices 1.1.

Diretrizes e técnicas da WAI

Uma série de diretrizes e padrões de acessibilidade da Web desenvolvidos pela WAI. Para obter mais informações, acesse as Diretrizes e Técnicas da 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 na Web: explore o impacto e os benefícios para todos

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