HTML5 taggalo validità con icone

Ho usato Bootstrap per build il mio sito, ma così facendo e ricercando SEO, ho scoperto che usare i tag i con i glyphicon non è tecnicamente “valido” HTML. C’è una regola definitiva che dice che i tag possono essere usati in questo modo senza influenzare la validità del markup senza influenzare SEO?

Come parte di questo problema, sto anche cercando di soddisfare una lamencanvas secondo cui il mio testo di ancoraggio non descrive la sua destinazione:

  

Questo produce l’effetto visivo desiderato, tuttavia non posso aggiungere il testo di ancoraggio altrimenti sarà ovviamente visualizzato sullo schermo. Normalmente un’immagine sarebbe stata usata all’interno dell’ancora e avrei potuto visualizzare il testo alt , quindi sono bloccato su dove meglio mettere questo “testo descrittivo”.

Non usare i .

L’ elemento i ha un significato che non è appropriato per le icone generali:

[…] un intervallo di testo in una voce alternativa o umore, o altrimenti compensato dalla normale prosa in un modo che indica una diversa qualità del testo, come una designazione tassonomica, un termine tecnico, una frase idiomatica da un’altra lingua, traslitterazione, un pensiero, o il nome di una nave nei testi occidentali.

I motivi per cui alcune persone usano (d) i come hook per mostrare le icone (tramite CSS) potrebbero essere:

  • Il termine “icona” inizia con i .
  • Il nome dell’elemento è breve.

Usa lo span invece , che è un elemento privo di significato .


Se l’icona è un contenuto pertinente (importante per capire / utilizzare la tua pagina), considera invece l’utilizzo dell’elemento img , che ti consente di utilizzare l’attributo alt .

Dovresti usare i CSS solo per le icone decorative. Se ciò non è ansible:

Se colleghi questa icona e il link non contiene alcun contenuto (nessun testo, nessun img , …), cioè contiene solo un elemento vuoto , allora devi fornire del contenuto nel codice HTML. Altrimenti, i visitatori senza supporto CSS, utenti di screen reader, ecc. Non saranno in grado di utilizzare il tuo link. Se non vuoi includere il contenuto per motivi di progettazione, nascondilo visivamente. Maggiori dettagli nella mia risposta correlata .

Puoi usare qualcosa come Your Text per migliorare l’accessibilità.

.sr-only è una class Bootstrap integrata per semplificare la fornitura di testo utile ai lettori di schermo quando non si desidera che il testo appaia visivamente sullo schermo.