Accesibilidad
- Anillo de foco que sigue la forma.
clip-pathcorta el contorno de foco nativo, así que en los elementos enfocables ns-frame dibuja un anillo con:focus-visible(--ns-focus,--ns-focus-width). - El anillo, sólo para el teclado. El núcleo anota con qué se interactúa (
data-ns-input="pointer"o"keyboard"en<html>). Tras un toque o un clic no se dibuja ningún anillo de foco, tampoco el del sitio: un foco movido por código (una hoja que al cerrarse lo devuelve a su botón, un salto que enfoca la sección) lo encendía en Safari con un rectángulo que no sigue la forma. Con el teclado, el anillo sigue siempre ahí. - Alto contraste (Windows). Con
forced-colors: activelos bordes usan colores del sistema (CanvasText; el foco,Highlight); los marcos sin borde reciben uno para no quedar invisibles, y las animaciones decorativas se ocultan (la barra de progreso se mantiene). - RTL. Las esquinas lógicas (
ss,se,es,ee) y los bordesstart/endse invierten condirection: rtl. El carrusel invierte sus flechas de teclado. - Movimiento reducido. Con
prefers-reduced-motionse desactivan animaciones de borde, morph, aperturas, brillos y luces animadas; las View Transitions y el scroll del carrusel pasan a ser instantáneos. - Semántica intacta. Las capas decorativas son
aria-hiddeny no reciben eventos; el contenido nunca sale del HTML (nada se pinta en canvas ni en imágenes). - Componentes con los patrones de WAI-ARIA: popovers con la Popover API nativa (Esc, click fuera,
aria-describedbyen tooltips); toasts en una regiónaria-liveconrole="alert"para errores; carrusel conaria-roledescription, “n de N” yaria-current; skeletons conaria-busy. - Texto que no se recorta.
data-ns-padcalcula el padding según la geometría de cada corte, yns-frame/auditdetecta en desarrollo cualquier texto recortado o a menos de N px del borde.