Estoy saltando aquí un poco tarde, pero me encontré con esta página al reflexionar sobre mí. Por supuesto, no sé cómo Facebook o Twitter lo justificaron, pero aquí está mi propio proceso de pensamiento sobre lo que vale.
Al final, llegué a la conclusión de que esta práctica no es tan poco semántica (¿es una palabra?). De hecho, además de la brevedad y la buena asociación de "i is for icon", creo que en realidad es la opción más semántica para un icono cuando una <img>etiqueta directa no es práctica.
1. El uso es consistente con la especificación.
Si bien puede que no sea lo que el W3 tenía en mente principalmente, me parece que la especificación oficial <i>podría acomodar un icono con bastante facilidad. Después de todo, el símbolo de flecha de respuesta dice "responder" de otra manera. Expresa un término técnico que puede ser desconocido para el lector y que generalmente se escribe en cursiva. ("Aquí en Twitter, esto es lo que llamamos una flecha de respuesta "). Y es un término de otro idioma: un lenguaje simbólico.
Si, en lugar del símbolo de flecha, Twitter usara <i>shout out</i>o <i>[Japanese character for reply]</i>(en una página en inglés), eso sería consistente con la especificación. Entonces por qué no <i>[reply arrow]</i>? (Estoy hablando estrictamente de semántica HTML aquí, no de accesibilidad, a lo que llegaré).
Hasta donde puedo ver, la única parte de la especificación violada explícitamente por el uso del icono es la frase de "extensión de texto" (cuando la etiqueta no contiene texto también). Está claro que la <i>etiqueta está destinada principalmente al texto, pero ese es un detalle bastante pequeño en comparación con la intención general de la etiqueta. La pregunta importante para esta etiqueta no es qué formato de contenido contiene, sino cuál es el significado de ese contenido.
Esto es especialmente cierto cuando considera que la línea entre "texto" e "icono" puede ser casi inexistente en los sitios web. El texto puede parecerse más a un ícono (como en el ejemplo japonés) o un ícono puede parecer texto (como en un botón jpg que dice "Enviar" o una foto de gato con un título superpuesto) o el texto puede reemplazarse o mejorarse con una imagen a través de CSS. Texto, imagen: ¿a quién le importa? Todo es contenido. Mientras todos, los humanos con discapacidades, los navegadores con discapacidades, las arañas de los motores de búsqueda y otras máquinas de diversos tipos puedan comprender ese significado, hemos hecho nuestro trabajo.
Por lo tanto, el hecho de que los escritores de la especificación no pensaron (o eligieron) aclarar esto no debería desviarnos de hacer lo que tiene sentido y es coherente con el espíritu de la etiqueta. La <a>etiqueta fue originalmente destinado a llevar al usuario a otro sitio, pero ahora podría aparecer una caja de luz. Gran grito, ¿verdad? Si alguien hubiera descubierto cómo abrir una caja de luz al hacer clic antes de que la especificación se pusiera al día, todavía debería haber usado la <a>etiqueta, no una <span>, incluso si no era del todo coherente con la definición actual, porque se acercaba más y era sigue siendo coherente con el espíritu de la etiqueta ("algo sucederá cuando haga clic aquí"). El mismo trato <i>: cualquier tipo de cosa que pongas dentro de ella, o por muy creativa que la uses,
2. La <i>etiqueta agrega significado semántico a un elemento de icono.
La opción alternativa para llevar una clase de ícono es <span>, por supuesto, que no tiene ningún significado semántico. Cuando una máquina pregunta <span>qué contiene, dice: "No sé. Podría ser cualquier cosa". Pero la <i>etiqueta dice: "Tengo una forma diferente de decir algo de la forma habitual, o tal vez un término desconocido". No es lo mismo que "Tengo un ícono", ¡pero está mucho más cerca de lo que <span>estaba!
3. Eventualmente, el uso común hace lo correcto.
Además de lo anterior, vale la pena considerar que los lectores de máquina (ya sea motor de búsqueda, lector de pantalla o lo que sea) en cualquier momento pueden comenzar a tener en cuenta que Facebook, Twitter y otros sitios web usan la <i>etiqueta como íconos. No les importa la especificación tanto como les importa extraer el significado del código por cualquier medio necesario. Por lo tanto, podrían usar este conocimiento de uso común para simplemente registrar que "puede haber un ícono aquí" o hacer algo más avanzado como activar una mirada al CSS para obtener una pista del significado, o quién sabe qué. Entonces, si elige usar los <i>íconos for en su sitio web, puede estar proporcionando más significado que la especificación.
Además, si este uso se generaliza, probablemente se incluirá en la especificación en el futuro. ¡Entonces revisarás tu código, reemplazando <span>s por <i>'s! Por lo tanto, puede tener sentido abordar lo que parece ser la dirección de la especificación, especialmente cuando no está claramente en conflicto con la especificación actual. El uso común tiende a dictar las reglas del idioma más que al revés. Si tienes la edad suficiente, ¿recuerdas que "sitio web" era la ortografía oficial cuando la palabra era nueva? Los diccionarios insistieron en que debe haber un espacio y la Web debe estar en mayúscula. Había razones semánticas para eso. Pero el uso común decía: "Lo que sea, eso es estúpido. Estoy usando 'sitio web' porque es más conciso y se ve mejor". Y en poco tiempo
4. Así que sigo adelante y lo uso.
Por lo tanto, <i>proporciona más significado a las máquinas debido a la especificación, brinda más significado a los humanos porque asociamos fácilmente "i" con "icono", y tiene solo una letra de largo. ¡Ganar! Y si se asegura de incluir texto equivalente dentro de la <i>etiqueta o justo al lado (como lo hace Twitter), los lectores de pantalla entienden dónde hacer clic para responder, el enlace se puede usar si CSS no se carga, y los lectores humanos con buena la vista y un navegador decente ven un bonito icono. Con todo esto en mente, no veo el inconveniente.
<i class="sm-reply"></i>.