Preâmbulo

A acessibilidade na web é uma prática essencial que visa tornar os conteúdos e funcionalidades online acessíveis a todas as pessoas, independentemente das suas capacidades, deficiências ou preferências. Este guia abrangente explorará vários aspetos da acessibilidade na web, desde definições até ferramentas práticas para desenvolvedores.

Introdução

A acessibilidade na web refere-se à prática de garantir que os websites sejam acessíveis a todos, promovendo a plena participação na sociedade digital. Esta abordagem não só cumpre requisitos legais, como também contribui para uma experiência online inclusiva para todos os utilizadores.

Normas Técnicas e Regulamentos para Acessibilidade na Web

Normas técnicas, como a EN301549 e as Web Content Accessibility Guidelines (WCAG) 2.1, fornecem recomendações abrangentes para melhorar a acessibilidade da web. As Web Content Accessibility Guidelines (WCAG) estabelecem princípios fundamentais como Perceptível, Operável, Compreensível e Robusto. Estas normas servem de base para garantir que os sites cumprem critérios aceitáveis.

Regulamentos como o EU Accessibility Act, ADA e WCAG são fundamentais para garantir a conformidade e acessibilidade globais. Estes regulamentos abrangem diferentes jurisdições e têm um impacto significativo na acessibilidade dos websites.

Normas Técnicas:

1. EN301549:
   • Data de Criação: EN301549 é uma norma europeia que se originou no Instituto Europeu de Normas de Telecomunicações (ETSI). Foi publicada inicialmente em 2014.
   • Cobertura: EN301549 é uma norma europeia e foca-se principalmente em fornecer requisitos de acessibilidade adequados para a contratação pública de produtos e serviços TIC.
2. Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1:
   • Data de Criação: As WCAG 2.1 foram desenvolvidas pela Web Accessibility Initiative (WAI) do World Wide Web Consortium (W3C). Foram oficialmente publicadas a 5 de junho de 2018.
   • Cobertura: O WCAG é uma norma internacional e não é específico de nenhum país ou região em particular. Serve como um conjunto de diretrizes globalmente reconhecido para a acessibilidade na web.

Regulamentos:

1. Ato Europeu de Acessibilidade:
   • Data de Criação: A Lei Europeia da Acessibilidade foi oficialmente aprovada pelo Parlamento Europeu em 2019.
   • Cobertura: A Lei Europeia da Acessibilidade é específica para a União Europeia. Visa harmonizar os requisitos de acessibilidade para determinados produtos e serviços, incluindo websites e aplicações móveis, em todos os Estados-Membros da UE.
2. Lei dos Americanos com Deficiência (ADA):
   • Data de Criação: A ADA foi promulgada a 26 de julho de 1990.
   • Cobertura: A ADA é uma lei federal dos Estados Unidos. Proíbe a discriminação contra pessoas com deficiência e aplica-se a vários aspetos da vida pública, incluindo requisitos de acessibilidade para conteúdos digitais.

Diretrizes de Acessibilidade para Conteúdo Web (WCAG) – Parte de Normas e Regulamentos:

• WCAG:
  • Data de Criação: A versão inicial do WCAG (1.0) foi publicada em 1999 e sofreu atualizações desde então. O WCAG 2.0, uma revisão significativa, foi publicado em 2008, e o WCAG 2.1, a versão mais recente, foi publicado em 2018.
  • Cobertura: WCAG é uma norma internacional e é frequentemente referenciada em vários regulamentos em todo o mundo. Fornece diretrizes para tornar o conteúdo web mais acessível a pessoas com deficiências.

Em resumo, enquanto as normas técnicas como a EN301549 e as WCAG fornecem diretrizes para a acessibilidade na web, regulamentos como o Ato Europeu de Acessibilidade e a ADA estabelecem requisitos legais em regiões específicas. As WCAG servem como um ponto de referência comum, alinhando-se tanto com normas técnicas como com regulamentos a nível mundial.

Ferramentas e Técnicas para Acessibilidade Web

Os programadores desempenham um papel crucial na garantia da acessibilidade. O uso correto de elementos HTML, como etiquetas de cabeçalho e texto alternativo para imagens, é fundamental. Tecnologias de apoio como leitores de ecrã e lupas são essenciais. Adicionalmente, ferramentas específicas como AccessMonitor e Sublime podem ajudar a avaliar a acessibilidade de um site.

Exemplos de Código HTML

Veja exemplos práticos de código HTML, não conformes e conformes, que ilustram a importância de seguir as diretrizes para garantir a acessibilidade.

Código HTML Não Acessível para Imagens




Pré-visualização:

Neste exemplo, o código HTML não fornece texto alternativo para as imagens, deixando os utilizadores que não as conseguem ver sem acesso à informação transmitida.

Código HTML acessível para imagens





Pré-visualização:

Neste exemplo, o código HTML fornece texto alternativo para as imagens, descrevendo o seu conteúdo e propósito para utilizadores que não as conseguem ver.

Código HTML Não Acessível para Formulários

<form action="submit" method="POST">
Nome:

E-mail:

Palavra-passe:

Comentário:

<input type="submit" value="Submit">
</form>


Pré-visualização:

Neste exemplo, o código HTML não associa rótulos aos campos de entrada, deixando os utilizadores sem uma referência clara e consistente do que devem preencher em cada campo.

Código HTML Acessível para Formulários

<form action="submit" method="POST">
Nome:


E-mail:


Palavra-passe:


Comentário:


<input type="submit" value="Submit">
</form>


Pré-visualização:

Neste exemplo, o código HTML associa rótulos a campos de entrada, utilizando o atributo ‘for’ na  e o atributo ‘id’ na  ou .

Apesar do facto de ambas as formas terem exatamente o mesmo aspeto do ponto de vista visual, neste último caso, a forma tem um grau de acessibilidade muito maior. Este esforço extra para correlacionar os elementos visuais garante que uma maior parte do público da página web conseguirá interagir com a forma e submeter dados.

Importância da Semântica HTML e dos Atributos ARIA

O uso correto da semântica HTML, como 

, 

, e 

 etiquetas, contribuem significativamente para a acessibilidade. Estas etiquetas fornecem uma estrutura clara para o conteúdo, facilitando a navegação e a compreensão do conteúdo por tecnologias de assistência.

Para além da semântica HTML, Atributos ARIA ARIA significa Aplicações Ricas na Internet Acessíveis e é um conjunto de papéis e atributos que definem formas de tornar o conteúdo e as aplicações web mais acessíveis para pessoas com deficiência.

O ARIA permite widgets JavaScript acessíveis, dicas de formulário e mensagens de erro, atualizações de conteúdo em tempo real e muito mais. No entanto, é importante notar que os programadores devem preferir usar o elemento HTML semântico correto em vez de usar ARIA, se tal elemento existir.

A primeira regra de utilização do ARIA é: “Se puder utilizar um elemento HTML nativo ou um atributo com a semântica e o comportamento de que necessita já incorporados, em vez de reutilizar um elemento e adicionar uma função, estado ou propriedade ARIA para o tornar acessível, faça-o.”

Aqui fica um exemplo de como usar atributos ARIA para criar um widget de barra de progresso:

Exemplo de Código HTML




Neste exemplo, o atributo `role=”progressbar”` informa o navegador que este elemento é, na verdade, uma barra de progresso alimentada por JavaScript. Os atributos `aria-valuemin` e `aria-valuemax` especificam os valores mínimo e máximo para a barra de progresso, e o `aria-valuenow` descreve o seu estado atual e, portanto, deve ser mantido atualizado com JavaScript.

Contraste de Cores e sua Relevância

Um contraste adequado entre o texto e o fundo é crucial para garantir a legibilidade, especialmente para pessoas com deficiências visuais. Ferramentas como o “Color Contrast Checker” auxiliam na manutenção de um contraste apropriado.

Um contraste adequado entre o texto e o fundo é crucial para garantir a legibilidade, especialmente para pessoas com deficiências visuais. Ferramentas como o “Color Contrast Checker” auxiliam na manutenção de um contraste apropriado.

A taxa de contraste é uma medida da diferença entre o brilho mínimo e o brilho máximo de um monitor 1. É calculada dividindo a luminância relativa da cor mais clara pela luminância relativa da cor mais escura, usando a seguinte fórmula: (L1 + 0,05) / (L2 + 0,05), onde L1 é a luminância relativa da cor mais clara e L2 é a luminância relativa da cor mais escura 2. A taxa de contraste varia de 1:1 (sem contraste nenhum) a 21:1 (o contraste mais alto possível) 2. A taxa de contraste foi criada por Lea Verou.

Exemplo Positivo:

    Um contraste adequado entre o texto e o fundo é fundamental para garantir a legibilidade, especialmente para pessoas com deficiência visual.




Pré-visualização:

Um contraste adequado entre texto e fundo é crucial para garantir a legibilidade, especialmente para pessoas com deficiências visuais.

Neste exemplo, a cor do texto (#333) e a cor de fundo (#fff) apresentam contraste suficiente, tornando o texto facilmente legível. A cor do texto (#333) e a cor de fundo (#fff) apresentam contraste suficiente, tornando o texto facilmente legível. A relação de contraste para este exemplo é superior ou igual a 4,5:1 para texto normal e 3:1 para texto grande (pelo menos 18 pt) ou texto em negrito, o que cumpre os requisitos mínimos de contraste para acessibilidade de acordo com as Diretrizes de Acessibilidade para Conteúdos Web (WCAG).

Teste por si mesmo utilizando a seguinte ferramenta: coolors.co

Exemplo Negativo:




Um contraste adequado entre texto e fundo é crucial para garantir a legibilidade, especialmente para pessoas com deficiências visuais.

Pré-visualização:

Um contraste adequado entre texto e fundo é crucial para garantir a legibilidade, especialmente para pessoas com deficiências visuais.

Neste exemplo, a cor do texto (#999) e a cor de fundo (#eee) apresentam um contraste insuficiente, o que pode dificultar a leitura do texto, especialmente para pessoas com deficiência visual. A cor do texto (#999) e a cor de fundo (#eee) apresentam um contraste insuficiente, o que pode dificultar a leitura do texto, especialmente para pessoas com deficiência visual. A relação de contraste para este exemplo é inferior a 4,5:1 para texto normal e a 3:1 para texto grande (pelo menos 18 pt) ou texto em negrito, o que não cumpre os requisitos mínimos de contraste para acessibilidade de acordo com as WCAG.

Teste por si mesmo utilizando a seguinte ferramenta: coolors.co

Ferramentas de Avaliação de Acessibilidade Web

Ferramentas como Onda, WebAIM, e Verificador de Acessibilidade são essenciais para avaliar a acessibilidade de um site e aferir a sua conformidade com os padrões de acessibilidade. Estas ferramentas analisam elementos que podem causar problemas de acessibilidade e fornecem sugestões de correção. Geram relatórios detalhados que facilitam a identificação e correção de problemas.

Onda é um conjunto de ferramentas de avaliação que ajuda os autores a tornar o seu conteúdo web mais acessível a pessoas com deficiência. Pode identificar muitos erros de acessibilidade e das Web Content Accessibility Guideline (WCAG), mas também facilita a avaliação humana do conteúdo web..

WebAIM é uma organização sem fins lucrativos que fornece soluções de acessibilidade na web. As suas ferramentas de avaliação incluem o Verificador de Contraste de Cores WebAIM, que verifica o contraste entre duas cores e determina se cumprem os requisitos da WCAG 2.0.

Verificador de Acessibilidade é uma ferramenta gratuita que identifica problemas de acessibilidade na web e fornece instruções exatas para os corrigir. Verifica o cumprimento das Web Content Accessibility Guidelines (WCAG) e do Americans with Disabilities Act (ADA)..

Extensões de Navegador Úteis

Verificador de Acessibilidade Stark É um conjunto de ferramentas integradas de acessibilidade que ajuda designers, programadores, gestores de produto e especialistas em acessibilidade em mais de 30.000 empresas a acelerar o tempo até à conformidade com a acessibilidade digital. Oferece uma vasta gama de ferramentas integradas para criar e testar software acessível facilmente, incluindo Verificador de Contraste, Ordem de Foco, Anotações de Texto Alt, Simulador de Visão e muito mais. Clique aqui para verificar a página Firefox-Stats desta extensão.

IBM Equal Access Verificador de AcessibilidadeÉ uma ferramenta de código aberto para programadores e auditores web que utiliza o motor de regras de acessibilidade da IBM, o qual deteta problemas de acessibilidade em páginas e aplicações web. Oferece uma vasta gama de ferramentas integradas para criar e testar facilmente software acessível, incluindo Comparador de Contraste, Ordem de Foco, Anotações de Texto Alternativo (Alt-Text), Simulador de Visão e mais. Clique aqui para verificar a página da Chrome Web Store desta extensão.

Conclusão

A acessibilidade web é uma jornada contínua. Ao seguir normas técnicas, regulamentos e boas práticas, os desenvolvedores contribuem para um ambiente online acessível a todos. A utilização de ferramentas e técnicas adequadas é essencial para garantir que a web seja inclusiva, promovendo igualdade de acesso e participação.

Referências e Citações

1. Talita Pagani – talitapagani.com
2. Acessibilidade Portugal – acessibilidade.gov.pt
3. Neil Patel – neilpatel.com
4. Alura – alura.com.br
5. Vitória – voitto.com.br
6. Desenvolvimento para a Web – desenvolvimentoparaweb.com
7. Mozilla Desenvolvedor – developer.mozilla.org
8. Desenvolvimento Acessível – desenvolvimentoacessivel.pt
9. UX Sapo – ux.sapo.pt
10. Acessibilidade.net – acessibilidade.net
11. CTI IFRS – cta.ifrs.edu.pt
12. Mailchimp – mailchimp.com
13. TIC Portugal – tic.gov.pt
14. Acessibilidade para Todos – acessibilidadeparatodos.com
15. Mãos a Falar – handtalk.me
16. UFRGS – ufrgs.br
17. UX Design Brasil – brasil.uxdesign.cc
18. EN301549 – Norma Europeia EN 301 549 V2.1.2
19. Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1
20. --- **Ato da União Europeia sobre Acessibilidade – Diretiva (UE) 2019/882 – Ato da União Europeia sobre Acessibilidade** ---
21. Lei dos Americanos com Deficiência (ADA) Lei dos Americanos com Deficiências (ADA)
22. Lei de Americanos com Deficiências (ADA) – Histórico Legislativo – ADA National Network
23. Diretrizes de Acessibilidade para Conteúdo Web (WCAG) – História – W3C – Estado Atual das WCAG – WebAIM – Cronologia das WCAG
24. Como calcular o contraste de cores – guia-desenvolvedor-acessibilidade

 
Vitor Vinicius

Programador de Software