Categoría 9: Accesibilidad y cumplimiento

Cree una sección de menú de navegación que:

• Utiliza roles y etiquetas ARIA para todos los elementos interactivos
• Admite navegación con teclado e indicadores de enfoque.
• Tiene suficiente contraste de color para todos los textos e íconos.

Cree una sección de formulario (por ejemplo, contacto, boletín informativo) que:

• Utiliza asociaciones de etiquetas adecuadas para todas las entradas
• Admite navegación con teclado y compatibilidad con lectores de pantalla.
• Proporciona mensajes claros de error y éxito.

Cree un botón de alternancia para el modo de alto contraste que:

• Aumenta el contraste del texto, los fondos y los botones.
• Recuerda la preferencia del usuario con localStorage
• Es accesible y visible en todas las páginas.

Generar una sección de acordeón que:

• Utiliza atributos ARIA-expandidos y ARIA-controles
• Es totalmente navegable mediante teclado.
• Incluye estados de enfoque visualmente claros

Construya un bloque de contenido que:

• Está oculto visualmente, pero es legible para los lectores de pantalla.
• Permite a los comerciantes agregar notas o descripciones de accesibilidad.

Crea una sección de galería de imágenes que:

• Garantiza que todas las imágenes tengan texto alternativo descriptivo.
• Admite navegación mediante teclado entre imágenes.
• Utiliza roles ARIA para la galería y los controles

Generar paginación para colecciones/blogs que:

• Utiliza etiquetas y roles ARIA
• Tiene un enfoque claro y estados activos.
• Es totalmente navegable mediante teclado.

Cree un banner de consentimiento de cookies que:

• Bloquea los scripts de análisis y marketing hasta que se acepten
• Permite a los usuarios gestionar sus preferencias.
• Es accesible y compatible con dispositivos móviles.

Crea una sección modal o emergente que:

• Atrapa el foco del teclado dentro del modal cuando está abierto
• Se puede cerrar con la tecla ESC o el botón de cerrar
• Se anuncia a los lectores de pantalla.

Construya una sección de tabla que:

• Utiliza marcado de tabla semántica con <caption>, <th> y <td>
• Admite navegación con teclado y compatibilidad con lectores de pantalla.
• Tiene suficiente contraste de color y bordes claros.

Genere una sección para una declaración de accesibilidad que:

• Está vinculado desde el encabezado o pie de página
• Permite a los comerciantes editar el estado de cuenta en el editor de temas.
• Es claro y fácil de leer.

Cree una región activa para contenido dinámico (por ejemplo, actualizaciones del carrito, notificaciones) que:

• Utiliza aria-live="polite" o aria-live="asertive"
• Anuncia actualizaciones a los lectores de pantalla automáticamente

Construya una sección de temporizador de cuenta regresiva que:

• Anuncia cambios de horario para los lectores de pantalla
• Utiliza etiquetas ARIA para elementos del temporizador
• ¿Es accesible el teclado?

Crea una sección de íconos sociales que:

• Incluye etiquetas descriptivas para cada ícono (por ejemplo, "Síguenos en Twitter")
• Admite navegación mediante teclado y estados de enfoque.

Cree un selector de variantes de producto que:

• Utiliza roles ARIA para botones de opción o menús desplegables
• Anuncia la variante seleccionada a los lectores de pantalla
• ¿Es navegable el teclado?

Generar una sección deslizante o carrusel que:

• Tiene controles de pausa/reproducción y etiquetas ARIA
• Es totalmente navegable mediante teclado.
• Anuncia cambios de diapositivas a los lectores de pantalla

Crea una sección de ruta de navegación que:

• Utiliza marcado semántico y etiquetas ARIA
• Es fácilmente navegable mediante teclado y lectores de pantalla.

Construya una sección de notificación de errores y éxitos que:

• Utiliza regiones en vivo de ARIA para anuncios
• Es visualmente distinto y amigable con el lector de pantalla.

Crea un enlace "Ir al contenido" en la parte superior de cada página que:

• Es visible en el foco del teclado
• Salta directamente al área de contenido principal

Genere secciones de páginas de políticas (privacidad, términos, devoluciones) que:

• Utilice encabezados semánticos y una estructura clara
• Son fáciles de leer y navegar para todos los usuarios.

Cree un conmutador de paleta de colores que:

• Permite a los usuarios elegir entre temas de colores accesibles.
• Garantiza que todas las combinaciones cumplan con los estándares de contraste WCAG AA
• Recuerda las preferencias del usuario

Crea un selector de idioma que:

• Utiliza roles y etiquetas ARIA
• Anuncia cambios de idioma en los lectores de pantalla
• ¿Es accesible el teclado?