Design systems accessibles: components, documentació i tokens

Un design system (sistema de disseny) és el conjunt de components, estils, regles i documentació que una organització reutilitza en tots els seus productes. És la palanca més potent per a l'accessibilitat: si el botó, el camp de formulari, el diàleg i la pestanya del sistema són accessibles, centenars de pantalles ho seran sense cap esforç addicional; si no ho són, centenars de pantalles heretaran els mateixos errors. En aquesta lliçó veuràs què fa accessible un design system en les seves tres capes (components, documentació i tokens) i com governar-lo.

Capa 1: components

Un component accessible és el que funciona amb el teclat, exposa a les tecnologies de suport un nom, una funció, un estat i un valor correctes, i compleix els requisits visuals (contrast, focus, mida). Les regles de construcció:

Primer, HTML natiu

Abans de crear un component personalitzat, pregunta't si un element natiu ho resol: <button>, <a>, <select>, <details>, <dialog>, <input type="checkbox">. Els elements natius porten de franc el comportament de teclat, la semàntica i la compatibilitat amb les tecnologies de suport. La primera regla d'ARIA diu precisament això.

Patrons APG per al que no és natiu

Per a pestanyes, acordions, menús, quadres combinats, controls lliscants o arbres, segueix el patró corresponent de l'ARIA Authoring Practices Guide (s'obre en una finestra nova) (APG) del W3C: defineix funcions, estats, propietats i, sobretot, la interacció amb el teclat esperada (fletxes per moure's entre pestanyes, Inici i Fi, Esc per tancar). Un component que s'inventa el seu propi teclat és un component que ningú no sap fer servir.

Estats complets i focus gestionat

Cada component defineix els seus estats (repòs, hover, focus, actiu, deshabilitat, error, carregant, seleccionat) amb el contrast verificat, i gestiona el focus quan correspon: un diàleg porta el focus a dins quan s'obre, el reté i el retorna a l'element que l'ha obert quan es tanca.

<div class="icon-btn" onclick="cerrar()">
  <svg>…</svg>
</div>

<button type="button" class="icon-btn" aria-label="Tanca">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

Capa 2: documentació

Un component accessible mal utilitzat produeix una pantalla inaccessible. La documentació de cada component ha d'incloure una secció d'accessibilitat amb, com a mínim:

• Quan s'ha de fer servir i quan no: un enllaç navega, un botó actua; un diàleg modal només per a tasques que exigeixen atenció exclusiva.
• Interacció amb el teclat: taula de tecles i comportament.
• Semàntica exposada: funció, nom, estats i com es calculen (quina propietat alimenta aria-label, quan es fa servir aria-describedby).
• Propietats obligatòries d'accessibilitat: per exemple, label en camps, alt en imatges, title en diàlegs.
• Criteris WCAG relacionats i com els compleix el component.
• El que ha de fer el consumidor: el component no pot decidir el text del botó, l'ordre a la pàgina ni el context; la documentació ho assenyala.
• Proves fetes: amb quins navegadors i tecnologies de suport s'ha verificat, i data.

Capa 3: tokens

Els design tokens són els valors de disseny amb nom (colors, mides, espaiats, tipografies) que comparteixen disseny i codi. Són el lloc ideal per fixar l'accessibilitat de manera estructural:

• Color: defineix els parells permesos (text sobre fons) i verifica'n el contrast en la mateixa definició de tokens. Un token color-text-on-primary només existeix si compleix 4,5:1 sobre color-primary. Inclou tokens per al mode fosc i per al mode de colors forçats.
• Focus: un token focus-ring (color, gruix, desplaçament) que consumeixen tots els components, amb un contrast ≥ 3:1 respecte als fons adjacents (2.4.7 Focus visible exigeix que el focus es vegi; el llindar de 3:1 prové d'1.4.11 Contrast no textual i, per a qui vulgui anar més enllà, de 2.4.13 Aparença del focus, nivell AAA).
• Mida: tokens de mida mínima de l'objectiu (target-min: 24px, target-comfortable: 44px) i d'espaiat entre objectius.
• Tipografia: mides en unitats relatives (rem), interlineat mínim d'1,5 en els paràgrafs, i res que impedeixi a la persona ampliar l'espaiat del text (1.4.12 Espaiat del text).
• Moviment: token de durada de l'animació que s'anul·la amb prefers-reduced-motion.

:root {
  --color-primary: #0b4f8a;
  --color-text-on-primary: #ffffff; /* 8,4:1 sobre primary */
  --focus-ring-color: #1a1a1a; /* 17,4:1 sobre el fons blanc */
  --focus-ring-width: 3px;
  --target-min: 24px;
  --motion-duration: 200ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-duration: 0ms; }
}
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}

Proves i governança del design system

Cada component del sistema hauria de tenir proves automàtiques d'accessibilitat (axe-core sobre els seus estats, per exemple amb Storybook i el seu complement d'accessibilitat o amb proves unitàries) i una revisió manual documentada amb teclat i lector de pantalla abans de publicar-se. Les versions es gestionen amb un registre de canvis que assenyala qualsevol modificació d'accessibilitat.

La governança defineix qui pot afegir un component, quina revisió passa, com se sol·liciten canvis i com es retiren els components inaccessibles. Un model habitual és un equip nucli petit amb un comitè de contribució en què participa la persona responsable d'accessibilitat. Mesura l'adopció: el percentatge de pantalles construïdes amb components del sistema enfront de components a mida és un indicador directe del risc.

Resum

• Un design system accessible multiplica l'accessibilitat: components natius quan existeixen i patrons APG quan no, amb tots els estats i la gestió del focus resolta.
• La documentació de cada component inclou quan s'ha de fer servir, teclat, semàntica, propietats obligatòries, criteris WCAG, el que ha de fer el consumidor i les proves fetes.
• Els tokens fixen l'accessibilitat de manera estructural: parells de color amb el contrast verificat, anell de focus únic, mida mínima de l'objectiu i moviment respectuós amb les preferències de l'usuari.
• La governança i les proves per component eviten la degradació; mesura l'adopció del sistema com a indicador de risc.