Acessibilidade Web – O Que É e Como Construir um Site Acessível?

A acessibilidade web ajuda pessoas com deficiência a navegarem por um site e a acessarem conteúdos através de ferramentas específicas, como um leitor de tela.

Ao tornar seu site acessível, você permite que mais pessoas possam interagir com ele e ter uma boa experiência, além de gerar mais tráfego para as suas páginas.

Infelizmente, apesar da Organização Mundial da Saúde (OMS) estimar que 15% da população global viva com algum tipo de deficiência, 70% dos sites verificados possuem grandes falhas em termos de acessibilidade.

Neste artigo você irá aprender mais sobre acessibilidade web e por que ela é importante. Também iremos te mostrar como construir um site acessível e testar suas páginas, ambos processos baseados em padrões internacionais da internet.

Por Que É Importante ter Acessibilidade no Design do Site?

A acessibilidade web cria oportunidades para que todas as pessoas tenham a mesma possibilidade de acesso a uma plataforma digital.

Além disso, a acessibilidade promove uma melhor experiência do cliente, impulsionando suas estratégias de SEO (Search Engine Optimization). Isso significa que um site mais acessível estará melhor posicionado no ranking dos resultados do Google.

O resultado é um aumento no número de visitas às suas páginas, já que o site alcançará mais pessoas.

Assim, a acessibilidade web ajuda negócios a expandirem seu alcance de mercado e a aumentarem a satisfação dos clientes.

Antes de começar a criar um design acessível em suas páginas, abaixo listamos algumas das situações que podem ser beneficiadas por um site com soluções de acessibilidade:

• Deficiências Visuais – inclui casos de baixa visão, cegueira e daltonismo. A maioria das pessoas nesses casos utiliza softwares de ampliação de tela ou leitores de tela, que fazem a leitura de textos digitais em voz alta — incluindo a descrição das imagens de uma página. Exemplos de leitores de tela são JAWS e NVDA.
• Deficiências Auditivas – refere-se a vários possíveis níveis de perda de audição, de moderada a severa. O conteúdo de áudio de um site deve incluir legendas ou uma opção de transcrição para que todos os visitantes possam compreender o conteúdo e interagir com ele.
• Deficiências Motoras – pessoas com controle motor limitado podem encontrar dificuldades no uso de mouses e touchpads. Sendo assim, muitos usuários acabam tendo que utilizar apenas o teclado. Nesses casos, podem precisar de recursos específicos, como sistemas de reconhecimento de voz e dispositivos de tecnologia assistiva.
• Deficiências Cognitivas – caracterizam-se amplamente como deficiências de aprendizagem. Para ajudar usuários a interagirem com seu site, utilize um design, navegação e layouts consistentes. A linguagem deve simples e os conteúdos criativos, podendo assumir formato de vídeo.

Note que não se trata apenas de situações de deficiências permanentes, mas também usuários que passam por limitações temporárias ou problemas situacionais de acessibilidade.

Por exemplo, algumas pessoas podem ter dificuldade em ouvir seu vídeo por estarem em um local muito movimentado e barulhento.

Padrões de Acessibilidade Web

Para garantir que seu site, aplicações web e conteúdos tenham um bom nível de acessibilidade, você deve ficar atento a diversos componentes web, como agentes de usuário e ferramentas de autoria.

Para facilitar essa tarefa, vamos indicar as diretrizes e especificações que você deve seguir para atingir os padrões internacionais de acessibilidade web.

Requisitos Legais para Acessibilidade Web

Os Estados Unidos da América introduziram o Ato dos Americanos com Deficiências (ADA), um documento com diretrizes sobre acessibilidade. Ele garante que todo indivíduo possa utilizar instalações públicas, incluindo sites. Resumidamente, esse documento torna a acessibilidade web uma exigência legal no país.

No Brasil, diversas leis e decretos foram aprovados com relação à acessibilidade web, instituindo a obrigatoriedade da inclusão de pessoas com deficiência nos ambientes web. Exemplo disso é a Lei nº 13.146, Lei Brasileira de Inclusão da Pessoa com Deficiência, sancionada em 6 de julho de 2015.

Como resultado, se você não cumprir com esses requisitos, pode enfrentar riscos jurídicos. O não cumprimento das diretrizes não é tolerado por motivos como desconhecimento ou o fato do site ainda estar em processo de desenvolvimento.

Sendo assim, implantar logo de início um design acessível e inclusivo no seu site evita possíveis processos e ajuda a construir uma boa reputação para sua marca.

Diretrizes de Acessibilidade para Conteúdo Web (WCAG)

As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) oferecem um padrão global de conteúdos acessíveis que cumprem com as obrigações legais e possibilitam a inclusão de todos os indivíduos e organizações na internet.

Fundamentalmente, essas diretrizes são direcionadas a desenvolvedores web, principalmente desenvolvedores de ferramentas de autoria web. Elas também direcionadas a todas as pessoas que desejam criar um site acessível.

Muitos países incluem em suas políticas de acessibilidade a documentação do WCAG 2.1 ou 2.0, como referências para construção de sites acessíveis, já que essas diretrizes são aprovadas como um padrão ISO.

Além disso, a versão 3.0 do guia WCAG está em processo de desenvolvimento, e quando publicada irá suportar um amplo conjunto de exigências dos usuários, aplicar uma forma holística de testagem e possibilitar uma manutenção periódica de diretrizes e conteúdos relacionados à adaptação tecnológica.

O critério de sucesso das diretrizes WCAG consiste em três níveis de conformidade:

• Nível A – indica que um site tem o nível mínimo de acessibilidade, o que significa que nem todos os usuários com deficiências conseguem navegar e compreender os conteúdos. Se uma página web não consegue atingir nem este nível mínimo, certamente não é acessível. 
• Nível AA – representa um padrão apropriado para a maioria dos sites, pois significa que as barreiras mais comuns à acessibilidade foram removidas com sucesso. 
• Nível AAA – o mais alto nível de acessibilidade listado pela WCAG. Alguns sites podem não ser capazes de atingir esse status pois não conseguem cumprir com todos os requisitos.

As exigências e padrões de acessibilidade se baseiam em quatro princípios, chamados POUR — um acrônimo em inglês para as seguintes palavras:

Perceptível

Significa que os usuários devem ser capazes de entender as informações incluídas em conteúdos web. Por exemplo, em caso de deficiências visuais, o conteúdo do site deve ser acessível para instrumentos de tecnologia assistiva, como leitores de tela.

Operável

Os usuários devem ser capazes de operar todos os componentes da interface do site, bem como navegar por ele com várias ferramentas. Por exemplo, se algum visitante tiver dificuldades em utilizar um mouse, a tecla Tab (↹) do teclado, ou os comandos de voz, devem ser suficientes para que ele navegue pelo site. 

Compreensível

Quando estiver criando conteúdos para a web, você deve fazer com que eles sejam legíveis e intuitivos, através de instruções claras e de fácil entendimento. 

Aplicar este princípio ajuda usuários a entenderem melhor o fluxo de conteúdos e estrutura do site, evitando erros e confusões.

Robusto

O conteúdo deve ser acessível por vários dispositivos de usuário, incluindo celulares, navegadores web e instrumentos de tecnologia assistiva (TA). Resumidamente, os sites não podem ditar como os usuários devem acessar seus conteúdos.

Accessible Rich Internet Applications (WAI-ARIA)

A WAI-ARIA é uma especificação técnica criada pela W3C. Ela foi inicialmente desenvolvida para garantir que o funcionamento e estrutura de conteúdos e aplicações web sejam mais acessíveis para pessoas com deficiências.

Utilizando o WAI-ARIA, um desenvolvedor web ou criador de site pode prescrever informações semânticas ao conteúdo e resolver problemas que o HTML nativo não consegue solucionar, como a melhoria da acessibilidade através do teclado.

A ARIA possui três atributos: papéis, estados e propriedades (roles, states e properties). Esses atributos ajudam os instrumentos de tecnologia assistiva a identificarem os elementos acessíveis na interface das páginas web, permitindo que os usuários interajam com tais elementos.

Por exemplo, os papéis descrevem os widgets visíveis, como cursores e barras de rolagem. Já os estados e propriedades representam o estado em que os widgets estão, como aria-haspopup para um menu.

Note que os atributos não alteram nada na página do site, exceto as informações expostas pela API de acessibilidade do navegador de internet. Essas interfaces especializadas são oferecidas por sistemas operacionais para ajudar as tecnologias de assistência a coletar informações e interagir com os elementos do site.

Há vários tipos de APIs de acessibilidade disponíveis na internet, cada uma dependendo do sistema operacional do dispositivo. Por exemplo, tem o Microsoft Active Accessibility e o Microsoft UI Automation para Windows, enquanto há o NSAccessibility para o macOS.

APIs de acessibilidade incluem uma “árvore” de objetos e informações acessíveis, chamada “árvore de acessibilidade”. Ela contém informações sobre propriedades descritivas, eventos, conteúdos textuais e acessibilidade em geral.

Como Testar a Acessibilidade de um Site?

É essencial fazer um teste de acessibilidade em seu site enquanto ele ainda está no processo de desenvolvimento. Afinal, você vai querer ver se ele está cumprindo com as obrigações aplicáveis nesse sentido.

Através de processos de testagem, muitos problemas podem ser identificados mais cedo e resolvidos de forma mais eficiente.

Há diversas ferramentas de teste na internet que te ajudam a avaliar seu site em termos de acessibilidade:

• WAVE – uma ferramenta simples e bastante popular entre desenvolvedores. Ela identifica os problemas das sessões não acessíveis e oferece soluções para corrigi-los. Além disso, o WAVE conta com informações sobre acessibilidade com ícones e indicadores de erros nas páginas do seu site.
• WebAim – utilize-o para verificar a cor de seus textos e planos de fundo, garantindo que estes componentes estão cumprindo os requisitos determinados pelos padrões WCAG. 
• NVACCESS – um leitor de tela gratuito para Windows. Ele possui um recurso de foco e destaque que ajuda os desenvolvedores web a localizarem objetos-foco na tela. Adicionalmente, os criadores do site podem ver o produto textual do leitor de tela através do visualizador de discurso.
• Axe DevTools – essa ferramenta automatizada de testes identifica e soluciona problemas de acessibilidade quando você estiver desenvolvendo seu site. A ferramenta de Teste Inteligente Guiado (IGT) permite que você complete o teste manual mais rapidamente, mesmo sem ser um especialista.

Checklist de Acessibilidade Web

Para melhorar a acessibilidade, verifique os seguintes fatores em seu site e publicações, para assim saber se ele responde às exigências descritas nas diretrizes WCAG.

Alt Text

Ao invés de apresentar as imagens, ilustrações ou gráficos incluídos em conteúdos web, os textos alternativos oferecem informações escritas aos leitores de tela. Afinal, esses conteúdos gráficos não são acessíveis para visitantes com deficiências visuais, por exemplo. 

Resumidamente, todos os usuários devem ter acesso a mesma informação, independente de terem ou não a possibilidade de visualizar imagens.

Alternativas de Áudio e Vídeo

Oferecer alternativas multimídia, como transcrições textuais ou descrições em arquivos de áudio, ajuda usuários com deficiências visuais ou auditivas a acessarem as informações contidas no seu site.

Um bom exemplo de acessibilidade nesse sentido é incluir legendas em seus conteúdos ou oferecer uma descrição de áudio e vídeo. 

Navegação

Garantir que todas as partes do site possam ser acessadas a partir de um teclado ou instrumento de tecnologia assistiva é essencial para qualquer pessoa que não utiliza um mouse para navegação na internet.

Elementos estruturais dos sites, como campos de pesquisa e sitemaps, devem possuir uma navegação lógica e intuitiva para ajudar os usuários a facilmente encontrarem o que estão buscando. 

Contraste de Cores

Usuários com baixa visão ou daltonismo podem enfrentar dificuldades para visualizar os conteúdos de seu site caso eles não estejam com um alto contraste de cores.

Por exemplo, utilizar uma cor escura para o texto e uma cor clara no plano de fundo — ou vice-versa — ajuda muito na visualização dos elementos nas páginas do site. 

De todo modo, lembre-se que os usuários possuem diferentes níveis de sensibilidade. Sendo assim, ofereça a opção de alterar a combinação de cores existente no navegador. O contraste mínimo exigido é de pelo menos 4.5:1 para textos de tamanho normal.

Formulários Acessíveis

Para ajudar usuários com alguma deficiência a entender e utilizar um formulário web, você deve garantir que há uma etiqueta ao lado do campo no qual você deseja que eles cliquem ou preencham. Esse campo pode ser, por exemplo, o campo e-mail ou nome num formulário de contato.

Ao fazer isso, você ajuda usuários que usam ferramentas de tecnologia assistiva a entender o que deve ser feito naquela sessão. 

Conteúdos em Movimento e com Flashes

Conteúdos com movimentos e flashes — como vídeos piscando — que estejam presentes em anúncios, reels e carrosséis podem ser um problema para usuários com deficiências cognitivas. Então pense em evitar esse tipo de produção.

Adicionalmente, inclua em suas páginas um limite de tempo para conteúdos que rodam em alta velocidade, garantindo que esse recurso possa ser ajustado ou desabilitado. Assim, você não confunde usuários quando estão processando as informações exibidas. 

Note que os conteúdos que piscam mais de três vezes por segundo podem causar convulsões em pessoas com transtornos de fotossensibilidade.

Texto

Ter um título descritivo em uma página na internet pode ajudar os usuários a navegarem por inúmeros sites. Afinal, os recursos tecnológicos, como leitores de tela, fazem a leitura do título da página juntamente dos conteúdos presentes nela.

Você também deve sinalizar os cabeçalhos para ajudar ainda mais a navegação dos usuários que dependem de teclados ou TA.

Algumas pessoas precisam aumentar o tamanho da fonte dos textos, e até mesmo alterar o estilo da fonte e o espaçamento entre as linhas na hora de ler um conteúdo.

Sendo assim, para tornar seu site mais acessível, é importante que você permita o recurso de zoom na área textual das páginas, sem que isso afete o formato do resto do conteúdo.

Aprendendo Mais Sobre Acessibilidade Web

Possuir conhecimentos sobre acessibilidade web vai te ajudar a criar um design de alta qualidade para o seu site, além de entender mais sobre as soluções em termos de inclusividade web.

Algumas páginas do governo federal do Brasil contam com materiais sobre acessibilidade, incluindo documentos com diretrizes, modelos e padrões legislativos. Vale a pena conferir:

• Recursos de Acessibilidade
• Material de apoio
• Ferramentas
• Referências e Modelos de Implementação

Mais cursos estão disponíveis em plataformas de aprendizado pagas, como o curso Acessibilidade: Como garantir ambientes inclusivos da Udemy, e diversas outras opções no portal de cursos de acessibilidade da Alura.

Aqui estão algumas de nossas recomendações de cursos online sobre acessibilidade web, incluindo os prós e contras de cada uma das indicações:

1. W3C

O curso de Introdução à Acessibilidade Web (em inglês) oferece conhecimentos fundamentais sobre acessibilidade digital. A página de cursos do W3C Brasil possui ainda outras opções de cursos em português, que ensinam como construir um site acessível para todo mundo, cumprindo com os padrões internacionais.

Os cursos são abertos para qualquer pessoa, incluindo estudantes, designers e demais profissionais.

Prós:

• Gratuito.
• Sem pré-requisitos.
• Vale certificado que pode ser incluído em seu currículo. 
• O curso de introdução é dividido em tópicos específicos, dos quais você pode escolher o que desejar.

Contras:

• Acesso limitado a apenas alguns materiais do curso com a versão gratuita.
• Idioma apenas em inglês no curso introdutório.

2. Coursera

A Universidade de Illinois oferece um curso de Introdução à Acessibilidade e Design Inclusivo (em inglês, com legendas). Seu conteúdo inclui em detalhes os princípios centrais de acessibilidade web e design inclusivo.

Além disso, você ainda vai aprender mais sobre TA e as diretrizes centrais na criação de um design universal. 

Esse curso é indicado para iniciantes. 

Prós:

• Legendas em Português, Espanhol, Francês, Russo e Inglês.
• Opção de teste gratuito.
• Opção de auxílio financeiro para cursar.

Contras:

• O curso completo precisa ser pago. 

3. Udacity

O curso de Acessibilidade Web do Google (em inglês), disponível no portal Udacity, oferece aulas mais técnicas sobre a construção de páginas que funcionem bem com recursos de tecnologia assistiva. Eles também têm aulas sobre o gerenciamento de focos de entrada.

Além disso, você vai aprender mais sobre linguagens de marcação. De todo modo, este curso exige certos níveis de conhecimento em programação, incluindo HTML, CSS e JavaScript. 

Prós:

• Gratuito.
• Bom para práticas mais técnicas.
• O curso mais aprofundado Full-Stack Web Developer Nanodegree Program também está disponível.

Contras:

• Apenas para usuários avançados.
• Idioma apenas em inglês.

O próprio Google conta com uma página completa sobre acessibilidade web, que inclui diversos materiais, como Iniciativas e pesquisa sobre o tema. 

Conclusão

A acessibilidade web melhora a experiência do usuário no seu site. Muitas empresas e organizações já implementaram práticas de acessibilidade web devido a diversos benefícios, que vão além da inclusividade.

Afinal, sites acessíveis têm uma maior audiência e ranqueiam melhor nas páginas de resultados dos mecanismos de pesquisa (SERPs).

Lembrando também que a acessibilidade web é uma obrigação legal. 

Além de seguir as diretrizes oficiais do WCAG, é essencial avaliar e testar seu site para evitar problemas complexos. Você pode utilizar ferramentas de análise de acessibilidade, como WAVE e WebAim, mas também pode fazer a verificação manual do seu site para saber se ele é acessível. 

Para fazer isso, preste atenção aos seguintes elementos:

• Alt text – lembre-se de sempre incluir textos alternativos nas suas imagens.
• Alternativas de Áudio e Vídeo – inclua transcrições textuais ou transcrições de áudio em vídeos. 
• Navegação – garanta que sua navegação é simples e intuitiva.
• Contraste de Cores – ofereça aos usuários algumas opções para alteração da combinação de cores.  
• Formulários Acessíveis – insira instruções claras e diretas em formulários de contato, além de incluir etiquetas em cada campo.
• Conteúdos Amigáveis – evite conteúdos que se movam em alta velocidade, que contenham flashes ou façam a tela piscar muito. 
• Texto – utilize fontes grandes no título das páginas, identifique os cabeçalhos e habilite a opção de dar zoom no texto. 

Adicionalmente, você pode fazer algum curso online para aprender mais sobre acessibilidade web. Confira os conteúdos oficiais nacionais, além de verificar as opções de cursos nas plataformas EdX, Coursera, Udemy e até no Google. 

Se você tiver questões ou dicas, não hesite em comentar na sessão de discussão abaixo. E não se esqueça de utilizar uma hospedagem de sites de qualidade para garantir o melhor desempenho possível para seu site.