Pular para o conteúdo
Octo × Front-end Pedir um diagnóstico

Octo para front-end e acessibilidade · braços dev e revisor

A tela pronta é a tela que todo mundo consegue usar.

A WCAG 2.2 é Recomendação do W3C e norma ISO/IEC 40500:2025. No Brasil, a Lei Brasileira de Inclusão torna obrigatória a acessibilidade nos sites de empresas com sede ou representação no País. Nesta etapa atuam dois braços do Octo: o de desenvolvimento constrói a tela com os critérios AA conferidos e o revisor a testa em desktop e celular pelo caminho real. O aceite da tela é do líder técnico.

Pedir um diagnóstico Ver o que faz
O layout aprovado, os componentes e os critérios AA da WCAG 2.2 entram no Octo, que devolve a tela em desktop e celular e a lista de falhas por critério. ENTRADA LAYOUT APROVADO COMPONENTES WCAG 2.2 AA TELA DESKTOP E CELULAR FALHAS POR CRITÉRIO tela → contraste · alvo · foco · rótulo OCTO × SOFTWARE FRONT-END ES-03
BraçosDev e revisoratuam nesta etapa
WCAG 2.2ISO/IEC 40500:2025Recomendação do W3C
Fontes6listadas no fim da página
01

O que o Octo faz na tela.

Quatro entregas possíveis. O layout e o aceite da tela são do líder técnico e de quem desenha a interface.

Tela com os critérios AA

O braço de desenvolvimento constrói a tela conferindo contraste, tamanho do alvo, foco visível e rótulos dos campos, na branch da atividade.

Entrega: tela na branch, pronta para revisão

Teste em desktop e celular

O revisor abre a tela pelo caminho real, nas larguras de desktop e de celular, e confere pelo conteúdo, não só pela ausência de erro.

Entrega: relatório da tela nas duas larguras

Falhas por critério

O que não atende vira lista com o critério da WCAG correspondente, como contraste mínimo ou tamanho do alvo, para a equipe priorizar.

Entrega: lista de falhas por critério

ARIA só quando ajuda

O código usa HTML com semântica antes de recorrer a ARIA, porque ARIA errado prejudica quem usa leitor de tela.

Entrega: marcação revisada
02

Oito braços, uma tela.

O mesmo ciclo do Octo, aplicado a esta etapa. Cada braço tem um papel estreito; quem comanda e aprova é o líder técnico da sua empresa.

  1. Descoberta

    Lê o front-end atual

    Framework, componentes, folhas de estilo e como as telas se montam hoje.

  2. Dados

    Liga a tela ao dado

    De onde vem cada campo, para a tela não mostrar o que o perfil não pode ver.

  3. Segurança

    Confere o que a tela expõe

    Campos sensíveis, mensagens de erro e o que fica visível para cada perfil.

  4. Arquitetura

    Planeja a tela

    Componentes, estados e critérios AA que a entrega precisa cumprir.

  5. Desenvolvimento

    Constrói a tela

    HTML com semântica, contraste, alvo, foco e rótulos conferidos.

  6. Revisão

    Testa nas duas larguras

    Desktop e celular, pelo caminho real e com o perfil de menor privilégio.

  7. Publicação

    Publica com o seu ok

    A tela só vai para produção com a aprovação de quem comanda.

  8. Documentação

    Registra os critérios

    Quais critérios foram conferidos e o que ficou pendente.

O Octo não declara conformidade. Aprovar o layout, decidir o nível de conformidade a declarar e assinar qualquer declaração de acessibilidade é da sua equipe; teste com pessoas com deficiência não é feito pelo Octo.

03

Alguns critérios que o Octo confere.

Critérios da WCAG 2.2 conferidos na tela. A Recomendação do W3C continua sendo a referência.

CritérioO que pedeBase
1.4.3 Contraste mínimo (AA)4,5:1 para texto; 3:1 para texto grandeW3C, Understanding WCAG 2.2
2.5.8 Tamanho do alvo, mínimo (AA)Pelo menos 24 por 24 pixels CSS, com exceçõesW3C, WCAG 2.2
2.4.11 Foco não encoberto, mínimo (AA)O componente com foco não fica totalmente escondido por conteúdo do autorW3C, WCAG 2.2
3.3.8 Autenticação acessível, mínimoNenhuma etapa exige teste de função cognitiva, como lembrar senha ou resolver quebra-cabeçaW3C, WCAG 2.2
04

Do pedido à rotina.

Três degraus. Cada um só faz sentido depois que o anterior mostrou resultado na sua equipe.

Proposta, não promessa

1 Hoje

Tela nova com AA

As telas novas já saem com os critérios AA conferidos.

  • Contraste, alvo, foco e rótulos
  • Teste em desktop e celular
Ganho: acessibilidade nasce com a tela
2 Próximo

Telas existentes

O revisor percorre as telas que já existem e lista as falhas por critério.

  • Lista priorizada por critério
  • Correções em atividades pequenas
Ganho: a dívida fica visível e ordenada
3 Depois

Conferência em toda entrega

Toda atividade de tela termina com a conferência nas duas larguras.

  • Relatório de tela em cada entrega
  • Critérios registrados no dossiê
Ganho: o que foi corrigido não volta
05

Confirmado em fonte.

Cada ponto abaixo tem fonte publicada pela organização responsável pela norma, pela especificação ou pela ferramenta, ou em lei federal. As fontes estão na seção seguinte.

8

pontos com fonte publicada, cada um com a referência indicada ao lado.

ConfirmadoWCAG 2.2
A WCAG 2.2 é Recomendação do W3C; a versão atual é datada de 12 de dezembro de 2024.Fonte: W3C, WCAG 2.2
ConfirmadoPrincípios e níveis
A WCAG se organiza em quatro princípios (perceptível, operável, compreensível e robusto) e três níveis de conformidade: A, AA e AAA.Fonte: W3C, WCAG 2.2
ConfirmadoTamanho do alvo
O critério 2.5.8, novo na 2.2 e de nível AA, pede que o alvo de toque ou clique tenha pelo menos 24 por 24 pixels CSS, com exceções.Fonte: W3C, WCAG 2.2
ConfirmadoContraste mínimo
O critério 1.4.3 (AA) pede contraste de pelo menos 4,5:1; texto grande, pelo menos 3:1.Fonte: W3C, Understanding WCAG 2.2, contraste mínimo
ConfirmadoNorma ISO
A WCAG 2.2 é norma ISO aprovada, a ISO/IEC 40500:2025. O W3C recomenda usar a versão mais nova; as versões 2.0, 2.1 e 2.2 são compatíveis entre si.Fonte: W3C, WCAG Overview
ConfirmadoLei Brasileira de Inclusão
É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País.Fonte: Planalto, Lei 13.146/2015, art. 63
ConfirmadoeMAG
O eMAG 3.1, de abril de 2014, baseado na WCAG 2.0, é de observância obrigatória nos sítios e portais do governo brasileiro.Fonte: Governo Digital, modelo de acessibilidade
ConfirmadoARIA
O guia de práticas de ARIA do W3C avisa que nenhum ARIA é melhor que ARIA ruim.Fonte: W3C, ARIA Authoring Practices
06

O que o Octo faz e o que fica com vocês.

O Octo prepara tudo, mas não assina. O documento que vale continua com quem responde por ele.

O Octo prepara

Mapeia, planeja, programa na branch da atividade, revisa com evidência e prepara a publicação: planos, código, revisões, relatórios de segurança e o dossiê do sistema.

Entrega: material pronto para conferir

A sua equipe confere

Quem comanda é o líder técnico ou o desenvolvedor sênior da empresa: aprova o plano, revisa o PR e faz o merge. Nada vai para produção sem a aprovação de quem comanda.

Etapa: aprovação por quem comanda

Quem assina e responde

O Octo não assina e não responde pelo sistema. Quem aceita o risco e responde pelo sistema em produção é o líder técnico; laudo ou parecer de segurança é assinado por profissional da empresa.

Responsável: líder técnico da empresa
07

Fontes.

W3C, legislação federal publicada no Planalto e Governo Digital. Consultadas em 31/10/2026.

Telas que todo mundo usa.

O diagnóstico começa pelas telas que você já tem, sem alterar nada. Você recebe a lista do que falha por critério e decide com ela na mão.

Pedir um diagnóstico