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.
- 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:
- 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.
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.
- 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.
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:
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.
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”.
O site retornará o relatório com os erros e avisos:
A ferramenta também permite mais detalhes sobre os erros e avisos encontrados no site avaliado:
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.
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 sugeridas:
WebAIM ContrastChecker: https://webaim.org/resources/contrastchecker/
.png)
TPGI Colour Contrast Analyser: https://www.tpgi.com/color-contrast-checker/
Siegemedia Contrast Ratio: https://www.siegemedia.com/contrast-ratio
Para validar o contraste das cores, insira ou selecione as cores do texto (Foreground color) e do plano de fundo (Background color). Para um bom contraste entre as cores do texto e do plano de fundo,, o recomendado é o mínimo de 4,5:1. Para um contraste otimizado é recomendado o mínimo de 7:1.
O plugin da ContrastChecker também pode ser instalado no navegador e usado diretamente no site avaliado.
Organize as anotações para facilitar a visualização na hora de corrigir os erros apontados.
Sugestão:
| AVALIAÇÃO AUTOMÁTICA | |
|---|---|
| Ferramentas utilizadas: | Indique as ferramentas utilizadas na avaliação (Exemplo: access monitor, wave) |
| Páginas avaliadas: | Descreva as páginas que foram avaliadas pelas ferramentas (Exemplo: https://ppgics.icict.fiocruz.br/) |
| Nota: | Qual o nível de acessibilidade do site em termo de porcentagem? (Exemplo: 86%) |
| Seção | Erros | Avisos |
|---|---|---|
| Marcação | 7 | 24 |
| Comportamento | 1 | 2 |
| Conteúdo | 9 | 12 |
| Apresentação | 0 | 47 |
| Multimídia | 0 | 0 |
| Formulários | 1 | 1 |
| Total: | 18 | 86 |
| Quantidade | Linhas do código fonte | |
|---|---|---|
| Garantir que os objetos programáveis sejam acessíveis | 1 | 2 |
Avaliação manual
Após as validações com ferramentas automatizadas, é hora de fazer a avaliação manual.
De acordo com a W3C, a avaliação de um site é feita geralmente em cinco etapas. No entanto, adaptamos as recomendações da W3C e suprimimos uma delas.
Propomos, assim, uma avaliação manual composta por quatro etapas: 1. definir escopo da avaliação; 2. selecionar a amostra; 3. auditar a amostra; e 4. relatar conclusões.
- Definir o escopo da avaliação
Antes de iniciar a avaliação, é fundamental definir as informações sobre o site a ser avaliado. O primeiro passo proposto é definir o escopo da avaliação, determinar o objetivo da avaliação e as expectativas comuns sobre o escopo. O ideal é que sejam selecionadas páginas de diferentes estruturas.
Nessa fase também é estipulada a meta da conformidade com as diretrizes WCAG: níveis A, AA ou AAA.
- O nível A é considerado essencial, e todas as páginas devem atendê-lo.
- O nível AA é considerado o ideal, e recomenda-se que todas as páginas sejam compatíveis com ele.
- O nível AAA representa o suporte especializado, sendo indicado apenas para partes específicas de sites e aplicativos web voltados para um público especializado.
Sugestão:
| Site avaliado: | < Insira o site que será avaliado> |
| Avaliadores: | <Pessoas que realizarão a avaliação> |
| Leitores de tela utilizados: | <Recomendamos os mais utilizados do mercado, como o NVDA, JAWS e Orca> |
| Navegadores: | <Os mais utilizados são: Google Chrome, Mozilla Firefox, Microsoft Edge e Safari> |
| Sistemas Operacionais: | <Sugerimos os mais utilizados do mercado: Windows, Linux e MacOS > |
| Data: | <Inclua a data que será realizada a avaliação, podendo colocar do início ao final. Ex: 18/08/2024 até 28/08/2024> |
2. Selecionar a amostra
O segundo passo consiste em selecionar uma amostra representativa. O avaliador irá definir quais páginas serão avaliadas, levando em consideração as páginas em comum, as páginas que possuem formulários, imagens dinâmicas etc.
Sugerimos que as páginas escolhidas incluam pelo menos a página inicial, uma com formulários e imagens, dando preferência às que possuam elementos diferenciados. Se forem muito similares, considere deixar algumas de fora.
3. Auditar a amostra selecionada
No terceiro passo, o avaliador irá auditar a amostra selecionada. O avaliador fará uma vistoria de todas as páginas selecionadas na etapa anterior. A auditoria deverá ser realizada seguindo os requisitos de conformidade no nível definido na primeira etapa.
4. Relatar as conclusões de avaliação
Na quarta etapa, o avaliador deverá relatar as conclusões da avaliação.
A documentação das descobertas da avaliação será construída ao longo do processo de avaliação, mesmo que sejam relatadas ao final.
Avaliação manual com usuários
Nesta fase serão selecionadas pessoas para usarem o site e verificarem se ele é acessível, ou seja, se conseguem utilizá-lo sem dificuldades.
O que avaliar?
Sugerimos o uso do checklist ABNT NBR 17225, desenvolvido pela Comissão de Estudo de Acessibilidade da Associação Brasileiras de Normas Técnicas (ABNT).
Modelo para Relatório de Avaliação de Acessibilidade
| Site avaliado: | |
| Avaliadores: | |
| Nível de conformidade: | |
| Leitores de tela utilizados: | |
| Navegadores: | |
| Sistemas Operacionais: | |
| Data: |
Avaliação automática | |
|---|---|
| Ferramentas utilizadas: | |
| Relatório: | |
| Páginas avaliadas: | |
| Nota: | |
| Seção | Erros | Avisos |
|---|---|---|
| Total: |
| Recomendações | Quantidade | Linhas no código fonte |
|---|---|---|
Avaliação do contraste |
|---|
| Observações: |
Avaliação manual |
|---|
AVALIAÇÃO COM USUÁRIOS | ||||
| Item | Sim | Não | Não se aplica | Recomendações |
| O menu de navegação é claro e acessível com seu leitor de tela? | ||||
| Você consegue acessar todas as páginas principais sem dificuldades? | ||||
| Há descrições adequadas (textos alternativos) para imagens e gráficos? | ||||
| Links e botões possuem descrições claras que indicam sua função? | ||||
| Você consegue preencher os formulários sem dificuldade? | ||||
| O site evita elementos visuais que não têm descrição acessível? | ||||
| Há informações que parecem inacessíveis ou difíceis de interpretar pelo leitor de tela? | ||||
| Alguma funcionalidade do site parece inacessível ou frustrante? | ||||
| Você encontrou barreiras significativas durante a navegação? | ||||
| Você sentiu necessidade de funcionalidades adicionais para melhorar a acessibilidade? | ||||
Conclusões
Consulte o Manual de Usuário para informações de como usar o software wiki.
