Checklist WCAG 2.2 para quem cria cursos online: cada req…

Criar um curso online que pareça bem acabado e ofereça ótimo conteúdo é apenas metade do trabalho. Se alunos com deficiências não conseguem perceber seus vídeos, navegar por seus questionários ou entender suas instruções, seu curso está fundamentalmente quebrado para uma parte significativa do seu público. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.2, publicadas pelo W3C em outubro de 2023, fornecem o padrão técnico definitivo para tornar o conteúdo digital acessível. Este checklist traduz cada requisito relevante do WCAG 2.2 Nível AA em ações em linguagem simples que criadores de cursos online e designers instrucionais podem implementar imediatamente.

O WCAG 2.2 organiza seus 56 critérios de sucesso sob quatro princípios, conhecidos pelo acrônimo POUR: Perceptível, Operável, Compreensível e Robusto. Cada princípio aborda uma dimensão diferente da acessibilidade. Este artigo percorre os critérios mais relevantes para cursos online, explica o que cada um significa na prática, fornece orientações de implementação e destaca os erros que os criadores de cursos mais comumente cometem.

Use isso como uma referência de trabalho. Imprima, marque como favorito ou compartilhe com sua equipe. Se você está construindo cursos na Eduspera, muitos desses verificações são automatizados através da pontuação de acessibilidade integrada da plataforma — mas entender os requisitos subjacentes faz de você um melhor criador de cursos, independentemente das ferramentas que você usa.

Princípio 1: Perceptível

O conteúdo deve ser apresentado de maneiras que todos os usuários possam perceber — seja por visão, audição ou tato. Para criadores de cursos, este princípio governa como você lida com imagens, vídeo, áudio, cor e formatação de texto.

1.1.1 Conteúdo Não-Texto (Nível A)

O que significa: Todo elemento não-textual — imagens, diagramas, gráficos, ícones, infográficos — deve ter um texto alternativo que transmita a mesma informação. Leitores de tela não podem interpretar pixels; eles leem o texto alternativo que você fornece.

Como implementar para cursos online:

Escreva atributos alt descritivos para cada imagem em seus materiais do curso. Um diagrama mostrando "Três estágios do processo de design thinking: Empatia, Definição, Ideação" precisa de um texto alternativo que nomeie esses estágios, não apenas "diagrama".
Para infográficos complexos, forneça uma descrição longa no texto ao redor ou um link para uma versão detalhada em texto.
Imagens decorativas (separadores visuais, padrões de fundo) devem usar um alt="" vazio para que leitores de tela as ignorem completamente.
Ícones usados como botões ou links devem ter rótulos acessíveis — seja texto visível ou atributos aria-label.

Erros comuns:

Usar nomes de arquivos como texto alternativo (por exemplo, alt="IMG_2847.jpg").
Escrever texto alternativo que diz "imagem de" — o leitor de tela já anuncia como uma imagem.
Deixar o texto alternativo em branco em imagens informativas, tornando-as invisíveis para usuários de leitores de tela.

1.2.2 Legendas (Pré-gravadas) (Nível A)

O que significa: Todo vídeo pré-gravado com áudio deve incluir legendas sincronizadas. Isso não é negociável — legendas não são um recurso opcional para cursos online; são um requisito básico.

Como implementar para cursos online:

Use ferramentas de transcrição por IA (como OpenAI Whisper) para gerar legendas iniciais, depois revise e corrija manualmente. Legendas automáticas geralmente alcançam 90-95% de precisão, mas os 5% restantes frequentemente recaem sobre terminologia técnica, nomes próprios e jargão específico do domínio — exatamente as palavras que seus alunos precisam entender.
Certifique-se de que as legendas estão sincronizadas com o áudio — o tempo é importante. Uma legenda que aparece dois segundos atrasada quebra a experiência de aprendizado.
Inclua identificação do locutor quando várias pessoas estiverem falando.
Legende efeitos sonoros significativos (por exemplo, "[aplausos]", "[telefone tocando]") que contribuem para a compreensão.

Erros comuns:

Confiar apenas em legendas geradas automaticamente sem revisá-las.
Usar legendas embutidas (abertas) com baixo contraste ou tamanhos de fonte pequenos.
Omitir legendas em vídeos "curtos" — o requisito se aplica a todas as durações.

1.2.5 Audiodescrição (Pré-gravada) (Nível AA)

O que significa: Quando seu vídeo mostra informações visuais que não são descritas na trilha de áudio — como texto na tela, demonstrações ou transições visuais — você deve fornecer uma audiodescrição narrando esses elementos visuais.

Como implementar para cursos online:

A abordagem mais simples: narre tudo o que você mostra. Se você estiver demonstrando uma interface de software, descreva o que você está clicando e o que aparece na tela enquanto faz isso. Essa técnica, chamada "vídeo autodescritivo", elimina a necessidade de uma trilha de audiodescrição separada na maioria dos contextos instrucionais.
Para vídeos onde o conteúdo visual é essencial, mas não narrado (por exemplo, uma demonstração silenciosa ou um time-lapse), forneça uma trilha de audiodescrição separada ou uma descrição textual estendida.

Erros comuns:

Dizer "como você pode ver aqui" sem descrever o que "aqui" mostra.
Confiar em gravações de tela sem narrar as ações sendo realizadas.
Mostrar código ou fórmulas na tela sem lê-los em voz alta.

1.4.3 Contraste (Mínimo) (Nível AA)

O que significa: O texto deve ter uma relação de contraste de pelo menos 4.5:1 contra seu fundo. Texto grande (18pt ou 14pt em negrito) requer pelo menos 3:1. Isso garante legibilidade para usuários com baixa visão ou deficiências de visão de cores.

Como implementar para cursos online:

Verifique seus slides, miniaturas e overlays de texto na tela usando uma ferramenta de verificação de contraste (WebAIM Contrast Checker, por exemplo).
Evite colocar texto sobre fundos fotográficos ocupados — use um overlay semitransparente se necessário.
Tenha cuidado especial com texto de espaço reservado em formulários, que muitas vezes é estilizado em cinza claro sobre branco e não atende aos requisitos de contraste.

Erros comuns:

Usar cores de marca que parecem atraentes, mas não atendem às relações de contraste (comum com paletas pastéis).
Esquecer de verificar o contraste nos estados de foco, hover e ativo.
Usar cinza claro para texto "secundário" ou "menos importante" — se é conteúdo legível, precisa de contraste total.

1.4.5 Imagens de Texto (Nível AA)

O que significa: Não use imagens para exibir texto quando a mesma apresentação visual pode ser alcançada com texto real estilizado. Imagens de texto não podem ser redimensionadas, refluídas ou lidas por leitores de tela sem texto alternativo.

Como implementar para cursos online:

Use texto real (HTML, estilizado com CSS) para títulos, legendas, rótulos e chamadas em vez de incorporá-los como gráficos.
Quando capturas de tela de texto forem necessárias (por exemplo, mostrando um editor de código), forneça o conteúdo do texto como um bloco de código ou transcrição próxima.

Erros comuns:

Criar slides de título elaborados como imagens planas em vez de usar texto estilizado.
Usar capturas de tela de código em vez de blocos de código devidamente formatados com realce de sintaxe.

1.4.11 Contraste Não-Texto (Nível AA)

O que significa: Componentes da interface do usuário (botões, campos de formulário, indicadores de foco) e gráficos significativos (ícones, elementos de gráfico) devem ter uma relação de contraste de pelo menos 3:1 contra cores adjacentes.

Como implementar para cursos online:

Certifique-se de que botões de questionário, barras de progresso e controles de navegação sejam claramente visíveis contra seus fundos.
Verifique se as cores do gráfico são distinguíveis — não confie apenas na cor para diferenciar séries de dados. Adicione padrões, rótulos ou formas distintas.

Erros comuns:

Usar bordas finas e de baixo contraste em entradas de formulário.
Estilizar botões desativados de forma que os torne indistinguíveis do fundo.

Princípio 2: Operável

Os usuários devem ser capazes de navegar e interagir com seu curso usando qualquer método de entrada — teclado, dispositivo de comutação, controle de voz ou mouse. Para criadores de cursos, este princípio governa a navegação, o tempo e os elementos interativos.

2.1.1 Teclado (Nível A)

O que significa: Todo elemento interativo — botões, links, campos de formulário, controles de vídeo, respostas de questionário, menus de navegação — deve ser operável usando apenas um teclado. Nenhuma funcionalidade pode exigir exclusivamente um mouse ou trackpad.

Como implementar para cursos online:

Teste todo o fluxo do seu curso usando apenas a tecla Tab (para mover o foco), Enter ou Espaço (para ativar) e teclas de seta (dentro de grupos). Se você não puder completar qualquer ação, falha neste critério.
Elementos interativos personalizados (acordeões, abas, diálogos modais) precisam de manipuladores de eventos de teclado adequados — não apenas manipuladores de clique.
Certifique-se de que os players de vídeo respondam a atalhos de teclado: Espaço para reproduzir/pausar, teclas de seta para buscar, M para silenciar.

Erros comuns:

Criar interações de arrastar e soltar em questionários que não têm alternativa de teclado.
Usar elementos <div> estilizados como botões sem role="button" e tabindex="0" — eles parecem clicáveis, mas não podem receber foco do teclado.
Criar armadilhas de teclado onde o foco entra em um modal ou player de vídeo, mas não pode sair sem um mouse.

2.1.2 Sem Armadilha de Teclado (Nível A)

O que significa: Se o foco do teclado pode se mover para um componente, ele deve ser capaz de se mover para fora desse componente usando a interação padrão do teclado (tipicamente Tab ou Escape). Os usuários nunca devem ficar presos.

Como implementar para cursos online:

Teste todo o conteúdo incorporado (players de vídeo, simulações interativas, widgets de terceiros) tabulando para dentro deles e verificando se você pode tabular para fora.
Diálogos modais devem prender o foco dentro do diálogo enquanto estiverem abertos, mas retornar o foco para o elemento de gatilho quando fechados via Escape ou um botão de fechar.

Erros comuns:

Incorporar widgets de terceiros (enquetes, quadros brancos, playgrounds de código) que capturam o foco do teclado sem fornecer um mecanismo de escape.
Loops infinitos de tabulação dentro de componentes interativos complexos.

2.4.7 Foco Visível (Nível AA)

O que significa: Quando um elemento recebe foco do teclado, deve haver um indicador visível — tipicamente um contorno ou destaque — para que os usuários de teclado possam ver onde estão na página.

Como implementar para cursos online:

Nunca remova o contorno de foco padrão do navegador (outline: none) sem substituí-lo por um estilo de foco personalizado igualmente ou mais visível.
Use um estilo de foco que contraste bem com fundos claros e escuros. Um padrão comum é um contorno sólido de 2px com uma cor contrastante deslocada por um pequeno espaço.
Teste a visibilidade do foco em cada elemento interativo: links de navegação, botões de aula, opções de questionário, controles de vídeo.

Erros comuns:

Adicionar *:focus { outline: none; } no CSS para "limpar" o design — esta única linha quebra a acessibilidade do teclado em todo o seu curso.
Usar uma cor de foco que se mistura com o fundo do elemento.

2.5.7 Movimentos de Arrastar (Nível AA) — Novo no WCAG 2.2

O que significa: Qualquer funcionalidade que use um movimento de arrastar (clique e segure mais movimento) também deve ser alcançável através de uma única ação de ponteiro sem arrastar, a menos que arrastar seja essencial.

Como implementar para cursos online:

Se você tiver perguntas de arrastar e soltar em questionários ("arraste o rótulo para a área correta do diagrama"), forneça uma alternativa de dropdown ou clique para selecionar.
Listas de aulas reordenáveis devem suportar botões "mover para cima/mover para baixo" além de alças de arrastar.

Erros comuns:

Assumir que arrastar e soltar é a única interação intuitiva — muitos usuários não conseguem realizar movimentos de arrastar devido a deficiências motoras.
Fornecer uma alternativa de teclado, mas não uma alternativa de ponteiro único (clique/toque) — este critério aborda especificamente a entrada de ponteiro, não apenas o teclado.

2.4.4 Propósito do Link (No Contexto) (Nível A)

O que significa: O propósito de cada link pode ser determinado apenas pelo texto do link, ou pelo texto do link junto com seu contexto circundante. Usuários de leitores de tela frequentemente navegam tabulando por links — ouvir "clique aqui, clique aqui, clique aqui" é inútil.

Como implementar para cursos online:

Escreva texto de link descritivo: "Baixar o resumo do projeto (PDF, 2.3 MB)" em vez de "Clique aqui".
Para navegação de aula, use o título da aula como texto do link, não rótulos genéricos.

Erros comuns:

Usar "Leia mais" ou "Saiba mais" como texto de link sem contexto adicional.
Linkar URLs brutos como texto visível — eles são ilegíveis por leitores de tela e difíceis para todos.

2.2.1 Tempo Ajustável (Nível A)

O que significa: Se seu curso incluir atividades cronometradas (questionários, avaliações), os usuários devem ser capazes de desligar, ajustar ou estender o limite de tempo — com pelo menos uma dessas opções disponíveis.

Como implementar para cursos online:

Para questionários cronometrados, ofereça uma opção para solicitar tempo estendido ou desativar o cronômetro completamente.
Slideshows ou carrosséis que avançam automaticamente devem ter controles de pausa.
Expirações de sessão devem avisar os usuários antes da expiração e permitir extensão.

Erros comuns:

Codificar cronômetros de questionário sem qualquer opção de ajuste — isso afeta desproporcionalmente alunos com deficiências cognitivas, deficiências motoras ou aqueles que usam tecnologia assistiva que retarda a velocidade de interação.

Princípio 3: Compreensível

O conteúdo e o comportamento da interface devem ser compreensíveis para todos os usuários. Para criadores de cursos, este princípio aborda a clareza da linguagem, a navegação consistente e como seu curso lida com a entrada do usuário — particularmente em questionários e formulários.

3.1.1 Idioma da Página (Nível A)

O que significa: O idioma humano padrão de cada página deve ser programaticamente determinável — tipicamente através do atributo lang no elemento <html>. Leitores de tela usam isso para selecionar o mecanismo de pronúncia correto.

Como implementar para cursos online:

Certifique-se de que sua plataforma define o atributo lang correto (por exemplo, lang="en" para inglês, lang="es" para espanhol).
Se seu curso contiver passagens em um idioma diferente, envolva-as em um span ou div com o atributo lang apropriado para que leitores de tela mudem a pronúncia.

Erros comuns:

Usar lang="en" em uma página que está inteiramente em espanhol — o leitor de tela tentará pronúncia em inglês em palavras espanholas.
Omitir o atributo lang completamente, forçando o leitor de tela a adivinhar.

3.3.1 Identificação de Erro (Nível A)

O que significa: Quando um usuário comete um erro de entrada (enviando um questionário, preenchendo um formulário), o erro deve ser automaticamente detectado e descrito ao usuário em texto. A mensagem de erro deve identificar o campo específico e descrever o problema.

Como implementar para cursos online:

Quando uma pergunta de questionário for respondida incorretamente, indique claramente qual pergunta tem um erro e que tipo de resposta é esperada.
Para formulários de registro ou perfil, exiba mensagens de erro específicas ao lado do campo relevante: "O endereço de e-mail deve incluir um símbolo @" em vez de um banner genérico "Entrada inválida" no topo da página.
Use aria-describedby para associar programaticamente mensagens de erro com seus campos de formulário, para que leitores de tela anunciem o erro quando o foco se mover para o campo.

Erros comuns:

Indicar erros apenas através de cor (borda vermelha) sem texto — usuários que não podem perceber cor perdem completamente o erro.
Exibir uma única mensagem "Houve erros em sua submissão" sem especificar quais campos precisam de correção.

3.3.2 Rótulos ou Instruções (Nível A)

O que significa: Campos de formulário e componentes interativos devem ter rótulos ou instruções que descrevam a entrada esperada. Cada entrada de texto, dropdown, caixa de seleção e botão de rádio precisa de um rótulo visível, programaticamente associado.

Como implementar para cursos online:

Use o elemento <label> com um atributo for correspondente ao id da entrada, ou envolva a entrada dentro do elemento label.
Para perguntas de questionário, certifique-se de que o texto da pergunta está programaticamente associado às opções de resposta usando fieldset/legend ou aria-labelledby.
Forneça dicas de formato quando necessário: "Data de nascimento (DD/MM/AAAA)" ou "A senha deve ter pelo menos 8 caracteres."

Erros comuns:

Usar texto de espaço reservado como o único rótulo — espaços reservados desaparecem quando o usuário começa a digitar, deixando-o sem contexto.
Confiar na proximidade visual (rótulo aparece perto do campo) sem uma associação programática.

3.2.3 Navegação Consistente (Nível AA)

O que significa: Mecanismos de navegação que aparecem em várias páginas (barra lateral do curso, navegação de aula, barra de progresso) devem aparecer na mesma ordem relativa cada vez. Os usuários constroem memória espacial de sua interface; mudar o layout entre páginas os desorienta.

Como implementar para cursos online:

Mantenha sua navegação do curso (barra lateral, breadcrumb, botões de próximo/anterior) em uma posição consistente em todas as aulas.
Se você tiver um indicador de progresso, certifique-se de que ele apareça no mesmo local em cada página de aula.

Erros comuns:

Mover o botão "Próxima Aula" do final do conteúdo em algumas páginas para o topo em outras.
Mostrar elementos de navegação diferentes em páginas de questionário versus páginas de aula sem razão clara.

3.3.8 Autenticação Acessível (Mínimo) (Nível AA) — Novo no WCAG 2.2

O que significa: Processos de autenticação não devem exigir testes de função cognitiva (memorizar uma senha, resolver um CAPTCHA, reconhecer objetos em imagens) a menos que uma alternativa acessível esteja disponível. Os usuários devem ser capazes de autenticar via gerenciadores de senha, chaves de acesso, copiar e colar ou login único.

Como implementar para cursos online:

Não bloqueie colar em campos de senha — isso impede o uso de gerenciadores de senha.
Suporte login OAuth/SSO (Google, Microsoft) como uma alternativa à autenticação baseada em senha.
Se você usar CAPTCHAs, forneça uma alternativa de áudio ou use técnicas de CAPTCHA invisível que não requerem interação do usuário.

Erros comuns:

Desabilitar colar em campos de senha por "segurança" — isso na verdade reduz a segurança ao desencorajar senhas fortes e únicas.
Usar CAPTCHAs baseados em imagem sem qualquer alternativa.

3.2.6 Ajuda Consistente (Nível A) — Novo no WCAG 2.2

O que significa: Se sua plataforma fornecer mecanismos de ajuda (informações de contato, links de FAQ, suporte por chat), eles devem aparecer na mesma localização relativa em todas as páginas.

Como implementar para cursos online:

Coloque seu link de ajuda/suporte em uma localização consistente — tipicamente no rodapé ou em um elemento de navegação persistente.
Certifique-se de que o mecanismo de ajuda esteja disponível dentro do player do curso, não apenas no site principal.

Erros comuns:

Fornecer um widget de chat de ajuda no site de marketing, mas removê-lo da interface do player do curso.

Princípio 4: Robusto

O conteúdo deve ser robusto o suficiente para funcionar de forma confiável com tecnologias assistivas atuais e futuras. Para criadores de cursos, este princípio governa como o HTML do seu curso é estruturado e se as tecnologias assistivas podem interpretá-lo corretamente.

4.1.2 Nome, Função, Valor (Nível A)

O que significa: Todo componente da interface do usuário deve expor seu nome (rótulo), função (que tipo de elemento é) e valor ou estado atual para tecnologias assistivas. É assim que leitores de tela sabem que algo é um botão, se uma caixa de seleção está marcada ou qual é o valor atual de um controle deslizante.

Como implementar para cursos online:

Use elementos HTML semânticos: <button> para ações, <a> para navegação, <input type="checkbox"> para caixas de seleção. Estes expõem função e estado automaticamente.
Ao usar componentes personalizados, aplique funções e propriedades ARIA apropriadas: role="tabpanel", aria-selected="true", aria-expanded="false".
Para indicadores de progresso de questionário, use role="progressbar" com aria-valuenow, aria-valuemin e aria-valuemax.

Erros comuns:

Criar um player de vídeo personalizado com botões <div> que não têm funções ARIA — leitores de tela não podem identificá-los como interativos.
Usar aria-label que contradiz o texto visível — usuários de leitores de tela ouvem uma coisa enquanto usuários videntes veem outra.

4.1.3 Mensagens de Status (Nível AA)

O que significa: Mensagens de status — confirmações de sucesso, contagens de erros, atualizações de progresso — devem ser anunciadas para tecnologias assistivas sem receber foco. Os usuários não devem ter que procurar por mudanças na página.

Como implementar para cursos online:

Use regiões ao vivo ARIA (role="status" ou role="alert") para mensagens como "Questionário enviado com sucesso" ou "3 de 10 perguntas respondidas".
Para atualizações de progresso em tempo real (progresso de upload, conclusão de aula), use aria-live="polite" para que o anúncio não interrompa a atividade atual do usuário.
Para erros críticos, use role="alert" que aciona um anúncio imediato.

Erros comuns:

Exibir uma notificação de sucesso em toast que é visível na tela, mas não anunciada para leitores de tela.
Usar aria-live="assertive" para atualizações não críticas, causando interrupções disruptivas.

Estrutura HTML Semântica

O que significa: Seu conteúdo do curso deve usar semântica HTML adequada — cabeçalhos (<h1> a <h6>) em ordem lógica, listas para itens listados, tabelas para dados tabulares e marcos (<nav>, <main>, <aside>) para regiões da página. Isso é fundamental para o suporte a tecnologias assistivas.

Como implementar para cursos online:

Estruture o conteúdo da sua aula com uma hierarquia clara de cabeçalhos: um <h1> para o título da aula, <h2> para seções principais, <h3> para subseções. Nunca pule níveis de cabeçalho.
Use <ul> ou <ol> para listas — usuários de leitores de tela confiam na semântica de lista para entender a estrutura e a contagem de itens.
Envolva sua navegação do curso em um marco <nav> para que usuários de leitores de tela possam pular diretamente para ela.

Erros comuns:

Usar texto em negrito para simular cabeçalhos — parece um cabeçalho visualmente, mas é invisível para o recurso de navegação de cabeçalhos de leitores de tela.
Aninhar conteúdo em elementos <div> genéricos sem qualquer significado semântico.

Uso Correto de ARIA

O que significa: Atributos ARIA (Aplicações Ricas para Internet Acessíveis) complementam a semântica HTML para widgets complexos. No entanto, ARIA incorreta é pior do que nenhuma ARIA — ela engana ativamente as tecnologias assistivas.

Como implementar para cursos online:

Siga a primeira regra de ARIA: se você pode usar um elemento HTML nativo que já tem a semântica que você precisa, use-o em vez de adicionar ARIA a um elemento genérico.
Se você deve usar ARIA, siga o Guia de Práticas de Autoria WAI-ARIA para o padrão específico (abas, acordeões, diálogos, etc.).
Teste com um leitor de tela — NVDA (gratuito, Windows), VoiceOver (embutido, macOS/iOS) ou TalkBack (embutido, Android).

Erros comuns:

Adicionar role="button" a um <div> mas esquecer de adicionar manipuladores de eventos de teclado — o elemento anuncia como um botão, mas não responde a Enter ou Espaço.
Usar aria-hidden="true" em conteúdo que é visível e interativo — isso o esconde de leitores de tela enquanto permanece visível na tela, criando uma desconexão confusa.

Checklist WCAG 2.2 Imprimível para Criadores de Cursos

Use este checklist para auditar o conteúdo do seu curso antes de publicá-lo. Cada item mapeia para um critério de sucesso específico do WCAG 2.2.

Perceptível

☐ Todas as imagens têm texto alternativo descritivo (1.1.1)
☐ Imagens decorativas usam atributos alt vazios (1.1.1)
☐ Todos os vídeos têm legendas precisas e sincronizadas (1.2.2)
☐ Vídeos com informações apenas visuais têm audiodescrições (1.2.5)
☐ A relação de contraste do texto é de pelo menos 4.5:1 (1.4.3)
☐ A relação de contraste do texto grande é de pelo menos 3:1 (1.4.3)
☐ A relação de contraste do componente da UI é de pelo menos 3:1 (1.4.11)
☐ Texto real é usado em vez de imagens de texto (1.4.5)
☐ O conteúdo é legível quando ampliado para 200% (1.4.4)
☐ A informação não é transmitida apenas por cor (1.4.1)

Operável

☐ Todos os elementos interativos são acessíveis por teclado (2.1.1)
☐ Não existem armadilhas de teclado em nenhum lugar do curso (2.1.2)
☐ A ordem do foco segue uma sequência lógica (2.4.3)
☐ O indicador de foco é claramente visível em todos os elementos (2.4.7)
☐ O texto do link descreve o destino ou propósito (2.4.4)
☐ Os títulos das páginas são descritivos e únicos (2.4.2)
☐ Arrastar e soltar tem uma alternativa de clique/toque (2.5.7)
☐ Atividades cronometradas podem ser estendidas ou desativadas (2.2.1)
☐ Nenhum conteúdo pisca mais de 3 vezes por segundo (2.3.1)
☐ Link de pular navegação está disponível (2.4.1)

Compreensível

☐ O idioma da página é definido via o atributo lang (3.1.1)
☐ Erros de formulário são identificados em texto com descrições específicas (3.3.1)
☐ Todos os campos de formulário têm rótulos visíveis e associados (3.3.2)
☐ A navegação é consistente em todas as páginas (3.2.3)
☐ Mecanismos de ajuda aparecem em uma localização consistente (3.2.6)
☐ A autenticação não requer testes de função cognitiva (3.3.8)
☐ Sugestões de erro são fornecidas quando possível (3.3.3)
☐ O conteúdo usa linguagem clara e simples apropriada para o público

Robusto

☐ Elementos HTML semânticos são usados corretamente (4.1.2)
☐ Componentes personalizados têm funções e estados ARIA apropriados (4.1.2)
☐ Mensagens de status usam regiões ao vivo ARIA (4.1.3)
☐ O conteúdo funciona com os principais leitores de tela (NVDA, VoiceOver, JAWS)
☐ A hierarquia de cabeçalhos é lógica e sequencial
☐ O HTML valida sem erros críticos

Como a Eduspera Automatiza a Conformidade com WCAG

Construir um curso acessível do zero é um esforço substancial — mas não precisa ser manual. Eduspera integra verificações de acessibilidade diretamente no fluxo de trabalho de criação de cursos, capturando problemas antes que eles cheguem aos seus alunos.

Pontuação de acessibilidade: Cada curso recebe uma pontuação de acessibilidade em tempo real com base em verificações automatizadas do WCAG 2.2 AA. A pontuação é atualizada à medida que você adiciona conteúdo, sinalizando texto alternativo ausente, problemas de contraste e problemas estruturais imediatamente.
Legendas alimentadas por IA: Vídeos enviados para a Eduspera são automaticamente transcritos usando IA, gerando legendas que você pode revisar e editar diretamente na plataforma — abordando SC 1.2.2 sem exigir ferramentas ou fluxos de trabalho separados.
Design orientado por teclado: Todo o player do curso — navegação, controles de vídeo, questionários e rastreamento de progresso — é construído com acessibilidade total por teclado desde o início, não adaptado posteriormente.
Saída HTML semântica: O conteúdo do curso criado no editor de texto rico da Eduspera produz automaticamente HTML limpo e semântico com hierarquia de cabeçalhos adequada, estruturas de lista e atributos ARIA.
Mecanismo de questionário acessível: Componentes de questionário incluem rótulos adequados, mensagens de erro e gerenciamento de foco desde o início, abordando múltiplos critérios WCAG (3.3.1, 3.3.2, 2.1.1, 4.1.2) sem exigir conhecimento técnico dos criadores de cursos.

O objetivo não é substituir seu entendimento de acessibilidade — este checklist existe porque entender os princípios é importante. O objetivo é automatizar as verificações repetitivas para que você possa se concentrar em criar conteúdo educacional excelente que atenda a todos os alunos. Leia mais sobre como tornar cursos online acessíveis para uma perspectiva mais ampla sobre design instrucional acessível.

Perguntas Frequentes

Preciso atender ao WCAG Nível A, AA ou AAA para meu curso online?

O WCAG Nível AA é o padrão internacionalmente reconhecido para conformidade com acessibilidade na web e é o nível referenciado pela maioria das legislações, incluindo o Ato de Acessibilidade Europeu, o Ato dos Americanos com Deficiências (na prática) e a Seção 508. O Nível A é o mínimo absoluto e é insuficiente para conformidade. O Nível AAA inclui critérios aprimorados que são valiosos, mas não tipicamente exigidos — muitos critérios AAA são impraticáveis para aplicação universal (por exemplo, exigir interpretação em linguagem de sinais para todo o conteúdo de vídeo). Almeje o Nível AA como sua base, e adote critérios AAA individuais onde eles beneficiem sua população específica de alunos.

Quais ferramentas posso usar para testar meu curso para conformidade com WCAG?

Ferramentas automatizadas capturam aproximadamente 30-40% dos problemas do WCAG. Use axe DevTools (extensão de navegador), WAVE ou Lighthouse para varredura automatizada. Para os 60-70% restantes, o teste manual é essencial: navegue pelo seu curso usando apenas um teclado, teste com um leitor de tela (NVDA no Windows, VoiceOver no macOS), verifique o contraste de cores com o Contrast Checker do WebAIM e peça a usuários com deficiências para testar seu curso. Plataformas como a Eduspera integram varredura de acessibilidade automatizada diretamente no fluxo de trabalho de autoria, capturando problemas comuns antes de você publicar.

Posso adaptar um curso existente para conformidade com WCAG, ou preciso reconstruir do zero?

Adaptar é quase sempre possível e geralmente mais prático do que reconstruir. Comece executando uma varredura automatizada para identificar os problemas mais comuns — texto alternativo ausente, contraste insuficiente, campos de formulário sem rótulo — pois esses podem frequentemente ser corrigidos rapidamente. Em seguida, aborde problemas estruturais: hierarquia de cabeçalhos, navegação por teclado e gerenciamento de foco. A correção mais demorada para a maioria dos criadores de cursos é adicionar legendas a vídeos existentes, mas ferramentas de transcrição por IA reduziram drasticamente o esforço necessário. Priorize correções por impacto: barreiras que bloqueiam completamente o acesso (armadilhas de teclado, legendas ausentes) devem ser corrigidas primeiro, seguidas por problemas que degradam a experiência (contraste ruim, texto alternativo ausente).

Checklist WCAG 2.2 para quem cria cursos online: cada requisito explicado