Publica funciones dinámicas que sigan funcionando cuando JavaScript no esté disponible.
Este tablero es un checklist de revisión para profesionales web: 17 comprobaciones para aplicar a una página o componente dinámico antes de que la función se publique, que abarcan la base HTML estática que lo sustenta, qué sucede cuando falla, si alguien nota sus actualizaciones y si los usuarios de lectores de pantalla y quienes navegan solo con el teclado pueden utilizarla.
Fundamento HTML estático:
El contenido esencial, los enlaces y los metadatos se incluyen en el HTML inicial
La página es usable, no solo visible, cuando JavaScript no está disponible
Las funciones dinámicas se agregan sobre una base funcional en lugar de reemplazarla
Nada esencial está oculto en widgets solo de JavaScript a los que los rastreadores no pueden acceder
Degradación elegante:
Cada solicitud tiene manejo de errores explícito, para que una falla nunca sea silenciosa ni deje un indicador de carga perpetuo
Existe una alternativa funcional si la función dinámica falla por completo
Los botones de retroceso y avance se comportan como se espera después de las actualizaciones dinámicas
Los elementos que se parecen se comportan igual
Hacer visibles las actualizaciones:
La retroalimentación aparece junto a aquello sobre lo que el usuario acaba de actuar
Las actualizaciones usan tamaño, contraste o movimiento para atraer la atención
Los mensajes transitorios dejan un indicador persistente
Ninguna interacción exige mirar dos lugares a la vez
ARIA y accesibilidad para lectores de pantalla:
Los widgets personalizados tienen roles ARIA apropiados
Las áreas estructurales usan landmarks o elementos semánticos de HTML5
Las áreas que se actualizan dinámicamente están marcadas con aria-live
La implementación ha sido probada con un lector de pantalla real
La navegación solo con teclado funciona en todas partes, sin que el foco se pierda o quede atrapado
Cómo usar el tablero:
Para obtener tu propia copia, abre Tablero > Detalles > Duplicar. Solo necesitas una cuenta gratuita de Miro.
Para marcar un elemento, haz doble clic en su casilla y escribe x.
Duplica la tarjeta para cada función dinámica, componente o sprint.
Esta plantilla acompaña al curso de Interaction Design Foundation Fundamentos de UX: accesibilidad, SEO e interfaces dinámicas.
