CSS accessible: ocultació, contingut generat, reajustament i ordre visual

El CSS sembla innocu per a l'accessibilitat: només canvia l'aspecte. Però «l'aspecte» inclou decisions que afecten de ple les tecnologies de suport: què s'oculta i per a qui, quin contingut s'injecta des del full d'estils, com es reorganitza la pàgina en ampliar-la i en quin ordre apareixen les coses. Aquesta lliçó reuneix les tècniques de CSS que has de dominar per no desfer amb estils el que vas fer bé en l'HTML.

Tres maneres d'ocultar, tres resultats diferents

Sempre cal distingir a qui volem ocultar alguna cosa: a tothom, només a qui veu la pantalla, o només a les tecnologies de suport.

La classe d'ocultació accessible (anomenada visually-hidden, sr-only o a11y-hidden segons la biblioteca) és l'eina per al text que només necessita el lector de pantalla: el «Llegeix més sobre…» que completa un enllaç, l'encapçalament d'una secció que el disseny no mostra, el text d'un botó d'icona. La seva versió robusta actual:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.visually-hidden:focus-visible {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

La segona regla fa que un element enfocable amb aquesta classe (un enllaç de salt) es mostri en rebre el focus; sense ella, l'element rebria el focus sense veure's (un focus fantasma que incompleix 2.4.7).

.oculto { display: none; } /* en el label d'un camp */
.sr-only { font-size: 0; }   /* alguns lectors no llegeixen text de mida 0 */
.sr-only { color: transparent; } /* continua ocupant espai i es pot seleccionar */

Contingut generat amb ::before i ::after

El text inserit amb content en pseudoelements sí que arriba a l'arbre d'accessibilitat en els navegadors actuals i els lectors el llegeixen. Això té dues conseqüències. La primera: les icones de fonts tipogràfiques inserides així (content: "\e901") s'anuncien com a caràcters estranys o com a lletres soltes; cal marcar-les amb aria-hidden="true" en l'element o fer servir la sintaxi de text alternatiu content: "\e901" / "", admesa ja en la majoria dels navegadors. La segona: no posis mai informació imprescindible només a content (un asterisc d'«obligatori», un «Nou» al costat d'un títol), perquè no totes les combinacions de navegador i tecnologia de suport l'exposen igual, alguns modes de lectura i extensions el descarten, i no es tradueix ni es pot seleccionar. Si és informació, va en l'HTML.

Reajustament i unitats

El criteri 1.4.10 Reajustament dels elements (AA) exigeix que el contingut es pugui presentar sense desplaçament en dues dimensions a 320 píxels CSS d'amplada (equivalent a un escriptori d'1.280 píxels al 400 % de zoom), excepte el contingut que per naturalesa requereixi dues dimensions (mapes, taules de dades, diagrames). I 1.4.4 Canvi de mida del text exigeix que el text es pugui ampliar al 200 % sense pèrdua de contingut ni de funcionalitat. En CSS això es tradueix en:

• Disseny fluid amb media queries, Grid i Flexbox; sense amplades fixes en píxels per a contenidors de text.
• Mides de lletra en rem o em millor que en px, perquè respectin la mida base que la persona configuri al navegador. Les media queries, també en em.
• Alçades mínimes (min-height) en lloc d'alçades fixes (height) en caixes amb text, perquè el text ampliat no es desbordi ni es talli.
• Res d'overflow: hidden en contenidors de text sense un motiu clar.
• Les taules, en un contenidor amb desplaçament horitzontal propi, com vam veure en el primer curs.

El criteri 1.4.12 Espaiat del text (AA) afegeix que la pàgina ha de continuar funcionant si la persona força un interlineat d'1,5, un espai després dels paràgrafs de 2 vegades la mida de la lletra, entre lletres de 0,12 em i entre paraules de 0,16 em. Les alçades mínimes i l'absència de retalls són, de nou, la clau.

/* Incorrecte: es trenca en ampliar el text */
.tarjeta { width: 300px; height: 120px; font-size: 14px; overflow: hidden; }

/* Correcte: creix amb el contingut i respecta les preferències */
.tarjeta { max-width: 20rem; min-height: 7.5rem; font-size: 0.875rem; }
@media (max-width: 40em) { .tarjeta { max-width: 100%; } }

Ordre visual enfront d'ordre del DOM

Flexbox i Grid permeten reordenar visualment amb order, flex-direction: *-reverse, grid-area o grid-auto-flow: dense. El focus del teclat i el lector de pantalla segueixen el DOM, de manera que qualsevol reordenació visual crea una discrepància que afecta 1.3.2 Seqüència significativa i 2.4.3 Ordre del focus. Regla: reordena en el DOM, no en el CSS. Les excepcions acceptables són reordenacions que no afecten el significat ni l'operació (per exemple, canviar la posició d'una imatge decorativa respecte al text en mòbil). Si fas servir order per a alguna cosa més que això, recorre la zona amb Tab i comprova que el salt no desorienta.

Altres regles de CSS que afecten l'accessibilitat

• Focus: mai outline: none sense un substitut a :focus-visible (curs de teclat; en la lliçó següent veuràs com programar un indicador robust).
• Contrast: els colors en CSS han de complir 4,5:1 per al text normal i 3:1 per al text gran i els components (1.4.3, 1.4.11); els placeholders grisos clars són l'error més comú.
• Mode de contrast forçat: a Windows, el mode d'alt contrast substitueix els colors. Fes servir @media (forced-colors: active) per assegurar que les vores dels controls i els indicadors de focus continuen visibles, i forced-color-adjust: none només quan el color sigui informació (mostres de color). Ho veuràs a fons en la lliçó «Preferències de l'usuari en CSS».
• Cursor i punter: cursor: pointer en una cosa que no és interactiva enganya l'usuari de ratolí; pointer-events: none en una cosa enfocable crea un control que s'enfoca però no es pot prémer.
• Text en majúscules: text-transform: uppercase sol ser preferible a escriure en majúscules en l'HTML, perquè el text original es conserva (en copiar-lo, en traduir-lo i en molts lectors), tot i que alguns navegadors exposen el text ja transformat i algun lector pot lletrejar paraules curtes; a més, redueix la llegibilitat en textos llargs.
• Només hover: qualsevol informació que aparegui amb :hover també ha d'aparèixer amb :focus-visible o :focus-within.

Resum

• Tria la tècnica d'ocultació segons a qui vulguis ocultar: display:none/hidden (tothom), visually-hidden (només visual), aria-hidden (només tecnologies de suport).
• El contingut de ::before i ::after es llegeix; oculta les icones i no hi posis informació imprescindible només allà.
• Unitats relatives, alçades mínimes i disseny fluid garanteixen 1.4.4, 1.4.10 i 1.4.12; comprova-ho a 320 píxels o al 400 %.
• Reordena en el DOM, no amb order ni grid-area, per respectar 1.3.2 i 2.4.3.
• Tingues cura del focus, del contrast, del mode de colors forçats i que el que apareix amb :hover també aparegui amb el focus.