Estou pulando aqui um pouco tarde, mas me deparei com esta página ao refletir sobre isso sozinha. É claro que não sei como o Facebook ou o Twitter justificaram, mas aqui está o meu próprio processo de pensamento sobre o que vale a pena.
No final, concluí que essa prática não é tão semântica (isso é uma palavra?). De fato, além da falta e da boa associação de "i é para ícone", acho que é realmente a escolha mais semântica para um ícone quando uma <img>
tag direta não é prática.
1. O uso é consistente com as especificações.
Embora possa não ser o que o W3 tinha principalmente em mente, parece-me que a especificação oficial <i>
poderia acomodar um ícone com bastante facilidade. Afinal, o símbolo da seta de resposta está dizendo "resposta" de outra maneira. Ele expressa um termo técnico que pode não ser familiar para o leitor e que normalmente está em itálico. ("Aqui no Twitter, é o que chamamos de seta de resposta .") E é um termo de outro idioma: um idioma simbólico.
Se, em vez do símbolo de seta, o Twitter usasse <i>shout out</i>
ou <i>[Japanese character for reply]</i>
(em uma página em inglês), isso seria consistente com as especificações. Então porque não <i>[reply arrow]</i>
? (Estou falando estritamente de semântica HTML aqui, não de acessibilidade, a qual abordarei.)
Tanto quanto posso ver, a única parte da especificação explicitamente violada pelo uso do ícone é a frase "extensão de texto" (quando a tag também não contém texto). É claro que a <i>
tag se destina principalmente ao texto, mas esse é um detalhe bem pequeno comparado à intenção geral da tag. A questão importante para essa tag não é qual formato de conteúdo, mas qual é o significado desse conteúdo.
Isso é especialmente verdade quando você considera que a linha entre "texto" e "ícone" pode ser quase inexistente em sites. O texto pode parecer mais com um ícone (como no exemplo japonês) ou um ícone com texto (como em um botão jpg que diz "Enviar" ou uma foto de gato com uma legenda sobreposta) ou o texto pode ser substituído ou aprimorado por uma imagem via CSS. Texto, imagem - quem se importa? É todo o conteúdo. Desde que todos - humanos com deficiências, navegadores com deficiências, aranhas de mecanismos de pesquisa e outras máquinas de vários tipos possam entender esse significado, fizemos o nosso trabalho.
Portanto, o fato de os autores das especificações não terem pensado (ou escolhido) para esclarecer isso não deve comprometer o que faz sentido e é consistente com o espírito da etiqueta. A <a>
tag foi originalmente projetada para levar o usuário para outro lugar, mas agora pode aparecer uma caixa de luz. Grande grito, certo? Se alguém tivesse descoberto como exibir uma caixa de luz ao clicar antes da especificação, ainda assim deveria ter usado a <a>
tag, não uma <span>
, mesmo que não fosse totalmente consistente com a definição atual - porque chegou mais perto e foi ainda consistente com o espírito da tag ("algo acontecerá quando você clicar aqui"). O mesmo trato <i>
- qualquer que seja o tipo de coisa que você coloque nela ou, por mais criativo que seja,
2. A <i>
tag adiciona significado semântico a um elemento de ícone.
A opção alternativa para carregar uma classe de ícones por si só é <span>
, que obviamente não tem significado semântico. Quando uma máquina pergunta o <span>
que ela contém, diz: "Não sei. Pode ser qualquer coisa". Mas a <i>
etiqueta diz: "Eu contenho uma maneira diferente de dizer algo do que o habitual, ou talvez um termo desconhecido". Não é o mesmo que "Eu contenho um ícone", mas é muito mais próximo do que o <span>
obtido!
3. Eventualmente, o uso comum dá certo.
Além do exposto, vale a pena considerar que os leitores de máquinas (seja o mecanismo de pesquisa, o leitor de tela ou o que for) podem, a qualquer momento, levar em consideração que o Facebook, o Twitter e outros sites usam a <i>
tag como ícones. Eles não se preocupam tanto com as especificações quanto com a extração de significado do código, por qualquer meio necessário. Portanto, eles podem usar esse conhecimento de uso comum para simplesmente registrar que "pode haver um ícone aqui" ou fazer algo mais avançado, como dar uma olhada no CSS para obter uma dica de significado ou quem sabe o quê. Portanto, se você optar por usar os <i>
ícones for no seu site, poderá fornecer mais significado do que as especificações.
Além disso, se esse uso se generalizar, provavelmente será incluído nas especificações no futuro. Então você estará analisando seu código, substituindo <span>
s por <i>
's! Portanto, pode fazer sentido adotar o que parece ser a direção da especificação, especialmente quando ela não conflita claramente com a especificação atual. O uso comum tende a ditar as regras de linguagem mais do que o contrário. Se você tem idade suficiente, lembra-se de que "site" era a grafia oficial quando a palavra era nova? Os dicionários insistiam que deveria haver um espaço e a Web deveria estar em maiúsculas. Havia razões semânticas para isso. Mas o uso comum dizia: "Seja como for, isso é estúpido. Estou usando o 'site' porque é mais conciso e parece melhor". E em pouco tempo,
4. Então, eu vou em frente e usá-lo.
Portanto, <i>
fornece mais significado às máquinas por causa das especificações, fornece mais significado aos seres humanos porque associamos facilmente "i" a "ícone", e possui apenas uma letra. Ganhar! E se você incluir texto equivalente na <i>
tag ou ao lado (como o Twitter), os leitores de tela entenderão onde clicar para responder, o link será utilizável se o CSS não carregar, e os leitores humanos com boas informações. visão e um navegador decente vêem um ícone bonito. Com tudo isso em mente, não vejo a desvantagem.
<i class="sm-reply"></i>
.