La targeta és un dels components més habituals d’una UI (interfície d’usuari). Una targeta agrupa la informació d’un sol element o tema. Fas servir targetes quan una pàgina mostra diversos elements alhora.
Per exemple:
- Una llista d’articles d’un blog
- Una llista de productes d’una botiga en línia
- Una llista d’hotels en una app de viatges
Una targeta acostuma a resumir una pàgina més llarga. La informació completa viu a la seva pròpia pàgina.
Convertir tota la targeta en un enllaç és habitual, i és una bona pràctica: dona a les persones una àrea molt més gran per fer clic o tocar. Però la manera com construeixes aquest enllaç pot crear problemes d’accessibilitat.
Tot seguit tens tres implementacions. Fes servir la tercera.
Implementació 1: enllaços repetits
La primera opció enllaça diversos elements dins de la targeta en lloc d’un. Fa anys era habitual. Avui es veu menys.
El problema: diversos textos diferents enllacen al mateix destí.
Una targeta de producte construïda així conté:
- Un enllaç amb el nom del producte com a text. Per exemple, «Auriculars sense fil Aurora 2».
- Una imatge amb text alternatiu. Per exemple, «Auriculars sense fil Aurora 2, Pissarra».
- Un botó amb una crida a l’acció. Per exemple, «Afegeix a la cistella», o «Afegeix els auriculars sense fil Aurora 2 a la cistella» com a text només per a lectors de pantalla.
A molta gent això li sembla correcte:
- Hi ha diversos elements enllaçats, així que l’àrea de clic és gran
- La imatge té text alternatiu
- El botó té un nom accessible complet
Amb un lector de pantalla l’experiència és una altra. Sents gairebé el mateix nom d’enllaç tres vegades a cada targeta de la llista.
Implementació 2: un sol enllaç al voltant de tota la targeta
Un enllaç en lloc de tres sembla una millora clara. Però porta els seus propis problemes:
- Els elements semàntics dins de l’enllaç, com un encapçalament, fan confusa la navegació amb lector de pantalla.
- Pot incomplir criteris de compliment de les WCAG (Pautes d’Accessibilitat per al Contingut Web) sobre informació i relacions, i sobre etiquetatge.
- No pot contenir elements interactius com botons. Posar un text amb aspecte de botó no ho soluciona: empitjora l’accessibilitat.
Una variant d’aquest enfocament col·loca l’enllaç fora de la targeta i fa servir CSS (Fulls d’Estil en Cascada) per estirar-lo per sobre. Evita-la també. La posició de l’enllaç al DOM (Model d’Objectes del Document) no coincideix amb el lloc on apareix a la pantalla, de manera que l’ordre de lectura i l’ordre visual no concorden. A més, gairebé sempre l’enllaç s’implementa sense nom accessible.
Implementació 3: el patró stretched link
El patró stretched link (enllaç estirat) és l’estàndard actual del sector. Mantens la semàntica de la targeta i fas servir CSS per ampliar l’àrea de clic:
- Construeix la targeta amb HTML semàntic i enllaça un sol element, com ara el títol.
- Fes servir CSS per estirar aquest enllaç sobre tota la targeta. No es mou res i no es duplica res.
S’aconsegueix amb quatre regles:
- Aplica
position: relativeal contenidor de la targeta. - Afegeix un pseudoelement (
::beforeo::after) a l’enllaç. - Aplica
position: absoluteal pseudoelement. - Aplica
inset: 0perquè ocupi tota la targeta.
Pots continuar afegint un botó a la targeta, perquè el botó queda fora de l’enllaç. Vigila una cosa: un botó a cada targeta recupera la repetició de la implementació 1. Dona a cada botó un nom accessible curt i específic, i després prova la llista amb un lector de pantalla.
Conclusió
Moltes eines encara publiquen els patrons antics en lloc del patró stretched link. El problema tècnic ja està resolt. Queden dues coses per fer:
- Saber que el patró existeix.
- Comprovar quin patró generen les eines que fas servir.