Nuova rubrica Web Design + Accessibilità
Oggi nasce la nuova rubrica su Web Design e Accessibilità intitolata Martedì Accessibile. Cercherò di pubblicare un post ogni martedì. Farò del mio meglio (errori inclusi) quindi vi invito a partecipare su LinkedIn con commenti costruttivi, consigli e soluzioni alternative. L’hashtag da seguire è #MartedìAccessibile. Nel primo argomento di questa rubrica cercheremo di capire come si possono creare link accessibili nelle card di un sito web.
Cosa sono le card in un sito web?
Per convenzione, si definiscono card quegli elementi che sono formati da box con all’interno titoli, testi e molto spesso un link. Nei siti web è molto comune vederle in una serie di card. Ad esempio, possono essere card:
- Risultati di un archivio blog
- Prodotti in una pagina shop;
- Punti di forza
- Testimonianze con frasi e autore
Come creare una card accessibile?
Ci sono 3 modi principali per creare una card con link accessibili:
- Card con link interni
- Card con link esterno
- Card con link + After
1. Card con link interni
È il modo più facile e più sconsigliato, perché si creano più link uguali. Lo Screen Reader leggerà più volte lo stesso link. C’è anche il rischio di avere un link vago come “Read more”.
2. Card con link esterno
Con CSS si trasforma il link in elemento “block”. Se devi inserire altri link devi usare il tag “<object>”. Questo modo trasforma la semantica dell’HTML. La superficie cliccabile è più grande. Meglio ma non perfetto.
3. Card con link + After
Con CSS si aggiunge “:after” al link. In pratica si estende il link con un “content” vuoto in “position absolute” rispetto alla card. È il modo usato da GOV.UK. Lo trovo perfetto.