Salto qui un po 'tardi, ma mi sono imbattuto in questa pagina quando ci ho riflettuto io. Ovviamente non so come lo giustificasse Facebook o Twitter, ma ecco il mio processo di pensiero per quello che vale.
Alla fine, ho concluso che questa pratica non è così poco romantica (è una parola?). In effetti, oltre alla brevità e alla simpatica associazione di "io sono per icona", penso che in realtà sia la scelta più semantica per un'icona quando un <img>tag semplice non è pratico.
1. L'utilizzo è conforme alle specifiche.
Anche se potrebbe non essere quello che W3 pensava principalmente, mi sembra che le specifiche ufficiali <i>potrebbero ospitare un'icona abbastanza facilmente. Dopotutto, il simbolo della freccia di risposta dice "rispondi" in un altro modo. Esprime un termine tecnico che potrebbe non essere familiare al lettore e che sarebbe tipicamente in corsivo. ("Qui su Twitter, questo è ciò che chiamiamo una freccia di risposta .") Ed è un termine di un'altra lingua: un linguaggio simbolico.
Se, invece del simbolo della freccia, Twitter utilizzato <i>shout out</i>o <i>[Japanese character for reply]</i>(su una pagina inglese), ciò sarebbe coerente con le specifiche. Allora perché no <i>[reply arrow]</i>? (Sto parlando di semantica rigorosamente HTML qui, non di accessibilità, che vedrò.)
Per quanto posso vedere, l'unica parte della specifica esplicitamente violata dall'uso dell'icona è la frase "span of text" (quando il tag non contiene anche testo). È chiaro che il <i>tag è principalmente pensato per il testo, ma è un dettaglio piuttosto piccolo rispetto all'intento generale del tag. La domanda importante per questo tag non è quale formato di contenuto contenga, ma quale sia il significato di quel contenuto.
Ciò è particolarmente vero se si considera che la linea tra "testo" e "icona" può essere quasi inesistente sui siti Web. Il testo può assomigliare di più a un'icona (come nell'esempio giapponese) o un'icona può apparire come un testo (come in un pulsante jpg che dice "Invia" o una foto di gatto con una didascalia sovrapposta) o il testo può essere sostituito o migliorato con un'immagine tramite CSS. Testo, immagine - a chi importa? È tutto contenuto. Finché tutti - persone con disabilità, browser con disabilità, ragni dei motori di ricerca e altre macchine di vario genere possono capire quel significato, abbiamo fatto il nostro lavoro.
Quindi il fatto che gli autori delle specifiche non abbiano pensato (o scelto) di chiarire questo non dovrebbe legare le mani a fare ciò che ha senso ed è coerente con lo spirito del tag. Il <a>tag era originariamente destinato a portare l'utente da qualche altra parte, ma ora potrebbe far apparire una lightbox. Grande whoop, giusto? Se qualcuno avesse capito come far apparire una lightbox al clic prima che la specifica raggiungesse, avrebbe comunque dovuto usare il <a>tag, non un <span>, anche se non era del tutto coerente con la definizione corrente - perché era il più vicino ed era ancora coerente con lo spirito del tag ("succederà qualcosa quando clicchi qui"). Stesso affare con <i>qualsiasi tipo di cosa ci metti dentro, o comunque creativamente lo usi,
2. Il <i>tag aggiunge un significato semantico a un elemento icona.
L'opzione alternativa per portare una classe di icone da sola è <span>, che ovviamente non ha alcun significato semantico. Quando una macchina chiede <span>cosa contiene, dice "Non lo so. Potrebbe essere qualsiasi cosa". Ma il <i>tag dice "Ho un modo diverso di dire qualcosa rispetto al solito, o forse un termine sconosciuto". Non è lo stesso di "I contengono un'icona", ma è molto più vicino ad esso di quanto non lo <span>sia!
3. Alla fine, l'uso comune rende giusto.
Oltre a quanto sopra, vale la pena considerare che i lettori di macchine (motore di ricerca, screen reader o altro) possono in qualsiasi momento iniziare a tenere conto del fatto che Facebook, Twitter e altri siti Web utilizzano il <i>tag per le icone. A loro non importa delle specifiche tanto quanto a loro importa di estrarre significato dal codice con qualsiasi mezzo necessario. Quindi potrebbero usare questa conoscenza di uso comune per registrare semplicemente che "potrebbe esserci un'icona qui" o fare qualcosa di più avanzato come innescare uno sguardo nel CSS per un suggerimento sul significato, o chissà cosa. Quindi, se scegli di utilizzare le <i>icone for sul tuo sito Web, potresti fornire più significato rispetto alle specifiche.
Inoltre, se questo utilizzo si diffonde, sarà probabilmente incluso nelle specifiche in futuro. Quindi esaminerai il tuo codice, sostituendo <span>s con <i>'s! Quindi potrebbe avere senso entrare a far parte di quella che sembra essere la direzione delle specifiche, specialmente quando non è chiaramente in conflitto con le specifiche attuali. L'uso comune tende a dettare le regole della lingua più del contrario. Se sei abbastanza grande, ricordi che "sito Web" era l'ortografia ufficiale quando la parola era nuova? I dizionari hanno insistito sul fatto che ci deve essere uno spazio e il Web deve essere capitalizzato. C'erano ragioni semantiche per questo. Ma l'uso comune diceva: "Qualunque cosa, è stupido. Sto usando 'website' perché è più conciso e sembra migliore". E in poco tempo,
4. Quindi sto andando avanti e lo sto usando.
Quindi, <i>fornisce più significato alle macchine a causa delle specifiche, fornisce più significato agli umani perché associamo facilmente "i" a "icona", ed è lunga solo una lettera. Vincere! E se ti assicuri di includere un testo equivalente all'interno del <i>tag o proprio accanto a esso (come fa Twitter), gli screen reader capiscono dove fare clic per rispondere, il link è utilizzabile se il CSS non viene caricato e i lettori umani con buoni vista e un browser decente vedono un'icona carina. Con tutto questo in mente, non vedo il rovescio della medaglia.
<i class="sm-reply"></i>.