Lendo o APG: padrões, teclas e exemplos
Use o guia como especificação para qualquer componente.
Lendo o APG: padrões, teclas e exemplos é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Conheça o APG
O ARIA Authoring Practices Guide é o guia oficial do W3C para criar componentes personalizados da maneira correta. Quando você tiver dúvidas, consulte a especificação. 📘
Não reinvente a roda
O APG fornece padrões comprovados para abas, menus, caixas de diálogo e muito mais. Você copia uma receita testada em vez de tentar adivinhar as funções e teclas por conta própria.
Anatomia de um padrão
Todo padrão do APG tem as mesmas seções: uma visão geral, a interação pelo teclado, as funções e os atributos ARIA necessários e exemplos funcionais para estudo.
O teclado é o contrato
A tabela de Keyboard Interaction informa exatamente o que cada tecla deve fazer. As pessoas esperam essas teclas, portanto trate a tabela como um requisito obrigatório.
A tabela de funções
A tabela WAI-ARIA Roles, States, and Properties lista todos os atributos de que o componente precisa e quando cada um muda. Não ignore nenhum deles.
Estude os exemplos
Cada padrão inclui um exemplo funcional com o código-fonte completo. Leia-o, teste-o com um leitor de tela e depois adapte a marcação à sua própria interface.
<div role="tablist" aria-label="Settings">
<button role="tab" aria-selected="true">General</button>
</div>Prefira o nativo, sempre
O APG começa com um aviso: prefira o HTML nativo quando ele existir. Recorra a esses padrões somente quando nenhum elemento real executar a tarefa.
Os estados mudam em tempo de execução
Os padrões separam funções fixas de estados que mudam. Você define aria-expanded ou aria-selected com JavaScript conforme a interação da pessoa usuária, e não uma única vez no HTML.
O foco faz parte da especificação
Muitos padrões descrevem exatamente para onde o foco deve ir e como ele se move. Seguir essa coreografia do foco é tão importante quanto a própria ARIA.
Teste de acordo com o padrão
Depois de criar o componente, percorra a tabela de teclas do APG, tecla por tecla. Se todas as linhas passarem, você terá reproduzido o comportamento comprovado.
É um guia vivo
O APG é versionado e atualizado conforme a ARIA evolui. Por isso, consulte a edição atual em vez de uma publicação antiga que a copie.
Verificação rápida
Você está prestes a criar um componente personalizado. Para que o APG deve orientar você primeiro?
Recapitulação
O APG é a especificação do seu componente: comece pelo nativo e depois siga as funções, os estados, as teclas e o foco de cada padrão. Teste de acordo com as tabelas e você entregará um comportamento que as pessoas já conhecem. ✅
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 30
- Aulas
- 120
Perguntas Frequentes
A aula “Lendo o APG: padrões, teclas e exemplos” é grátis?
Sim — o texto completo de “Lendo o APG: padrões, teclas e exemplos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “Lendo o APG: padrões, teclas e exemplos”?
Use o guia como especificação para qualquer componente. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Lendo o APG: padrões, teclas e exemplos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Lendo o APG: padrões, teclas e exemplos
- Combobox e preenchimento automático do jeito certo
- Menu, barra de menus e botão de menu
- Grade em árvore e outros padrões avançados