Considerações de Acessibilidade no Desenvolvimento Web

Garantir a acessibilidade web é essencial para criar experiências digitais inclusivas. A acessibilidade não apenas beneficia usuários com deficiências, mas também melhora a experiência geral do usuário e amplia o alcance do seu público. Este guia aborda a importância da acessibilidade, técnicas para tornar a manipulação do DOM acessível, o papel do ARIA (Accessible Rich Internet Applications) e como manter widgets JavaScript dinâmicos utilizáveis por todos.

Quando você cria interatividade com JavaScript — alternando conteúdo, selecionando e atualizando elementos ou modificando o documento — você assume a responsabilidade pela acessibilidade que o navegador forneceria gratuitamente com HTML simples. Este capítulo mostra onde essa responsabilidade reside e como cumpri-la.

Criando Conteúdo Acessível

Importância da Acessibilidade no Desenvolvimento Web

A acessibilidade no desenvolvimento web garante que todos os usuários, incluindo pessoas com deficiências, possam acessar e interagir com o conteúdo web de forma eficaz. A Organização Mundial da Saúde estima que mais de 1 bilhão de pessoas vivem com alguma forma de deficiência. Ao tornar seu conteúdo web acessível, você atende a um público mais amplo, melhora a usabilidade e cumpre padrões legais como a Lei dos Americanos com Deficiências (ADA) e as Diretrizes de Acessibilidade para Conteúdo Web (WCAG).

Benefícios da Acessibilidade

Inclusividade: Permite que usuários com diversas deficiências acessem informações e serviços.
Melhoria no SEO: Mecanismos de busca frequentemente recompensam sites acessíveis com melhores posições.
Conformidade Legal: Ajuda a evitar possíveis problemas legais relacionados a padrões de acessibilidade.
Usabilidade Aprimorada: Melhora a experiência geral do usuário para todos os visitantes, incluindo aqueles sem deficiências.

Técnicas para Tornar a Manipulação do DOM Acessível

Navegação por Teclado

Muitas pessoas não conseguem usar um mouse — elas navegam com o teclado, um dispositivo de comutação ou um leitor de tela que controla o teclado. Se um controle só responde a cliques, esses usuários ficam excluídos. A regra geral: qualquer coisa que um usuário de mouse pode fazer, um usuário de teclado também deve conseguir fazer.

Certifique-se de que todos os elementos interativos sejam acessíveis via teclado. Utilize a ordem natural do DOM para navegação por Tab a fim de manter um fluxo lógico. O atributo tabindex controla isso:

tabindex="0" coloca um elemento na ordem natural de tabulação (útil quando você torna um elemento não nativo interativo).
tabindex="-1" o remove da ordem de tabulação, mas permite que você o foque programaticamente com element.focus().
Valores positivos como tabindex="3" substituem a ordem natural e quase sempre causam confusão — evite-os.

Elementos nativos como <button>, <a href> e controles de formulário são focalizáveis por teclado por padrão, o que é uma das razões mais fortes para preferi-los a <div>s clicáveis. Sempre garanta que um indicador de foco visível (o contorno) seja estilizado para que os usuários de teclado possam ver claramente qual elemento está focado — nunca defina outline: none sem fornecer um substituto.

<!DOCTYPE html>
<html>
<head>
    <title>Keyboard Navigation Example</title>
</head>
<body>
<h4>Press the 'Tab' key to navigate through the buttons!</h4>
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
</body>
</html>

Experimente Você Mesmo »

Este exemplo se baseia na ordem natural do DOM para os botões, facilitando a navegação dos usuários de teclado.

Componentes Interativos Acessíveis

Este exemplo demonstra como criar um acordeão acessível usando roles e propriedades ARIA, e gerenciando o foco de forma eficaz.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Accessible Accordion Example</title>
    <style>
        .accordion {
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 20px 0;
        }
        .accordion-header {
            padding: 10px;
            cursor: pointer;
            background-color: #f0f0f0;
            border-bottom: 1px solid #ccc;
            width: 100%;
            text-align: left;
        }
        .accordion-content {
            display: none;
            padding: 10px;
        }
    </style>
</head>
<body>

<h1>Accessible Accordion Example</h1>
<h4>Use your keyboard (Enter or Space key) to toggle the accordion!</h4>

<div class="accordion">
    <button class="accordion-header" id="accordion-header-1" aria-controls="accordion-content-1" aria-expanded="false">
        Section 1
    </button>
    <div class="accordion-content" id="accordion-content-1" role="region" aria-labelledby="accordion-header-1" tabindex="-1">
        <p>This is the content of section 1.</p>
    </div>
</div>

<div class="accordion">
    <button class="accordion-header" id="accordion-header-2" aria-controls="accordion-content-2" aria-expanded="false">
        Section 2
    </button>
    <div class="accordion-content" id="accordion-content-2" role="region" aria-labelledby="accordion-header-2" tabindex="-1">
        <p>This is the content of section 2.</p>
    </div>
</div>

<div class="accordion">
    <button class="accordion-header" id="accordion-header-3" aria-controls="accordion-content-3" aria-expanded="false">
        Section 3
    </button>
    <div class="accordion-content" id="accordion-content-3" role="region" aria-labelledby="accordion-header-3" tabindex="-1">
        <p>This is the content of section 3.</p>
    </div>
</div>

<script>
    document.querySelectorAll('.accordion-header').forEach(header => {
        header.addEventListener('click', function () {
            const expanded = this.getAttribute('aria-expanded') === 'true';
            this.setAttribute('aria-expanded', !expanded);
            const content = document.getElementById(this.getAttribute('aria-controls'));
            content.style.display = !expanded ? 'block' : 'none';
        });

        header.addEventListener('keydown', function (event) {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                this.click();
            }
        });
    });
</script>

</body>
</html>

Experimente Você Mesmo »

Estrutura do Acordeão: O acordeão é composto por cabeçalhos que, ao serem clicados, expandem ou recolhem o conteúdo associado.
HTML Semântico e ARIA:
- Elementos nativos <button> são usados nos cabeçalhos para garantir suporte integrado a teclado e leitor de tela.
- aria-controls associa os cabeçalhos ao seu conteúdo.
- aria-expanded indica o estado da seção do acordeão.
- role="region" nas seções de conteúdo as identifica como regiões significativas.
Acessibilidade por Teclado:
- Listeners de eventos tratam os eventos click e keydown para permitir alternar o acordeão usando o teclado (Enter ou Espaço).

Por que isso importa:

Usabilidade Aprimorada: O acordeão é utilizável via mouse e teclado.
Acessibilidade Melhorada: Os atributos ARIA comunicam o estado e a estrutura para tecnologias assistivas, tornando-o acessível a usuários de leitores de tela.
Gerenciamento de Foco: O foco permanece no botão de acionamento, seguindo padrões padrão de acordeão e evitando saltos de navegação inesperados para usuários de teclado.

Para cobertura mais aprofundada sobre como conectar comportamentos de teclado e clique, consulte Tratamento de eventos no DOM.

HTML Semântico

Use elementos HTML semânticos para transmitir o significado e a estrutura do conteúdo. Isso ajuda as tecnologias assistivas a interpretar e navegar pelo conteúdo web de forma eficaz.

<!DOCTYPE html>
<html>
<head>
    <title>Semantic HTML Example</title>
</head>
<body>
    <header>
        <h1>Main Heading</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
        </ul>
    </nav>
    <main>
        <section id="section1">
            <h2>Section 1</h2>
            <p>Content for section 1.</p>
        </section>
        <section id="section2">
            <h2>Section 2</h2>
            <p>Content for section 2.</p>
        </section>
    </main>
    <footer>
        <p>Footer content</p>
    </footer>
</body>
</html>

Experimente Você Mesmo »

Este exemplo usa elementos HTML semânticos como <header>, <nav>, <main>, <section> e <footer> para definir a estrutura da página.

Alternativas de Texto

Leitores de tela não conseguem interpretar imagens, ícones ou desenhos em canvas — eles leem a alternativa de texto que você fornece. Toda imagem significativa precisa de um atributo alt que descreva seu conteúdo ou função. Imagens decorativas que não acrescentam informação devem ter alt="" vazio para que o leitor de tela as ignore em vez de anunciar um nome de arquivo.

<!-- Meaningful image: describe it -->
<img src="chart.png" alt="Sales rose 40% from January to March" />

<!-- Decorative image: hide it from screen readers -->
<img src="divider.png" alt="" />

<!-- Icon-only button: label it -->
<button aria-label="Close dialog">&times;</button>

Quando você gera imagens ou botões de ícone dinamicamente com JavaScript, defina o alt ou aria-label ao mesmo tempo em que cria o elemento — nunca disponibilize um controle sem rótulo.

Gerenciando o Foco em Conteúdo Dinâmico

Quando JavaScript abre um diálogo, revela novo conteúdo ou guia o usuário por um fluxo de múltiplas etapas, você deve mover o foco deliberadamente. Caso contrário, um usuário de teclado ou leitor de tela fica na posição antiga sem saber que algo mudou. O exemplo abaixo abre um modal, move o foco para dentro dele, aprisiona o foco para que Tab não possa escapar e restaura o foco ao botão de acionamento ao fechar.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Accessible Modal Example</title>
    <style>
        .overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); }
        .overlay.open { display: flex; align-items: center; justify-content: center; }
        .dialog { background: #fff; padding: 20px; border-radius: 6px; min-width: 260px; }
    </style>
</head>
<body>
    <button id="open-btn">Open dialog</button>

    <div class="overlay" id="overlay">
        <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="dialog-title">
            <h2 id="dialog-title">Confirm action</h2>
            <p>Are you sure you want to continue?</p>
            <button id="confirm-btn">Confirm</button>
            <button id="close-btn">Cancel</button>
        </div>
    </div>

    <script>
        const overlay = document.getElementById('overlay');
        const openBtn = document.getElementById('open-btn');
        const closeBtn = document.getElementById('close-btn');
        let lastFocused = null;

        function openDialog() {
            lastFocused = document.activeElement;       // remember the trigger
            overlay.classList.add('open');
            document.getElementById('confirm-btn').focus(); // move focus in
        }

        function closeDialog() {
            overlay.classList.remove('open');
            if (lastFocused) lastFocused.focus();        // restore focus
        }

        openBtn.addEventListener('click', openDialog);
        closeBtn.addEventListener('click', closeDialog);

        // Trap focus inside the dialog and close on Escape
        overlay.addEventListener('keydown', function (event) {
            if (event.key === 'Escape') { closeDialog(); return; }
            if (event.key !== 'Tab') return;

            const focusable = overlay.querySelectorAll('button');
            const first = focusable[0];
            const last = focusable[focusable.length - 1];

            if (event.shiftKey && document.activeElement === first) {
                event.preventDefault();
                last.focus();
            } else if (!event.shiftKey && document.activeElement === last) {
                event.preventDefault();
                first.focus();
            }
        });
    </script>
</body>
</html>

Pontos principais: role="dialog" e aria-modal="true" informam à tecnologia assistiva que se trata de um modal, aria-labelledby fornece um nome acessível, o foco é movido para dentro ao abrir e retorna ao acionador ao fechar, e Tab/Shift+Tab cicla dentro do diálogo em vez de escapar para trás. Para mais informações sobre foco programático, consulte Foco: focus / blur.

ARIA (Accessible Rich Internet Applications)

Mais sobre ARIA

Como você aprendeu até agora, ARIA (Accessible Rich Internet Applications) é um conjunto de atributos que podem ser adicionados a elementos HTML para melhorar a acessibilidade para usuários de tecnologias assistivas como leitores de tela. Os atributos ARIA ajudam a definir roles, propriedades e estados de elementos, tornando as aplicações web mais acessíveis.

A regra mais importante do ARIA é: se já existe um elemento HTML nativo com o comportamento que você precisa, use-o em vez de recriá-lo com ARIA. Um <button> é sempre melhor do que <div role="button">, porque o botão nativo fornece ativação por teclado, foco e semântica para leitores de tela sem nenhum JavaScript. ARIA não adiciona nenhum comportamento — apenas altera a forma como um leitor de tela descreve um elemento. Recorra ao ARIA quando nenhum elemento nativo se encaixar (abas personalizadas, controles deslizantes, visualizações em árvore, regiões dinâmicas).

Usando Atributos ARIA para Melhorar a Acessibilidade

Roles ARIA

Os roles ARIA definem o tipo de elemento, ajudando as tecnologias assistivas a entender sua finalidade.

<div role="button" aria-pressed="false">Toggle</div>

Este elemento não interativo usa o estado aria-pressed para indicar seu status de alternância.

Propriedades e Estados ARIA

As propriedades e estados ARIA fornecem informações adicionais sobre os elementos.

<!DOCTYPE html>
<html>
<head>
    <title>ARIA Example</title>
</head>
<body>
    <div role="alert" id="live-region">
        <!-- Dynamic content goes here -->
    </div>

    <script>
        document.getElementById('live-region').textContent = "This is an important message.";
    </script>
</body>
</html>

Experimente Você Mesmo »

Este exemplo usa propriedades ARIA para criar uma região dinâmica que anuncia mensagens importantes de forma automática. Uma região dinâmica é um elemento cujas alterações o leitor de tela lê em voz alta automaticamente, sem que o usuário precise mover o foco até ela — ideal para atualizações de status, erros de formulário ou mensagens de chat.

Você controla com que urgência a alteração é anunciada:

role="alert" (ou aria-live="assertive") interrompe o usuário imediatamente — reserve-o para erros e mensagens urgentes.
aria-live="polite" aguarda até que o usuário esteja ocioso antes de anunciar — use-o para status não urgentes como "Item adicionado ao carrinho".

<div aria-live="polite" id="status"></div>

<script>
    // Updating the text content triggers the announcement
    document.getElementById('status').textContent = 'Settings saved.';
</script>

O elemento de região dinâmica deve já existir no DOM antes de você atualizá-lo; se você injetar o elemento e seu texto ao mesmo tempo, muitos leitores de tela perderão a alteração.

Boas Práticas

Use HTML Semântico: Sempre prefira elementos HTML semânticos para fornecer significado e estrutura claros ao conteúdo.
Implemente Acessibilidade por Teclado: Garanta que todos os elementos interativos possam ser acessados e operados via teclado.
Gerencie o Foco de Forma Eficaz: Controle o foco programaticamente para guiar os usuários por mudanças de conteúdo dinâmico.
Use ARIA com Sabedoria: Aplique roles, propriedades e estados ARIA para aprimorar, não substituir, a semântica dos elementos HTML nativos.
Teste com Tecnologias Assistivas: Teste regularmente suas aplicações web com leitores de tela e outras tecnologias assistivas para garantir a acessibilidade.
Use Ferramentas de Teste Automatizado: Execute verificações com ferramentas como axe ou Lighthouse para identificar problemas comuns de acessibilidade precocemente.

Informação

Sempre garanta que seus modais e outros elementos dinâmicos sejam acessíveis gerenciando o foco de forma eficaz. Use JavaScript para aprisionar o foco dentro dos modais, circulando pelos elementos focalizáveis com a tecla Tab para evitar que usuários de teclado naveguem para fora do diálogo sem querer. Isso melhora a acessibilidade e proporciona uma experiência de usuário melhor.

Tópicos Relacionados

Selecionando elementos do DOM — encontre os elementos que você precisa rotular e focar.
Modificando o documento — defina atributos ARIA e texto alt ao criar elementos.
Tratamento de eventos no DOM — adicione handlers de click e keydown para suporte ao teclado.
Foco: focus / blur — gerencie o foco programaticamente para modais e conteúdo dinâmico.

Conclusão

A acessibilidade é um aspecto fundamental do desenvolvimento web que garante que seu conteúdo seja utilizável por todas as pessoas, independentemente de suas capacidades. Ao criar conteúdo acessível, usar técnicas para tornar a manipulação do DOM acessível e aproveitar os atributos ARIA, você pode melhorar significativamente a inclusividade e a usabilidade de suas aplicações web. A implementação dessas práticas não apenas ajuda a cumprir padrões legais, mas também melhora a experiência geral do usuário.

Prática

Quais das opções a seguir são considerações importantes para garantir a acessibilidade no desenvolvimento web?

Use HTML semântico para fornecer estrutura e significado.Certifique-se de que todas as imagens tenham texto alternativo.Dependa somente de cores para transmitir informações.Evite usar roles e atributos ARIA.Forneça navegabilidade por teclado para todos os elementos interativos.Use um layout fixo que não se adapte a diferentes tamanhos de tela.

Prática

Quando um diálogo modal JavaScript é aberto, o que você deve fazer para usuários de teclado e leitor de tela?

Mova o foco para dentro do diálogo ao abri-lo.Aprisionê o foco para que Tab não possa se mover para atrás do diálogo.Retorne o foco ao elemento que o abriu quando o diálogo fechar.Não faça nada, o navegador gerencia o foco automaticamente para diálogos personalizados.

Prática

Qual é a primeira regra do ARIA?

Prefira um elemento HTML nativo a recriar seu comportamento com ARIA.Adicione roles ARIA a todos os elementos da página.Os atributos ARIA adicionam comportamento de teclado automaticamente.