Lectura de la APG: patrones, teclas y ejemplos
Use la guía como especificación para cualquier widget.
Lectura de la APG: patrones, teclas y ejemplos es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Conozca el APG
La ARIA Authoring Practices Guide es la guía oficial del W3C para crear widgets personalizados correctamente. Cuando tenga dudas, consúltela como especificación. 📘
No lo reinvente
El APG le proporciona patrones probados para pestañas, menús, diálogos y mucho más. Puede copiar una receta verificada en lugar de adivinar los roles y las teclas.
Anatomía de un patrón
Cada patrón del APG tiene las mismas secciones: una descripción general, la interacción con el teclado, los roles y atributos ARIA necesarios y ejemplos interactivos para estudiar.
El teclado es el contrato
La tabla Keyboard Interaction indica exactamente qué debe hacer cada tecla. Los usuarios esperan estas teclas, así que trate la tabla como un requisito obligatorio.
La tabla de roles
La tabla WAI-ARIA Roles, States, and Properties enumera todos los atributos que necesita el widget y cuándo cambia cada uno. No omita ninguno.
Estudie los ejemplos
Cada patrón incluye un ejemplo funcional con todo el código fuente. Léalo, pruébelo con un lector de pantalla y después adapte el marcado a su propia interfaz.
<div role="tablist" aria-label="Settings">
<button role="tab" aria-selected="true">General</button>
</div>HTML nativo, siempre
El APG comienza con una advertencia: prefiera el HTML nativo cuando exista. Recurra a estos patrones solo cuando ningún elemento real pueda cumplir la función.
Los estados cambian en tiempo de ejecución
Los patrones separan los roles fijos de los estados cambiantes. Establezca aria-expanded o aria-selected con JavaScript mientras el usuario interactúa, no una sola vez en el HTML.
El foco forma parte de la especificación
Muchos patrones describen exactamente adónde debe ir el foco y cómo se desplaza. Seguir esa coreografía del foco es tan importante como la propia ARIA.
Pruebe según el patrón
Una vez creado el widget, recórralo siguiendo la tabla de teclado del APG, tecla por tecla. Si supera todas las filas, habrá reproducido el comportamiento probado.
Es una guía viva
El APG está versionado y se actualiza a medida que evoluciona ARIA, así que consulte la edición actual en lugar de una publicación antigua que la copie.
Comprobación rápida
Está a punto de crear un widget personalizado. ¿Hacia qué debería orientarle primero el APG?
Resumen
El APG es la especificación de su widget: use primero elementos nativos y después siga los roles, estados, teclas y el foco de cada patrón. Pruébelo con sus tablas para ofrecer un comportamiento que los usuarios ya conocen. ✅
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 30
- Lecciones
- 120
Preguntas frecuentes
¿La lección «Lectura de la APG: patrones, teclas y ejemplos» es gratis?
Sí — el texto completo de «Lectura de la APG: patrones, teclas y ejemplos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Lectura de la APG: patrones, teclas y ejemplos»?
Use la guía como especificación para cualquier widget. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Lectura de la APG: patrones, teclas y ejemplos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Lectura de la APG: patrones, teclas y ejemplos
- Combobox y autocompletado bien implementados
- Menu, Menubar y el botón de menú
- Treegrid y otros patrones avanzados