Acessibilidade, por onde começar?

Sabemos a importância de desenvolver um site acessível, sem barreiras, onde qualquer um, com deficiência ou não, consiga acessar.

Certo, mas por onde eu começo? Somente o desenvolvedor precisa ter a preocupação e o trabalho para deixar o site acessível?

Nos próximos tópicos, todas estas perguntas serão respondidas, além de apresentar itens imprescindíveis para deixar o site acessível.

1. Menu acessível

Uma das obrigatoriedades para deixar o site acessível, é ter como cabeçalho principal um menu acessível que contenha âncoras que pulem para outros conteúdos:

• Ir para o conteúdo [1]
• Ir para o menu [2]
• Ir para o rodapé [4]

Se o site tiver buscas, vídeos, e outros conteúdos principais, é necessário que tenha esses links no menu.

E por trás do código, como funciona?

Os links precisam ter âncora e ela existindo ou não, como nos sites antigos, o onclick deve conter o atributo href da tag <a>.  Nesse topo, os links precisam ter o atributo: accesskey=”(número)”.  O accesskey, como o próprio nome explica, é a chave de acesso. Através da digitação do alt+1 (o número que foi determinado), por exemplo, o deficiente visual consegue navegar no site sem ter de seguir item por item na página.

Cada navegador tem a sua tecla de atalho. Uma curiosidade: no Chrome, os números que devem ser digitados são apenas os números que se encontram acima das letras do teclado. Os números da calculadora em teclados maiores não funcionam. Outro item muito importante é que esses links devem contornar um bloco de conteúdo. Não adianta criar, como no exemplo abaixo:

Menu

<a href=”#contentMain” accesskey=”1″ title=”Ir para o conteúdo”>Ir para o conteúdo [1]</a><a href=”#linkVideo” accesskey=”2″ title=”Ir para o vídeo”>Ir para o vídeo [2]</a>

Conteúdo errado

<div id=”contentMain”> Conteúdo aqui! <iframe id=”linkVideo”>Vídeo aqui!</iframe></div>

Dessa forma acima não funciona, pois não existe blocos de conteúdo, tendo em vista que é apenas um bloco dentro de outro bloco, dessa forma está errado.
O correto seria:

Conteúdo correto

<div id=”contentMain”> Conteúdo aqui!</div><iframe id=”linkVideo”>Vídeo aqui!</iframe>

Outros itens importantes, que devem conter no menu principal, seria os A- A+, que aumentam ou diminuem a fonte do texto. Além do botão de contraste, que deixa a página com duas cores definidas, sendo a cor default e a cor com tons escuros.

Contraste? Por que?

Curiosidade: Você sabia que existem pessoas com deficiências visuais que sentem dor nos olhos por causa da claridade, tanto da luz do dia, quanto da luz do computador e outros dispositivos?

Muitos dos que enxergam percebem as pessoas deficientes com óculos escuros, mas será que todos eles pensaram no porquê de usarem óculos escuros? Esta é uma das importâncias de ter um contraste no site.

Hierarquia, por favor

Outro item importante: tudo deve ter uma hierarquia no site. Desde os headings, até os números dos accesskeys, por isso, não coloque no menu, o accesskey=”2” e depois: accesskey=”1”, ou simplesmente, começar pelo número “2”, e não existir o “1”.  Lembre-se de fazer o mesmo para os <h1>, <h2>, <h3>, e assim em diante.

Acessibilidade. Preocupação apenas do desenvolvedor?

Nestes itens relacionados ao topo principal de acessibilidade↳Acessibilidade11 conteúdosO que é Acessibilidade Web e como tornar seu site mais acessívelDev (Back & Front) · mar 2019Design para veteranos digitais: acessibilidade para nós mesmosProduto & UX · jan 2020Dicas de Front-End para usabilidade, acessibilidade, performance e responsividadeProduto & UX · fev 2025Ver tudo em Produto & UX → é respondido está pergunta. O layout precisa enviar uma página com a definição de cores do site padrão e do site numa versão escura, com contraste. Além, que é necessário a definição de um menu acessível e, que muitos acabam esquecendo. E outra coisa, este menu não pode vir escondido de jeito nenhum, ok?

Para alinharmos o conhecimento até agora, veja os itens importantes que deve também conter no topo acessível:

• Alto-contraste
• Aumentar e diminuir fonte (A+ A-)
• Ajuda de Acessibilidade [5]

Tem outro item que não foi mencionado ainda, mas que é de suma importância em conter no projeto, que é a página de “Ajuda de Acessibilidade”  e deve conter também, um atributo accesskey, seguindo como informado uma hierarquia de números.

Ajuda de Acessibilidade, o que é isso?

Esta página não será uma obrigatoriedade do “accessmonitor”, afinal, essa ferramenta não avalia o site como um todo, mas sim, as páginas, conforme informado pelas URLs.

Mas só porque não consta como prioridade não deve existir? A resposta é obvia. Não são todos que conhecem as teclas de atalhos acessíveis diversificadas de cada navegador, e nem todos os sites seguem um padrão de acessibilidade. Cada um segue de acordo com sua necessidade. Então, por favor, crie uma página para ajudar o usuário a entender como funciona a acessibilidade em seu site.

Segue um exemplo de teclas de atalho acessíveis, separadas por navegador:

• Internet Explorer e Google Chrome: “Alt + 1” – ir para o conteúdo“Alt + 2” – ir para o menu“Alt + 3” – Acessar esta página de Ajuda de Acessibilidade
• Firefox: “Alt + Shift + número”
• Opera: “Shift + Escape + número”
• Safari e OmniWeb: “Ctrl + número”

As imagens abaixo, são exemplos, de como deve ser um  topo de acessibilidade:

AccessMonitor? Pra que serve?

Para quem ainda não conhece a ferramenta do AccessMonitor, ele tem como intuito analisar com detalhes cada página que foi informada, dando uma nota de acessibilidade, e ainda dá dicas de como ajustar a página para deixá-la acessível.

E o site para ficar acessível, ainda precisa passar pela validação do W3C. Perceba que é um conjunto de coisas que além de deixar seu site acessível, ainda ajuda a melhorar o SEO↳SEO4 conteúdosPor que a transição do SEO clássico para a Otimização de Motores Generativos (GEO) exige que se repense a modelagem semânticaMarketing Tech · mai 2026O impacto da pesquisa e do SEO no comércio eletrônico: insights da State of Search Brasil 5Marketing Tech · fev 2025SEO por Elas 2025: Impulsionando e promovendo mulheres no Marketing DigitalMarketing Tech · fev 2025Ver tudo em Marketing Tech →.

Link do AccessMonitor:

• http://www.acessibilidade.gov.pt/accessmonitor/

Link do Validator W3C:

• https://validator.w3.org/

2. Imagens – Title/Alt

Descreva todas as imagens com textos descritivos curtos e objetivos. Se a imagem for meramente ilustrativa, sem necessidade de descrevê-las ou tê-las no contexto, utilize-a como background, e não como tag <img>.

Quando a imagem tiver um link externo, coloque isso na descrição, no alt da imagem. Como no exemplo a seguir:

Observações: Coloque em todas as imagens que tiverem link externo, essa descrição em parênteses e o title nas marcações de links, menus e texto dos links.

3. Elemento title da página

Certifique-se que cada title da página seja específico, identificando o conteúdo de cada página.

Neste item, além de ajudar na acessibilidade, está sendo trabalhado também o SEO do site. Visto que, se cada título é especificado, automaticamente é identificado o que realmente contém em sua página.

4. Formulários – Label

Item importante, que nem deveria ser mencionado, afinal, é um requisito que todos os sites deveriam ter.

Coloque <label for=”nome-do-input”> linkando com o mesmo nome do “id”. Dessa forma, cada input será identificado pelo leitor de tela, especificando o que é cada campo.

5. Identifique o idioma da página

Certifique-se que em cada página tenha em seu código o idioma posicionado. Como por exemplo:

<!DOCTYPE html↳HTML45 conteúdosA importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Como hostear seu site HTML gratuitamente com GitHub PagesDev (Back & Front) · jun 2025SQL Server – Como criar um versionamento de código das suas Stored Procedures em HTML e com comentários da alteraçãoData · nov 2020Ver tudo em Dev (Back & Front) →><html lang=”pt-br”><head>  <title>Título da página</title></head><body></body></html>

6. Use unidades relativas

Os tamanhos de letras devem ser definidos sem a utilização de “px” (pixéis), mas sim, com unidades relativas, como: em e rem, porque no caso do Internet Explorer 7 ou superior, quando a fonte é especificada em unidades absolutas, não existe efeito sobre o tamanho do texto.

7. Marcação de formulários

Nos formulários, é imprescindível que exista o button ou type=”submit”. Muitos são os sites que às vezes possuem um formulário, e ao invés do desenvolvedor colocar um inp16ut com submit, ele utiliza uma tag <a>. Não se espante, infelizmente isso acontece.

Esse item, assim como todos os demais mencionados neste artigo, não devem passar por julgamentos, pois é importante ser falado até mesmo para quem está começando na área. Afinal, nem tudo é passado com os mínimos detalhes. Se fosse, todos deveriam saber acessibilidade e a web não teria tantas barreiras e seria funcional para todos.

8. Tabelas de dados e layout

Quando utilizar as tags <table> siga as recomendações da W3C e a utilize de forma semântica.

9. Aplicativo Libras – Hand Talk

Este aplicativo auxilia pessoas com deficiência auditiva. Utilize-o em sua página. Segue o link da ferramenta:

• https://handtalk.me/

Fórmula mágica?

Deixar um site acessível não é um bicho de sete cabeças e também não é necessário ter uma fórmula mágica. Muitos dos itens falados acima, são coisas que muitos já sabem, porém, não aplicam.

Siga as diretrizes informadas neste artigo, e depois nos conte se o seu projeto ficou acessível. Com certeza essas orientações, se não deixarem o site 100% acessível, chegará bem perto.