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

A Web está repleta de web sites, aplicações e interfaces de utilizador dinâmicos e complexos criados com uma combinação de HTML, CSS e JavaScript. No entanto, quando concebidos e criados sem acessibilidade em mente, estes sites complexos são difíceis de utilizar por pessoas que dependem de tecnologias de apoio para navegar na Web.

A criação de sites acessíveis a pessoas portadoras de deficiência requer informações semânticas sobre a interface de utilizador. Os sites acessíveis permitem que tecnologias de apoio, como leitores de ecrã, transmitam as informações necessárias para ajudar as pessoas com várias capacidades a utilizar o site.

Visite HTML5Acessibilidade para obter informações sobre quais as novas funcionalidades HTML5 suportadas de forma acessível pelo Microsoft Edge.

Como funciona a acessibilidade

As tecnologias de apoio adicionam capacidades que os computadores normalmente não têm. Por exemplo, um utilizador com dificuldades de visão pode utilizar o teclado em combinação com tecnologia de apoio, como um leitor de ecrã, em vez de utilizar diretamente o browser com o rato e o ecrã.

Para aplicações em plataformas Microsoft e na Web, a tecnologia de apoio interage com qualquer combinação de:

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

Para programadores Web, determinados elementos HTML são mapeados para Automação da Interface do Usuário objetos, pelo que, ao selecionar esses elementos HTML, o programador pode utilizar as propriedades de acessibilidade e os eventos incorporados nesses elementos. Ao desenvolver o seu site, normalmente só tem de se certificar de que a API está escrita corretamente ou que o elemento adequado é especificado para que a aplicação esteja acessível.

Consulte Automatização de IU e ARIA no Microsoft Edge para obter mais informações. As aplicações Plataforma Universal do Windows (UWP) acessíveis são explicadas em Acessibilidade no Windows Dev Center.

Muitos problemas comuns de acessibilidade com conteúdo dinâmico podem ser resolvidos através de uma boa prática de codificação. A documentação do WCAG 2.0 inclui muitas técnicas e melhores práticas para o ajudar a criar aplicações Web dinâmicas mais acessíveis. No entanto, mesmo quando codificado corretamente, o conteúdo dinâmico não é necessariamente acessível. As Aplicações Avançadas de Internet (ARIA) acessíveis ajudam a resolver este problema.

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

ARIA

A especificação ARIA (Accessible Rich Internet Applications) da Iniciativa de Acessibilidade Web do W3C define como uma sintaxe para tornar o conteúdo Web dinâmico e interfaces de utilizador personalizadas acessíveis a todas as pessoas. O ARIA expande o HTML através de atributos adicionais (funções, propriedades e estados) que foram concebidos para transmitir semântica personalizada. Estes atributos são utilizados pelos browsers para transmitir o estado e a função dos controlos à API de acessibilidade.

Funções, propriedades e estados

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

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

Os estados e propriedades do ARIA são atributos com prefixo de ária 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. Alterar uma propriedade afeta o significado do objeto.

No exemplo abaixo, a propriedade aria-haspopup="true" é definida num <li> item de menu para significar que 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 utilizador com o objeto, como ocultação de ária ou verificação de ária. Por exemplo, o estado aria-checked="false" no exemplo abaixo representa que a caixa de verificaçã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, aceda a O Modelo de Funções no W3C.

Teste de compatibilidade de tecnologia de apoio

Verificar se o site que está a criar funciona com tecnologias de apoio reais é a melhor forma de garantir que proporciona uma boa experiência aos utilizadores portadores de deficiência. Uma vez que muitas tecnologias de apoio utilizam o teclado, testar a acessibilidade do teclado do seu site é um bom ponto de partida.

Os testes de compatibilidade de teclado validam que os utilizadores têm acesso a todos os controlos interativos sem necessidade de um rato. O Microsoft Accessibility Insights para Web é uma extensão de browser para o Microsoft Edge e Chrome que o guia e revela vários problemas comuns.

Assim que tiver a certeza de que o seu site funciona bem com um teclado, experimente-o com outras tecnologias de apoio, como leitores de ecrã. Este teste pode descobrir problemas no seguinte:

• O seu HTML, ARIA e CSS.
• O nível de suporte de uma tecnologia de apoio para uma funcionalidade ou técnica.

Diferentes browsers podem mapear elementos para as APIs de acessibilidade da plataforma de forma diferente das que o Microsoft Edge os mapeia. Ao criar a interface, é importante considerar cada diferença.

O WebAIM realiza inquéritos com leitores de ecrã e utilizadores de visão reduzida que o ajudam a decidir quais as tecnologias de apoio e browsers a testar.

Aprender a testar

As tecnologias de apoio são ferramentas sofisticadas. Não suponha que pode começar imediatamente a testar com uma tecnologia de apoio sem aprender primeiro como funciona. Aprender a testar com um leitor de ecrã tem uma curva de aprendizagem especialmente acentuada. Um utilizador principiante de leitores de ecrã pode pensar que um leitor de ecrã tem um erro, enquanto o problema pode ser um erro ao utilizar o leitor de ecrã.

Os testes com Leitores de Ecrã na WebAIM fornecem mais informações sobre como aprender a testar com tecnologias de apoio.

Testar localmente

A maioria dos dispositivos inclui tecnologia de apoio incorporada no SO. O Microsoft Windows inclui o leitor de ecrã do Narrador do Windows e a Lupa do Windows. As tecnologias de apoio de terceiros, como NVDA, FreedomscientificSoftwareJaws e ZoomText , estão disponíveis para transferência. O macOS da Apple inclui o leitor de ecrã VoiceOver . Além disso, o iOS, Android e Linux suportam uma variedade de tecnologias de apoio.

Testar em máquinas virtuais e emuladores

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

O Android Studio inclui um emulador que lhe vai permitir testar tecnologias de apoio no Android Accessibility Suite. Siga as instruções para configurar um dispositivo virtual , iniciar o emulador e, em seguida, instalar o Android Accessibility Suite a partir da Loja GooglePlay.

Ferramentas de teste baseadas na cloud

Se uma tecnologia de apoio não estiver disponível no seu SO ou não for possível instalar uma numa máquina virtual ou emulador, as ferramentas de teste de tecnologia de apoio com base na cloud são a melhor opção a seguir.

• O Assistiv Labs (um produto comercial) permite-lhe testar manualmente com tecnologias de apoio através de qualquer browser moderno. Selecione uma tecnologia de apoio e um browser e este liga-o a uma máquina virtual, emulador ou dispositivo real com o qual possa interagir.

Veja também Emuladores e simuladores baseados na cloud.

Recursos para noções básicas de acessibilidade

Estes são projetos e iniciativas de acessibilidade.

O projeto A11Y

O Projeto A11Y é um esforço orientado pela comunidade para facilitar a acessibilidade na Web. Consulte o site do Projeto A11Y para saber mais sobre os princípios básicos de acessibilidade, o padrão acessível e a biblioteca de widget e os respetivos recursos sobre software de acessibilidade, blogues, livros e ferramentas.

Web Accessibility Initiative (WAI)

A W3C Web Accessibility Initiative (WAI) é um esforço para ajudar a melhorar a acessibilidade da Web. O respetivo site fornece uma variedade de recursos para Introdução com Acessibilidade Web, Design para Inclusão, tutoriais e apresentações, entre outros.

Blogues de acessibilidade

Estes são blogues sobre acessibilidade.

TPGi, LLC

A TPGi, LLC fornece soluções de consultoria e tecnologia a organizações de todo o mundo para garantir que os seus clientes alcancem todos os públicos de forma eficaz e eficiente, ao mesmo tempo que cumprem os padrões governamentais e internacionais. O blogue aborda tópicos como as melhores práticas de acessibilidade Web, ferramentas de acessibilidade e tendências de acessibilidade.

Nivelar Acesso

O Level Access é uma empresa de acessibilidade digital que suporta os seus clientes no desenvolvimento e implementação de produtos e serviços acessíveis. O blogue aborda tópicos como as melhores práticas da 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 as aplicações Web modernas com preocupações de acessibilidade ao simplificar a acessibilidade. Para obter mais informações, aceda a ally.js - Tutoriais.

Exemplos de OpenAjax

A OpenAjax Alliance é um excelente recurso para verificar as regras para a 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, descrições e muito mais. Para obter mais informações, aceda a Padrões.

Técnicas e ferramentas de acessibilidade

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

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

Obtenha orientações sobre como criar ícones de extensões acessíveis para o Microsoft Edge. Para obter mais informações, aceda a Acessibilidade: Criar í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 W3C explica como os browsers determinam o nome e as descrições de objetos acessíveis a partir de idiomas de conteúdo Web e os expõem em APIs de acessibilidade. Para obter mais informações, aceda a Nome Acessível e Descrição: Computação e Mapeamentos 1.1.

Recursos de Avaliação de Acessibilidade

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

Testes de compatibilidade de tecnologia de apoio

Resultados de testes que mostram como diferentes tipos de conteúdo e padrões se comportam em tecnologias de apoio (AT), como leitores de ecrã. Para obter mais informações, aceda a Testes de compatibilidade de tecnologia de apoio.

Criar sites acessíveis tornou-se muito mais fácil

Esta publicação de blogue de Ferramentas e Desenvolvimento Web .NET descreve o Verificador de Acessibilidade Web da extensão do Visual Studio. Para obter mais informações, aceda a Criar sites acessíveis.

Mapeamentos da API de Acessibilidade Principal 1.1

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

Verificações Fáceis – Uma Primeira Revisão da Acessibilidade Web

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

Como Conhecer o WCAG 2.0

Uma referência rápida aos requisitos e técnicas das Diretrizes de Acessibilidade de Conteúdos Web (WCAG) 2.0 (critérios de êxito). Para obter mais informações, aceda a Como Conhecer o WCAG 2.0.

Mapeamentos de API de Acessibilidade HTML 1.0

Este documento de mapeamentos W3C explica como os atributos e o elemento HTML5.1 mapeiam para as APIs de acessibilidade da plataforma. Para obter mais informações, aceda a Html Accessibility API Mappings 1.0 (Mapeamentos de API de Acessibilidade HTML 1.0).

Sugestões Rápidas

Uma lista de sugestões de desenvolvimento Web rápidas para acessibilidade pelo Projeto A11Y. Para obter mais informações, aceda a Sugestões Rápidas.

Análise do Site

A ferramenta Análise de Sites no Centro de Microsoft Edge Dev verifica se há bibliotecas desatualizadas, problemas de esquema e problemas de acessibilidade. Para obter mais informações, aceda a Análise de Sites.

Técnicas para WCAG 2.0

Técnicas do W3C que fornecem orientação para programadores Web sobre como cumprir os critérios de êxito das Diretrizes de Acessibilidade de Conteúdos Web (WCAG) 2.0 . Para obter mais informações, aceda a Técnicas para WCAG 2.0.

Sugestões sobre o Desenvolvimento para Acessibilidade Na Web

Sugestões do W3C sobre o desenvolvimento de conteúdos Web mais acessíveis para pessoas portadoras de deficiência. Para obter mais informações, aceda a Sugestões sobre Desenvolvimento de Acessibilidade Na Web.

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

Um documento do W3C que fornece aos leitores uma compreensão de como utilizar o WAI-ARIA 1.1 e recomenda abordagens para tornar os widgets, navegação e comportamentos acessíveis através de funções, estados e propriedades WAI-ARIA. Para obter mais informações, aceda a WAI-ARIA Authoring Practices 1.1.

Diretrizes e Técnicas da WAI

Uma série de diretrizes e normas de acessibilidade Web desenvolvidas pelo WAI. Para obter mais informações, aceda a Diretrizes e Técnicas da WAI.

Lista de Ferramentas de Avaliação de Acessibilidade Web

Uma lista de ferramentas de avaliação de acessibilidade Web para ajudar a determinar se os sites cumprem as diretrizes de acessibilidade. Para obter mais informações, aceda à Lista de Ferramentas de Avaliação de Acessibilidade web.

Perspetivas de Acessibilidade Web: Explorar o Impacto e os Benefícios para Todos

Uma série de breves vídeos situacionais do W3C sobre o impacto da acessibilidade e os benefícios para todos. Para obter mais informações, aceda a Perspetivas de Acessibilidade na Web: Explorar o Impacto e os Benefícios para Todos.