Guia de Acessibilidade Web

Guia de Acessibilidade Web

Introdução

A Lei Brasileira de Inclusão da Pessoa com Deficiência (LBI) estabelece que a acessibilidade é condição essencial para que pessoas com deficiência ou mobilidade reduzida possam utilizar, com segurança e autonomia, os diversos espaços, serviços e tecnologias disponíveis na sociedade, incluindo os meios de comunicação e informação (LBI, 2015). Isso implica que a acessibilidade não se limita apenas ao ambiente físico, devendo estar presente também no mundo digital, garantindo que todos tenham acesso igualitário às ferramentas e plataformas virtuais de forma autônoma e segura.

No contexto da acessibilidade digital, eliminar barreiras na web torna-se uma prioridade. Esse conceito propõe que sites e portais sejam projetados de forma que todas as pessoas, independentemente de suas limitações físico-motoras, perceptivas, culturais ou sociais, possam perceber, entender, navegar e interagir com as páginas (Leal Ferreira, 2016; WAI, 2024). Essa abordagem não só promove a inclusão, mas também amplia o alcance das informações e serviços oferecidos online, democratizando o acesso.

O objetivo da acessibilidade digital é democratizar o acesso à informação e assegurar que pessoas de perfis distintos possam navegar e compreender os conteúdos e serviços disponibilizados em plataformas digitais, pelo governo e outras entidades. Além disso, a acessibilidade digital desempenha um papel fundamental na inclusão social (Sousa, 2011), permitindo que pessoas com deficiência utilizem a internet para estudar, trabalhar e se relacionar, sem a necessidade de deslocamento.

Por fim, páginas web acessíveis beneficiam não apenas pessoas com deficiência, mas melhoram a experiência de todos os usuários, incluindo pessoas idosas e indivíduos com menor habilidade no uso de tecnologias digitais. Páginas acessíveis tendem a ser mais bem indexadas por mecanismos de busca, compatíveis com uma maior variedade de dispositivos e mais rápidas e intuitivas de navegar, contribuindo, assim, para um ambiente digital mais inclusivo e eficiente.

Objetivo

Este documento propõe um modelo para avaliar a acessibilidade dos sites do Icict, com o objetivo de apoiar os desenvolvedores web na adoção de práticas acessíveis em seus projetos.

Conforme orientações do World Wide Web Consortium (W3C), consórcio que define os padrões da web e o Guia de Boas Práticas para Acessibilidade Digital, a avaliação de acessibilidade de um site deve conciliar a avaliação automática com a avaliação manual [WAI 2023; BRASIL 2023].

A avaliação automática de acessibilidade utiliza ferramentas recomendadas pelo W3C, verificando padrões técnicos como a estrutura do código e o contraste de cores. Já a avaliação manual envolve especialistas em acessibilidade e pessoas com deficiência, visando identificar erros que as ferramentas automáticas não detectam. A combinação das duas abordagens aprimora os resultados e reduz a chance de problemas passarem despercebidos [Barros et al 2024].

• É importante ressaltar que, embora existam diretrizes e etapas que podem ser seguidas em avaliações de acessibilidade, não há uma metodologia única e universal para realizar testes para avaliação de acessibilidade. Diante disso, este documento apresenta uma proposta de avaliação de acessibilidade na web, detalhando as etapas do processo com base em referências da literatura e em experiências práticas adquiridas durante a avaliação de sites da instituição por especialistas.

As pessoas envolvidas no projeto de desenvolvimento de um site, também participam da implementação da sua acessibilidade. Para ilustrar melhor esse processo, listamos os principais atores envolvidos na implementação da acessibilidade de um site, segundo o Guia da Boas Práticas para Acessibilidade Digital (2023) do Governo Federal.

• Gerente de projetos:  é quem garante que a acessibilidade seja requisito de qualquer produto, desde a fase inicial do projeto;
• Conteudista: quem cria e publica o conteúdo acessível, utilizando a terminologia adequada para se referir às pessoas com deficiência;
• Designer: é quem pensa na estrutura e na programação visual do site, o que o tornará inclusivo ou não;
• Desenvolvedor: é quem implementa e verifica os recursos de acessibilidade no site.

Como o foco deste material é apoiar profissionais da área de desenvolvimento, daremos destaque ao papel que essas pessoas desempenham na avaliação de acessibilidade de um site

Recomendações e boas práticas

Para desenvolvedores

Para ajudar os desenvolvedores e pessoas que produzem conteúdo na web a adotarem práticas acessíveis, deixamos aqui algumas recomendações, baseadas nas diretrizes de acessibilidade da WCAG.

É importante lembrar que o site deve incluir, desde sua concepção, recursos de acessibilidade como alto contraste, botões para ajuste de tamanho de fonte e a integração da suíte VLibras ). Esses elementos devem ser planejados desde layout inicial e validados pela equipe do projeto durante as etapas de desenvolvimento.

1. Estrutura e navegação
   • Utilize cabeçalhos adequados (H1, H2, H3 etc.) no código HTML para organizar o conteúdo de forma hierárquica e facilitar a navegação.  
   • Inclua um título principal (H1) em todas as telas para descrever claramente sua finalidade. Ex:

Fonte: https://www.accessguide.io/guide/info-structure-relationships Imagem traduzida pelo ChatGpt

• Inclua uma navegação clara e consistente em todas as páginas do seu site, facilitando a localização do conteúdo desejado.
• Use links com descrições claras e significativas, que permitam ao usuário entender para onde será direcionado antes de clicar. Evite expressões genéricas como "clique aqui" ou "saiba mais"; prefira textos de link que indiquem o conteúdo acessado.
• Use design responsivo, garantindo que o site funcione bem em diferentes dispositivos, como desktop, notebooks, tablets e smartphones.
• Disponibiliza controles acessíveis para que o usuário possa controlar, garantindo que o conteúdo seja lido corretamente por leitores de tela ou acessado por diferentes formas de interação.
  

1. 2. Texto e conteúdo

• Utilize cores com bom contraste entre o texto e o fundo para tornar o conteúdo legível para pessoas com deficiência visual, pessoas idosas ou com baixa acuidade visual.  

• Forneça alternativas textuais (utilizando o atributo "alt") para todas as imagens, permitindo que pessoas com deficiência visual entendam o conteúdo visual por meio de leitores de tela.

• Evite usar somente referências visuais para transmitir informações importantes; forneça também texto descritivo ou alternativo.  

• Use linguagem clara e objetiva, evitando jargões técnicos, termos complexos ou ambíguos.  

• Na tag <html>, defina adequadamente o idioma da página para que leitores de tela utilizem a entonação correta para ler os conteúdos. Exemplo: <html lang=”pt-br”>

• Se um link estiver em outro idioma, especifique o idioma na tag de definição do link <a>.  Exemplo:  <a href= “www.teste.com” lang=’en’> Whatsapp </a>

• Ao definir uma mensagem de erro, apresente dicas sobre como corrigi-lo. Utilize imagens de texto apenas quando elas tiverem um aspecto decorativo, sem que sejam essenciais para compreensão do conteúdo (como marcas e logotipos).  

3. Formulários e interação

• Forneça rótulos claros e descritivos para os campos de formulário, facilitando a compreensão do objetivo de cada campo.  

• Verifique se os formulários são navegáveis por teclado ou interação via toque, permitindo que todas as pessoas possam preenchê-los sem problemas.  

• Disponibilize instruções claras e contextuais em cada etapa do processo interativo, como o preenchimento de um formulário ou a solicitação de um serviço .serviço.  

• Evite o uso exclusivo de cores para indicar erros ou avisos importantes; forneça também mensagens de erro claras e texto descritivo.  

• Garanta que os elementos interativos, como botões e formulários, sejam acessíveis por meio de teclado e interação via toque.  

Ao definir um feedback de erro, deixe claro na mensagem qual foi o elemento do formulário que gerou o erro de forma visual e audível. Exemplo de formato de feedback: Mudança de cor no elemento + ícone de alerta + mensagem de texto. 

* Fonte: Site do Icict

4. Padrão HTML e CSS

• As folhas de estilo em cascata, CSS, possibilitam modificar as características de exibição e estilo de elementos HTML. É necessária a criação de um estilo de apresentação consistente em todas as páginas. Além disso, é preciso ter atenção para que sejam adotadas técnicas de CSS acessíveis.  

• Prefira folhas de estilo externas, evitando o uso de estilo inline Utilize a marcação HTML nativa para fornecer o conteúdo e significado semânticos necessários, e apenas depois aplique CSS para aprimorar e alterar os estilos-padrão.

5. Testes e conformidade

• Realize testes de acessibilidade em seu site utilizando ferramentas automatizadas, como Lighthouse, Access Monitor, Avaliador do MWPT ou WAVE, além de testes manuais para garantir uma experiência acessível.  

• Siga as diretrizes de acessibilidade, como as estabelecidas pelas WCAG (Web Content Accessibility Guidelines) .  

• Mantenha o conteúdo do site sempre atualizado com as melhores práticas de acessibilidade Sempre que possível faça testes com usuários para garantir que o site esteja acessível.

Para gerência de projeto

A acessibilidade deve ser pensada desde as etapas iniciais da concepção do site, para evitar retrabalho e minimizar o máximo possível a necessidade de correções posteriores.

Recomenda-se que a pessoa responsável pela gestão do projeto considere o conceito do desenho universal;,universal; adote uma cultura da acessibilidade em suas práticas; e envolva pessoas com deficiência em todas as etapas de desenvolvimento.  

Além disso, cabe à gerência de projeto:  

• Incluir requisitos de acessibilidade no termo de referência para contratação de serviços de desenvolvimento de sites;

• Acompanhar o andamento das atividades;

• Avaliar as entregas realizadas;

• Acompanhar a avaliação de acessibilidade do site, com participação de especialistas e usuários com deficiência.

Para conteudistas

A pessoa conteudista é responsável pela criação de conteúdo claro, acessível e inclusivo. Seu trabalho vai além de redigir textos: trata-se de construir caminhos para que todas as pessoas possam acessar e compreender a informação.

O conteudista é responsável por fazer com que a informação não apenas exista, mas seja verdadeiramente acessível — com linguagem direta e objetiva e estrutura lógica e descrições significativas. Cada palavra, cada alternativa textual (como alt text em imagens), cada hierarquia de títulos é uma decisão que pode abrir ou fechar portas.

Um conteúdo acessível deve ser pensado  desde a origem para ser consumido de formas diferentes: lido por leitores de tela, compreendido por pessoas com deficiência cognitiva, traduzido por ferramentas. Tornando, assim, na prática, a informação como um direito de todos.

Além disso, o conteudista deve garantir que o material seja acessível para diferentes públicos, considerando a diversidade de quem o acessa. Para isso, é importante disponibilizar versões em formatos acessíveis, como PDFs estruturados, apresentações acessíveis e textos em linguagem simples.

Para isso, recomendamos os documentos orientadores para pessoas que produzem conteúdo:

• ORIENTAÇÕES GERAIS SOBRE ACESSIBILIDADE E INCLUSÃO PARA PROFISSIONAIS DE COMUNICAÇÃO.

• ACESSIBILIDADE NAS MÍDIAS SOCIAIS PARA PESSOAS COM DEFICIÊNCIA VISUAL

Para designers

O designer desempenha um papel importante na construção da experiência do usuário, atuando como elo entre o conteúdo e quem o acessa. Ele não apenas determina a clareza visual e a organização da informação, mas também certifica que as interfaces sejam intuitivas e utilizáveis por todas as pessoas.  

Um design acessível vai além da estética:  é a base para uma navegação fluida e uma interação sem barreiras, traduzindo princípios de inclusão em soluções concretas. O design bem-feito elimina ambiguidades e promove a equidade digital, demonstrando compromisso com a diversidade humana.

• Recomendações de acessibilidade para o uso de textos em cards (imagens) em redes sociais.

Proposta de modelo para avaliação da acessibilidade de um site 

Avaliação automática

Inicialmente, indicamos a realização da avaliação automática com ferramentas automatizadas. O ideal é fazer essa avaliação utilizando pelo menos duas ferramentas.

Ferramentas sugeridas:

AccessMonitor: https://accessmonitor.acessibilidade.gov.pt/

Wave: https://wave.webaim.org/extension/

Para realizar a avaliação automática coloque o link do site a ser avaliado no espaço indicado e clique em “validar”.

Figura 5 - Site Access Monitor

O site retornará o relatório com os erros e avisos:

Figura 6 - Relatório de práticas de acessibilidade AccessMonitor

A ferramenta também permite mais detalhes sobre os erros e avisos encontrados no site avaliado:

Figura 7 - Relatório de avaliação práticas de acessibilidade

O resultado da avaliação automática pode servir para guiar o desenvolvedor para seguir para a avaliação manual, direcionando o que pode ser prioridade para o que deve ser avaliado.

Avaliação do contraste de cores

Após a validação do código, verifique as cores utilizadas no site.  

Ferramentas sugerida:

MediaWiki foi instalado.

Consulte o Manual de Usuário para informações de como usar o software wiki.

Começando

• Lista de opções de configuração
• FAQ do MediaWiki
• Lista de discussão com avisos de novas versões do MediaWiki
• Traduza o MediaWiki para seu idioma