Acessibilidade Web

1. O que é Acessibilidade Web?

A acessibilidade não está relacionada somente às pessoas com deficiência.

Uma interface acessível também pode beneficiar pessoas idosas, pessoas com dificuldades temporárias, pessoas utilizando dispositivos móveis, usuários em ambientes com muito ruído e pessoas que possuem alguma limitação momentânea.

Acessibilidade não é apenas visual

Um erro comum é pensar que acessibilidade significa apenas aumentar o tamanho da fonte ou melhorar as cores.

A acessibilidade envolve diferentes aspectos:

• Visão
• Audição
• Mobilidade
• Compreensão
• Memória
• Percepção
• Interação
• Navegação pelo teclado
• Uso de tecnologias assistivas

2. Por que a acessibilidade é importante?

A internet faz parte da educação, comunicação, trabalho, comércio, serviços públicos e entretenimento.

Portanto, impedir ou dificultar o acesso de uma pessoa significa criar uma barreira digital.

Objetivo da acessibilidade

O objetivo é reduzir barreiras para que diferentes pessoas possam:

• Perceber o conteúdo.
• Compreender as informações.
• Navegar pela página.
• Interagir com os elementos.
• Executar tarefas.
• Utilizar sistemas e serviços.

3. HTML semântico e acessibilidade

O HTML não serve apenas para colocar elementos visualmente na tela. Ele também fornece informações estruturais para navegadores e tecnologias assistivas.

Exemplo semântico

<header>
    Cabeçalho
</header>

<nav>
    Menu de navegação
</nav>

<main>
    Conteúdo principal
</main>

<section>
    Seção do conteúdo
</section>

<footer>
    Rodapé
</footer>

Comparação

Podemos criar praticamente qualquer layout utilizando elementos genéricos como <div>. Porém, isso pode dificultar a compreensão estrutural da página.

<div>
    <div>
        Menu
    </div>

    <div>
        Conteúdo
    </div>
</div>

Uma estrutura semântica fornece informações mais claras sobre a finalidade de cada região.

4. O atributo alt nas imagens

Ele é especialmente importante para usuários que não conseguem visualizar a imagem e utilizam tecnologias assistivas.

Sintaxe

<img src="foto.jpg" alt="Descrição da imagem">

Exemplo correto

<img src="computador.jpg" alt="Notebook sobre uma mesa utilizado para programação">

Exemplo incorreto

<img src="computador.jpg" alt="imagem">

A palavra "imagem" não ajuda o usuário a entender o que está representado.

Imagem decorativa

Algumas imagens existem apenas para decoração e não acrescentam informação ao conteúdo.

<img src="linha-decorativa.png" alt="">

5. Links acessíveis

Evite links pouco informativos

<a href="curso.html">
    Clique aqui
</a>

"Clique aqui" não explica para onde o link leva.

Melhor alternativa

<a href="curso.html">
    Acessar o curso de Desenvolvimento Web
</a>

Abrir em nova aba

<a href="https://exemplo.com" target="_blank" rel="noopener noreferrer">
    Acessar site externo
</a>

Quando um link abre uma nova aba ou janela, é importante deixar essa mudança de contexto clara para o usuário.

6. Títulos e hierarquia de conteúdo

Os títulos HTML ajudam a organizar o conteúdo.

<h1>Acessibilidade Web</h1>

<h2>HTML acessível</h2>

<h3>Imagens</h3>

<h3>Links</h3>

<h2>CSS acessível</h2>

Exemplo incorreto

<h1>Texto pequeno</h1>

<h4>Texto importante</h4>

Exemplo correto

<h2>Formulários</h2>

<h3>Campo de nome</h3>

<h3>Campo de e-mail</h3>

7. Listas HTML

Listas devem ser utilizadas quando o conteúdo representa realmente uma lista.

Lista não ordenada

<ul>

    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>

</ul>

Lista ordenada

<ol>

    <li>Criar o HTML</li>
    <li>Criar o CSS</li>
    <li>Adicionar JavaScript</li>

</ol>

O uso correto das listas fornece uma estrutura que pode ser interpretada pelas tecnologias assistivas.

8. Formulários acessíveis

label

O elemento label identifica o campo ao qual está associado.

<label for="nome">
    Nome completo
</label>

<input type="text" id="nome" name="nome">

Associação entre label e input

O valor do for deve corresponder ao id do campo.

<label for="email">
    E-mail
</label>

<input type="email" id="email">

Placeholder não substitui label

<input type="text" placeholder="Digite seu nome">

O placeholder pode servir como exemplo ou orientação, mas não deve ser utilizado como substituto do label.

Exemplo recomendado

<label for="nome">
    Nome completo
</label>

<input type="text" id="nome" placeholder="Ex.: Marcelo da Silva">

9. Utilize tipos corretos de input

HTML possui diferentes tipos de campos. Utilize o tipo adequado para cada informação.

<input type="text">

<input type="email">

<input type="tel">

<input type="number">

<input type="date">

<input type="password">

10. Botões acessíveis

Para ações da interface, utilize o elemento <button>.

Exemplo correto

<button type="button">
    Salvar
</button>

Comparação

Muitos desenvolvedores utilizam uma <div> com JavaScript para criar um botão.

<div onclick="salvar()">
    Salvar
</div>

Embora seja possível programar esse comportamento, o elemento não foi criado originalmente para representar uma ação de botão.

Prefira:

<button onclick="salvar()">
    Salvar
</button>

11. Navegação pelo teclado

Alguns comandos comuns:

• Tab — avançar entre elementos.
• Shift + Tab — voltar entre elementos.
• Enter — executar determinadas ações.
• Espaço — interagir com alguns controles.
• Setas — navegar em determinados componentes.

12. Indicador de foco

CSS para foco

button:focus {
    outline: 3px solid #007acc;
}

Exemplo mais completo

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid #007acc;
    outline-offset: 3px;
}

/* Evite */

*:focus {
    outline: none;
}

13. ARIA

Alguns atributos ARIA muito conhecidos são:

• aria-label
• aria-labelledby
• aria-describedby
• aria-hidden
• aria-expanded
• aria-live
• aria-current
• aria-required

aria-label

<button aria-label="Fechar menu">
    ✕
</button>

O texto visual do botão é apenas um símbolo. O atributo fornece uma descrição textual.

aria-expanded

<button aria-expanded="false" aria-controls="menu">
    Menu
</button>

<nav id="menu">
    ...
</nav>

Esse atributo pode informar o estado de um componente expansível.

14. aria-hidden

O atributo aria-hidden="true" pode indicar que determinado conteúdo deve ser ignorado por tecnologias assistivas.

Exemplo

<span aria-hidden="true">
    ★
</span>

Isso pode ser útil para elementos puramente decorativos quando a informação já está disponível de outra maneira.

15. Contraste de cores

Um texto com pouco contraste pode ser difícil de ler, principalmente para pessoas com baixa visão ou determinadas dificuldades de percepção visual.

Exemplo ruim

color: #cccccc;
background: #ffffff;

Exemplo melhor

color: #18212b;
background: #ffffff;

16. Não utilize somente cores para transmitir informação

Uma informação importante não deve depender exclusivamente da cor.

Exemplo problemático

Campo vermelho = erro
Campo verde = correto

Uma pessoa que possui dificuldade para diferenciar determinadas cores pode não compreender essa informação.

Melhor solução

❌ E-mail inválido.

Campo:
[________________]

Mensagem:
Digite um endereço de e-mail válido.

17. Tipografia acessível

A escolha da fonte e a organização do texto influenciam diretamente a leitura.

• Utilize tamanho de texto adequado.
• Evite blocos enormes de texto sem organização.
• Utilize títulos e subtítulos.
• Utilize espaçamento adequado.
• Evite textos excessivamente pequenos.

CSS

body {
    font-size: 16px;
    line-height: 1.6;
}

p {
    max-width: 70ch;
}

18. Responsividade e acessibilidade

Um site responsivo adapta sua interface para diferentes tamanhos de tela.

@media (max-width: 768px) {

    .menu {
        display: block;
    }

    .conteudo {
        width: 100%;
    }

}

A responsividade contribui para acessibilidade porque permite que usuários utilizem diferentes dispositivos e configurações de tela.

19. Texto alternativo para conteúdos visuais

Imagens, gráficos e outros conteúdos visuais que possuem informação relevante precisam possuir uma maneira alternativa de transmitir essa informação.

Imagem informativa

<img src="grafico-vendas.png" alt="Gráfico mostrando crescimento das vendas entre janeiro e junho">

Imagem decorativa

<img src="decoracao.png" alt="">

20. Áudio e vídeo acessíveis

Conteúdos multimídia também precisam considerar pessoas que não conseguem ouvir ou visualizar determinadas informações.

Legendas

Vídeos podem utilizar legendas para apresentar informações faladas.

Exemplo

<video controls>

    <source src="aula.mp4" type="video/mp4">

    <track
        kind="subtitles"
        src="legendas.vtt"
        srclang="pt-BR"
        label="Português"
    >

</video>

21. Tabelas acessíveis

Tabelas devem ser utilizadas para dados organizados em linhas e colunas.

<table>

    <caption>
        Notas dos alunos
    </caption>

    <thead>

        <tr>

            <th>
                Aluno
            </th>

            <th>
                Nota
            </th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>
                João
            </td>

            <td>
                9,0
            </td>

        </tr>

    </tbody>

</table>

22. Regiões importantes da página

Elementos semânticos como header, nav, main, aside e footer ajudam a organizar a página.

<header>
    Cabeçalho
</header>

<nav>
    Navegação
</nav>

<main>

    <section>
        Conteúdo
    </section>

</main>

<aside>
    Conteúdo complementar
</aside>

<footer>
    Rodapé
</footer>

23. Link para pular diretamente ao conteúdo

HTML

<a href="#conteudo">
    Pular para o conteúdo
</a>

<main id="conteudo">

    Conteúdo principal

</main>

Esse recurso é especialmente útil para pessoas que navegam utilizando teclado ou leitores de tela.

24. Defina o idioma da página

O atributo lang informa o idioma principal do documento.

<html lang="pt-BR">

25. Mudança de idioma dentro da página

Se uma parte do conteúdo estiver em outro idioma, também podemos informar isso.

<p>

    O termo
    <span lang="en">
        Machine Learning
    </span>
    significa aprendizado de máquina.

</p>

26. Uso correto do placeholder

O placeholder apresenta uma sugestão dentro do campo.

<label for="telefone">
    Telefone
</label>

<input type="tel" id="telefone" placeholder="(00) 00000-0000">

27. Mensagens de erro acessíveis

Mensagens de erro precisam explicar claramente o problema e, quando possível, como corrigi-lo.

Mensagem ruim

Erro!

Mensagem melhor

O campo E-mail é obrigatório.
Digite um endereço de e-mail válido.

aria-describedby

<label for="email">
    E-mail
</label>

<input type="email" id="email" aria-describedby="erro-email">

<p id="erro-email">
    Digite um e-mail válido.
</p>

28. Campos obrigatórios

O atributo required indica que o preenchimento do campo é obrigatório.

<label for="nome">
    Nome
</label>

<input type="text" id="nome" required>

Também podemos comunicar essa informação ao usuário de maneira textual.

<label for="email">
    E-mail (obrigatório)
</label>

<input type="email" id="email" required>

29. Organizando grupos de campos

O elemento fieldset pode ser utilizado para agrupar campos relacionados.

<fieldset>

    <legend>
        Dados pessoais
    </legend>

    <label for="nome">
        Nome
    </label>

    <input type="text" id="nome">

    <label for="email">
        E-mail
    </label>

    <input type="email" id="email">

</fieldset>

30. Checkbox acessível

<input type="checkbox" id="termos">

<label for="termos">
    Aceito os termos de uso
</label>

O label permite identificar claramente a finalidade da caixa de seleção.

31. Radio buttons acessíveis

<fieldset>

    <legend>
        Forma de pagamento
    </legend>

    <input type="radio" id="pix" name="pagamento" value="pix">

    <label for="pix">
        Pix
    </label>

    <input type="radio" id="cartao" name="pagamento" value="cartao">

    <label for="cartao">
        Cartão
    </label>

</fieldset>

32. Menus acessíveis

Um menu deve permitir que o usuário encontre e acesse suas opções utilizando diferentes formas de navegação.

<nav aria-label="Menu principal">

    <ul>

        <li>
            <a href="index.html">
                Início
            </a>
        </li>

        <li>
            <a href="cursos.html">
                Cursos
            </a>
        </li>

        <li>
            <a href="contato.html">
                Contato
            </a>
        </li>

    </ul>

</nav>

33. Identificando a página atual

O atributo aria-current pode indicar qual item representa o estado atual.

<nav>

    <a href="index.html" aria-current="page">
        Início
    </a>

    <a href="cursos.html">
        Cursos
    </a>

</nav>

34. Conteúdo visualmente oculto

Em determinadas situações, podemos precisar de um texto que seja importante para tecnologias assistivas, mas que não precise aparecer visualmente.

Isso deve ser feito com técnicas específicas de CSS, e não simplesmente utilizando display: none.

35. display: none e acessibilidade

.menu {
    display: none;
}

Quando um conteúdo não deve estar disponível para o usuário naquele estado da interface, isso pode ser correto.

Porém, não utilize essa propriedade sem compreender as consequências para tecnologias assistivas.

36. JavaScript também precisa ser acessível

Uma interface pode possuir HTML correto e CSS adequado, mas ainda apresentar problemas quando utilizamos JavaScript para criar componentes interativos.

Exemplo

document
    .querySelector("#menu")
    .addEventListener("click", abrirMenu);

O problema aparece quando o componente só funciona utilizando mouse e não responde ao teclado.

37. Modais e diálogos

Modais precisam informar ao usuário que uma nova área de interação foi aberta.

<dialog id="modal">

    <h2>
        Confirmação
    </h2>

    <p>
        Deseja continuar?
    </p>

    <button>
        Sim
    </button>

    <button>
        Cancelar
    </button>

</dialog>

Também é importante pensar no foco, fechamento, teclado e retorno do foco para o elemento que abriu o diálogo.

38. Comparação: placeholder × label

39. HTML semântico × ARIA

40. Acessibilidade utilizando CSS

O CSS também possui grande influência na acessibilidade.

Alguns pontos importantes:

• Contraste.
• Tamanho do texto.
• Espaçamento.
• Foco.
• Responsividade.
• Visibilidade dos elementos.
• Organização visual.
• Estados de interação.

Exemplo de foco

button:focus-visible {
    outline: 3px solid #007acc;
    outline-offset: 4px;
}

O pseudo-seletor :focus-visible pode ser utilizado para apresentar um indicador de foco de forma apropriada em situações de navegação.

41. Movimento e animações

Animações podem melhorar a experiência visual, mas algumas pessoas podem preferir reduzir movimentos.

@media (prefers-reduced-motion: reduce) {

    * {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }

}

42. Permita ampliação do conteúdo

Usuários podem aumentar o conteúdo utilizando recursos do navegador ou do sistema operacional.

43. Ordem de navegação

A ordem visual e a ordem de navegação devem fazer sentido.

O HTML deve ser organizado de maneira lógica para que a navegação pelo teclado acompanhe o fluxo do conteúdo.

tabindex

<button tabindex="0">
    Botão
</button>

44. Comparação: botão × link

Link

<a href="contato.html">
    Contato
</a>

Botão

<button type="button">
    Abrir menu
</button>

45. Como testar a acessibilidade do seu site

Não basta escrever código acessível. É importante testar a interface.

Teste 1 — Somente teclado

1. Desconecte ou não utilize o mouse.
2. Pressione TAB.
3. Observe o indicador de foco.
4. Acesse todos os links.
5. Acesse todos os botões.
6. Preencha os formulários.

Teste 2 — Imagens

Verifique se imagens importantes possuem alternativas textuais adequadas.

Teste 3 — Estrutura

Verifique se a página possui títulos, seções, navegação e conteúdo organizados semanticamente.

Teste 4 — Contraste

Verifique se textos e elementos importantes possuem contraste suficiente.

Teste 5 — Zoom

Amplie a página e verifique se o conteúdo continua compreensível e utilizável.

46. Checklist de acessibilidade

• A página possui lang="pt-BR"?
• Existe uma estrutura HTML semântica?
• As imagens importantes possuem alt?
• As imagens decorativas possuem alt vazio?
• Os links possuem textos claros?
• Os formulários possuem labels?
• Os botões são elementos button?
• O site funciona com teclado?
• O foco é visualmente identificado?
• O contraste é adequado?
• As informações não dependem somente de cores?
• O site funciona em telas menores?
• Vídeos possuem recursos de acessibilidade?
• Tabelas possuem cabeçalhos adequados?
• Elementos interativos podem ser utilizados pelo teclado?

47. Exemplo de página acessível

<!DOCTYPE html>

<html lang="pt-BR">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>
        Curso de Desenvolvimento Web
    </title>

</head>

<body>

    <a href="#conteudo">
        Pular para o conteúdo
    </a>

    <header>

        <h1>
            Curso de Desenvolvimento Web
        </h1>

    </header>

    <nav aria-label="Menu principal">

        <a href="index.html">
            Início
        </a>

        <a href="curso.html">
            Curso
        </a>

        <a href="contato.html">
            Contato
        </a>

    </nav>

    <main id="conteudo">

        <section>

            <h2>
                Acessibilidade Web
            </h2>

            <p>
                Aprenda a desenvolver sites acessíveis.
            </p>

            <img src="computador.jpg" alt="Pessoa utilizando um computador para programar">

        </section>

        <section>

            <h2>
                Inscrição
            </h2>

            <form>

                <label for="nome">
                    Nome
                </label>

                <input type="text" id="nome" required>

                <label for="email">
                    E-mail
                </label>

                <input type="email" id="email" required>

                <button type="submit">
                    Enviar inscrição
                </button>

            </form>

        </section>

    </main>

    <footer>

        <p>
            © 2026 Curso de Desenvolvimento Web
        </p>

    </footer>

</body>

</html>

48. Resumo da aula

Acessibilidade Web não é um único atributo ou uma única técnica.

Ela é resultado de várias decisões tomadas durante o desenvolvimento.

• HTML semântico.
• Textos alternativos.
• Labels em formulários.
• Navegação por teclado.
• Foco visível.
• Contraste adequado.
• Estrutura correta de títulos.
• Links descritivos.
• Botões semânticos.
• Uso adequado de ARIA.
• Responsividade.
• Legendas e alternativas para multimídia.
• Mensagens de erro claras.
• Formulários corretamente identificados.
• Testes com diferentes formas de navegação.

49. Atividade prática

Agora você irá analisar uma página web e identificar possíveis problemas de acessibilidade.

Etapa 1

Escolha uma página de um projeto que você já desenvolveu.

Etapa 2

Utilize somente o teclado para navegar.

Etapa 3

Verifique:

• O foco aparece?
• Todos os botões funcionam?
• Todos os links podem ser acessados?
• Os formulários podem ser preenchidos?
• As imagens possuem alt?
• Os textos possuem bom contraste?
• Os títulos estão organizados?
• O site funciona em celular?

Etapa 4

Corrija os problemas encontrados.

Etapa 5

Apresente quais alterações foram realizadas e explique por que cada alteração melhora a acessibilidade.