Quando il link sottolineato non fa più moda

Grazie alla condivisione in rete, cosa di cui ti avevo già parlato su Italianwebdesign e che ritengo importante per la crescita professionale, mi sono confrontata oggi sull’ennesimo discorso su “link sottolineato sì – link sottolineato no”.

Alle soglie del 2015 stiamo ancora a discutere su questo? Non è colpa tua, eheh non ti preoccupare. Magari ti stai affacciando ora a discorsi come usabilità e accessibilità e certe cose non puoi saperle.

Di cosa stiamo parlando? Dei link sottolineati all’interno di un testo. Studiosi e tecnici dell’usabilità come Steve Krug o Sofia Postai hanno sprecato fior di pagine per spiegare come sia usabile e accessibile la sottolineatura dei link presenti in un paragrafo di testo. Attenzione, non parliamo di quelli presenti nei menu, titoli linkabili, elenchi evidentemente già “da cliccare”, ma di quei link presenti in un paragrafo di testo che altrimenti sarebbero difficilmente riconoscibili se non con un marchio evidente.

Testo formattato con link sottolineati

Testo formattato con link sottolineati con l’esempio di codice sotto riportato (border anziché text-decoration)

Molti (ancora oggi!) ritengono che la sottolineatura sia una cosa brutta da vedere, più facile invece ricreare il richiamo al link con un colore diverso, no? Più carino!

Niente di più sbagliato. Le disabilità visive degli utenti sono infinite e hanno le caratteristiche più disparate. Non parliamo di ciechi, loro hanno programmi e dispositivi che leggono il codice, quindi possiamo formattarli come più ci piace che loro non incontreranno difficoltà nel riconoscere in essi un link. Ma un banale e diffusissimo daltonico (quelli che distinguono male i colori, soprattutto il verde e arancio), non distinguerebbero un link se contrassegnato solo con quel colore.  A tal proposito ti rimando alla risorsa per verificare l’opportuno contrasto fra sfondo e colore del testo.

Aggiungere un bold? Potrebbe sembrare la soluzione, certo, ma come distinguerlo da un bold normale presente nel testo?

Niente, anche se a gusto estetico di molti la sottolineatura è ancora roba degli anni 90, non c’è motivo di eliminarla, anzi. I modi per abbellirla sono diversi. Puoi decidere di usare un border invece del text-decoration: underline, in questo modo:

a {
text-decoration: none;  /* in genere è di default su underline, per i link (ci sarà un motivo?) */
border-bottom: 1px solid #666;
}

Potendo apporre il colore prescelto o anche uno stile diverso dal solid, ma dotted, purché ben visibile. Un padding-bottom potrebbe migliorare ulteriormente l’aspetto grafico del link.

Usare uno sfondo a contrasto potrebbe essere una soluzione grafica carina come nell’esempio di seguito? A mio avviso sì, ma ricorda sempre di verificare l’opportuno grado di contrasto, e comunque ci vorrebbe qualche test sugli ipovedenti ma anche sui normodotati, per verificare effettivamente quanto sia associabile ad un link cliccabile.

Che ne pensi di quest’ultima ipotesi?

Esempio

Esempio di link con sfondo a contrasto

Laura Gargiulo, web designer freelance e blogger.
Autrice di “Come diventare web-coso” e “Consigli di webdesign base“,
moglie dal dicembre 2010 e madre dal dicembre 2012.
Portfolio personale: Lauryn.it
Parlo anche di viaggi ed expat su: Myplaceintheworld.it e do consigli su come espatriare a Edimburgo sul mio blog Lovin’Edinburgh

5 Commenti

Lasciaci un tuo commento!

%d blogger hanno fatto clic su Mi Piace per questo: