Components i estats: botó o enllaç, estats sense color i contingut emergent (1.4.13)

Cada vegada que dibuixes un rectangle amb text i cantonades arrodonides prens una decisió que el lector de pantalla, el teclat i el control per veu notaran: és un botó o un enllaç?, quins estats té?, què passa quan apareix un tauler a sobre? Aquesta lliçó se centra en el disseny dels components interactius: triar-ne la naturalesa, dissenyar-ne tots els estats sense dependre del color i especificar el contingut que apareix i desapareix. La implementació detallada d'aquests patrons s'estudia al nivell 3 (curs N3-C5); aquí ens ocupem del que el disseny ha de decidir i deixar escrit.

Primer, decidir què és cada cosa

La regla és senzilla i s'incompleix cada dia: un enllaç porta a un altre lloc (una altra pàgina, un fitxer, una àncora de la mateixa pàgina); un botó fa alguna cosa a la pàgina actual (enviar, obrir, tancar, afegir, filtrar). Per a qui fa servir lector de pantalla la diferència és real: s'anuncien de manera diferent, s'activen amb tecles diferents (l'enllaç amb Retorn; el botó amb Retorn o Espai) i es llisten per separat.

El que es veu	El que fa	Què és
«Mostra els requisits»	Desplega un tauler a la mateixa pàgina	Botó (patró desplegable)
«Descarrega el formulari (PDF, 120 KB)»	Obre o descarrega un fitxer	Enllaç
«Inicia la sessió» a la capçalera	Porta a la pàgina d'accés	Enllaç
«Inicia la sessió» a la capçalera	Obre un diàleg modal	Botó
«Afegeix al carretó»	Afegeix el producte sense canviar de pàgina	Botó
Targeta de notícia completa	Porta a la notícia	Enllaç al titular (la targeta no és un gran enllaç amb tot a dins)

L'aspecte pot ser el que decideixi el sistema de disseny (un enllaç amb forma de botó per a «Demana cita» és habitual), però la naturalesa s'ha d'anotar sempre. I dins d'un text, els enllaços s'han de reconèixer com a tals: el més fiable és el subratllat; si es distingeixen només pel color, per complir 1.4.1 Ús del color la tècnica acceptada (G183) demana almenys un contrast de 3:1 amb el text que els envolta i un senyal addicional en rebre el focus i el hover.

Natiu abans que inventat

Les caselles, els botons d'opció, els desplegables select i els botons natius ja funcionen amb el teclat, s'anuncien bé i es poden personalitzar molt amb CSS. Cada vegada que el disseny exigeix un control que no existeix en HTML (un desplegable amb cercador i imatges, un selector de dates propi, un interruptor amb forma de píndola), l'equip n'ha de construir i provar tot el comportament. Si el necessites, especifica el patró de l'APG (ARIA Authoring Practices Guide) que ha de seguir i les tecles que el fan funcionar. Si no el necessites, no l'inventis.

Estats que es veuen i s'anuncien

Un component no és una imatge: és un conjunt d'estats. El sistema de disseny n'ha de dibuixar cadascun i l'anotació ha de dir com es comunica a la tecnologia de suport (4.1.2 Nom, funció, valor).

• Focus i hover: diferents entre si; el focus el veurem a fons a la lliçó següent.
• Premut o actiu, i als interruptors activat o desactivat.
• Seleccionat (pestanya, opció, fila) i marcat (casella).
• Desplegat o plegat (acordió, menú, «Mostra'n més»).
• Deshabilitat, només lectura, error i carregant.

Dues regles de disseny per a tots. Primera: cap estat no depèn només del color (1.4.1). La pestanya seleccionada porta una barra inferior o un fons diferent, a més del color; l'interruptor activat mostra la posició del cercle i, encara millor, el text «Sí» o «No»; el camp amb error porta icona i missatge. Segona: els indicadors visuals d'estat necessiten un contrast d'almenys 3:1 amb el que tenen al costat (1.4.11 Contrast no textual, que vas estudiar al curs N2-C3).

<!-- Incorrecte: l'estat només existeix com a color en una classe CSS -->
<div class="toggle on" onclick="cambiar()">Notificacions</div>

<!-- Correcte: botó natiu amb l'estat exposat i un text que no canvia -->
<button type="button" aria-pressed="true">Notificacions per correu</button>

Fixa't en un detall: en un botó d'alternar, o canvia l'estat (aria-pressed) o canvia el text («Activa» / «Desactiva»), però no totes dues coses alhora, perquè el lector anunciaria una cosa contradictòria com ara «Desactiva, botó, premut».

Botons d'icona: el nom no és opcional

La lupa, la paperera, el llapis, els tres punts i la X de tancar són botons que, sense anotació, arriben a desenvolupament sense nom. Decideix per a cadascun el nom accessible literal («Cerca», «Elimina la factura 2026-014», «Edita l'adreça», «Més accions», «Tanca»), i mantén-lo igual a tot el lloc web (3.2.4 Identificació coherent). Sempre que hi hagi espai, acompanya la icona de text visible: hi ha molt poques icones que tothom entengui, i el text ajuda les persones amb discapacitat cognitiva i qui fa servir control per veu, que necessita saber què ha de dir. Si hi ha text visible, el nom accessible l'ha d'incloure (2.5.3 Etiqueta en el nom).

Contingut que apareix en passar-hi el ratolí o en enfocar

Les ajudes emergents (tooltips), els submenús que s'obren en passar-hi el ratolí i les targetes de previsualització estan regulats per 1.4.13 Contingut en passar el cursor o en rebre el focus (AA). Quan un contingut addicional apareix en rebre el hover o el focus, ha de ser:

1. Descartable: es pot tancar sense moure el punter ni el focus, normalment amb Esc, tret que comuniqui un error d'entrada o no tapi ni substitueixi cap altre contingut.
2. Sobrevolable (hoverable): si apareix amb el punter, es pot moure el punter per sobre del contingut sense que desaparegui. Amb zoom, s'hi ha de poder desplaçar.
3. Persistent: continua visible fins que es retira el hover o el focus, la persona el tanca o deixa de ser vàlid. Res d'ajudes que s'esvaeixen als dos segons.

Afegeix-hi dues decisions més: el que apareix amb hover també apareix amb el focus del teclat, i a les pantalles tàctils, on no hi ha hover, cal una altra via. Per això la informació essencial (requisits d'una contrasenya, el significat d'un camp) no ha de viure només en un tooltip: va en text visible al costat del camp.

Diàlegs, acordions, pestanyes i carrusels

Per als components compostos, l'especificació de disseny ha de cobrir sempre els mateixos punts: què és, com s'obre i es tanca, on va el focus i com es veu cada estat.

• Diàleg modal: títol visible, botó «Tanca» amb nom, tancament amb Esc, focus al primer element útil en obrir-lo i de tornada al botó que l'ha obert en tancar-lo, fons no operable mentre està obert i contingut que hi cap a 320 px amb desplaçament intern.
• Acordió: tota la capçalera és el botó (no només la fletxa), la icona indica l'estat i el text de la capçalera és un encapçalament del nivell adequat.
• Pestanyes: la seleccionada es distingeix per la forma i no només pel color; si al mòbil no hi caben, millor convertir-les en acordió que amagar pestanyes.
• Carrusel: fletxes i controls amb nom, indicació «Diapositiva 2 de 5» i, si avança sol, botó de pausa (ho veurem a la lliçó sobre moviment i temps).

Resum

• Un enllaç porta a un altre lloc i un botó fa alguna cosa a la pàgina; la naturalesa s'anota encara que l'aspecte sigui un altre.
• Prefereix controls natius personalitzats; si n'inventes un, especifica'n el patró APG (s'obre en una finestra nova) i les tecles.
• Dissenya tots els estats (focus, seleccionat, desplegat, deshabilitat, error…) sense dependre del color i amb contrast de 3:1 als indicadors; evita deshabilitar sense explicar per què.
• Els botons d'icona necessiten un nom literal i coherent; encara millor, text visible.
• 1.4.13 Contingut en passar el cursor o en rebre el focus (AA): descartable, sobrevolable i persistent; la informació essencial mai només en un tooltip.