Estats visibles en CSS: contrast, focus, colors forçats i reajustament

Fins ara ens hem ocupat del que el formulari diu al codi. Aquesta lliçó s'ocupa del que mostra a la pantalla. Un camp ben etiquetat pot continuar sent inaccessible si la seva vora gairebé no es veu, si el focus desapareix, si els errors només canvien de color o si al 400 % de zoom les etiquetes se separen dels seus camps. Al nivell 2 (cursos N2-C3 i N2-C4) vam veure aquestes decisions des del disseny; aquí les implementem en CSS sense trencar res i repassem els criteris que les regulen: 1.4.11 Contrast no textual, 2.4.7 Focus visible, 1.4.4 Canvi de mida del text, 1.4.10 Reajustament dels elements, 1.4.12 Espaiat del text, 2.5.8 Mida de l'objectiu (mínim) i 1.4.13 Contingut en passar el cursor o en rebre el focus.

Que un camp es vegi com un camp

El criteri 1.4.11 (AA) exigeix una relació de contrast d'almenys 3:1 amb els colors adjacents per a la informació visual necessària per identificar un component i els seus estats. En un camp de text, el que sol permetre identificar-lo és la vora. Si aquesta vora és gris clar sobre fons blanc, per a moltes persones amb baixa visió el formulari és una pàgina amb etiquetes que suren sobre res.

input { border: 1px solid #ccc; }
.campo-plano { border: 0; background: #f5f5f5; }

input, select, textarea {
  border: 2px solid #767676;
  border-radius: 4px;
}

El mateix val per al contorn de les caselles de selecció i dels botons d'opció personalitzats, i per a l'indicador que mostra que estan marcats. Els components deshabilitats estan exempts del requisit de contrast, però això no és una invitació a fer-los invisibles: la persona ha de saber que el camp existeix encara que no el pugui fer servir.

Estats: focus, error, marcat

Cada estat s'ha de poder percebre sense dependre només del color (1.4.1 Ús del color) i amb contrast suficient. La taula resumeix com resoldre-ho en CSS.

Un detall que estalvia moltes errades: enganxa l'estil d'error a l'atribut ARIA, no a una classe a part. Així és impossible que el camp es vegi vermell sense estar marcat com a no vàlid per al lector, o a l'inrevés.

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #1a4fa0;
  outline-offset: 2px;
}

input[aria-invalid="true"] {
  border: 3px solid #b00020;   /* 7,3:1 sobre blanc */
}

Mode de colors forçats

Moltes persones amb baixa visió o sensibilitat a la llum fan servir els temes de contrast de Windows. En aquest mode, el navegador substitueix els teus colors pels del sistema i aplica la consulta @media (forced-colors: active). Dos efectes trenquen formularis sovint:

• Les ombres (box-shadow) s'eliminen. Un anell de focus fet només amb ombra desapareix completament.
• Els fons se substitueixen. Una casella personalitzada que mostra l'estat «marcat» només amb un fons de color deixa de distingir-se d'una de buida.

La solució és mantenir sempre un outline o una vora, encara que sigui transparent en el mode normal: en colors forçats el sistema li dona color i torna a veure's.

.boton:focus-visible {
  box-shadow: 0 0 0 4px #1a4fa0;
  outline: 2px solid transparent; /* visible en colors forçats */
}

@media (forced-colors: active) {
  .casilla-propia:checked::after {
    forced-color-adjust: none;   /* respecta aquest fons… */
    background: CanvasText;      /* …amb un color del tema del sistema */
  }
}

Mida, zoom i reajustament

Els formularis són especialment fràgils quan s'amplia el text o s'estreny la finestra:

• 1.4.4 (AA): el text s'ha de poder ampliar al 200 % sense perdre contingut. Un input amb height: 32px fix talla el text en ampliar-lo. Fes servir padding i min-height en rem, i deixa que l'alçada creixi.
• 1.4.10 Reajustament dels elements (AA): a 320 píxels CSS d'amplada (equivalent a 1280 píxels amb zoom al 400 %) no ha de caldre desplaçar-se en horitzontal. La maquetació amb etiquetes a l'esquerra i camps a la dreta se sol trencar: amb zoom, l'etiqueta queda a un costat de la pantalla i el camp fora de la vista. Col·loca les etiquetes a sobre dels camps i fes servir max-width: 100% als controls.
• 1.4.12 Espaiat del text (AA): si la persona augmenta l'interlineat i l'espaiat, les etiquetes i els missatges d'error no s'han de tallar. Evita alçades fixes i overflow: hidden en aquests contenidors.
• 2.5.8 Mida de l'objectiu (mínim) (AA): els objectius han de fer almenys 24 × 24 píxels CSS o tenir prou espai al voltant. Una casella nativa sense modificar queda exempta perquè la seva mida la decideix el navegador; si la redibuixes a 16 píxels, l'exempció es perd. En qualsevol cas, l'etiqueta associada amplia l'àrea on es pot prémer.

Un consell de disseny que també és d'accessibilitat: l'amplada del camp suggereix la longitud esperada. Un camp de codi postal tan ample com el de l'adreça no ajuda ningú; un de 6 caràcters d'amplada, sí.

Ajudes emergents i instruccions sensorials

La icona d'informació al costat d'un camp que mostra una bombolla en passar el ratolí està subjecta a l'1.4.13 (AA): la bombolla s'ha de poder tancar sense moure el punter (normalment amb Escape), s'ha de poder recórrer amb el punter sense que desaparegui i s'ha de mantenir fins que la persona la tanqui o retiri el punter o el focus. A més, la icona ha de ser un botó assolible amb el teclat. Sempre que hi càpiga, és millor mostrar l'ajuda com a text visible associat amb aria-describedby.

I compte amb les instruccions que depenen de la forma, el color o la posició, que incompleixen l'1.3.3 Característiques sensorials (A) quan són l'única referència: «Els camps en vermell són obligatoris», «Prem el botó verd», «Emplena les dades de la columna dreta».

Resum

• La vora o l'indicador que identifica un camp i els seus estats necessita un contrast de 3:1 (1.4.11).
• No eliminis mai l'outline sense substituir-lo; fes servir :focus-visible i evita que barres fixes tapin el camp enfocat (2.4.11).
• Enganxa l'estil d'error a [aria-invalid="true"] i afegeix-hi text i icona, no només color.
• En colors forçats desapareixen ombres i fons: mantén sempre una vora o un outline.
• Etiquetes a sobre, alçades flexibles en rem i objectius de 24 × 24 px com a mínim per suportar el zoom, el reajustament i l'ús tàctil.