¿Dónde estamos ahora en términos del mejor marcado para usar fuentes de iconos? Cubramos algunas opciones que creo que son las mejores actualmente.
- Quieres que el icono mejore una palabra
- Quiere que el icono sea independiente pero que sea funcional o informativo
Y nuestros principales objetivos aquí son:
- Tan buena semántica como podamos conseguir
- La menor incomodidad posible para los lectores de pantalla
Este terreno ya se ha pisado antes, pero creo que las siguientes técnicas son un pequeño paso adelante.
Mejorando una palabra
Digamos que tenemos un encabezado como “Estadísticas” y queremos diferenciarlo de otros encabezados en la página y enfatizar su significado. Ideal semántico:
<h2 id="stats" class="stats-title">Stats</h2>Resultado:
Entonces, para colocar ese ícono allí (recuerde que estamos hablando de íconos de fuentes aquí, no podemos simplemente rellenar la izquierda y usar un fondo), necesitaremos insertar algo de contenido.
Usar un pseudo elemento es tentador porque 1) la mayoría de los lectores de pantalla no los leen 2) no necesitamos un marcado dedicado para el ícono, que es un ideal semántico. Desafortunadamente, VoiceOver en OS X lee el contenido de pseudo elementos. (referencia 1, referencia 2) Bueno, tal vez “afortunadamente”, como si estuviera leyendo la especificación correctamente, eso es lo que se supone que debe hacer. Los pseudo elementos simplemente no están en el DOM y, por lo tanto, eso probablemente dificulta que las aplicaciones de terceros lo hagan.
La buena noticia es que si usamos un poco de marcado, podemos usar el atributo aria-hidden para evitar que se pronuncie.
Una pizca más de malas noticias, incluso con aria-hidden en el marcado que rodea el icono, VoiceOver en OS X anunciará “Contenido HTML” cuando esté enfocado. # maldita sea.
¡Pero Ay! Todavía podemos ganar aquí. Si combinamos la técnica de marcado y la técnica de pseudoelementos, podemos insertar el icono sin rarezas de VoiceOver. Y como un obsequio de doble ganancia, esta técnica combinada es ideal para mantener nuestro CSS delgado y mezquino, ya que no requiere hinchazón de nombres de clase y funciona bien con el siguiente caso de uso que debemos cubrir.
Entonces, el marcado final para esto se convierte en:
<h2 id="stats">
<span aria-hidden="true" data-icon="⇝"></span>
Stats
</h2>Y el CSS es:
[data-icon]:before {
font-family: icons; /* BYO icon font, mapped smartly */
content: attr(data-icon);
speak: none; /* Not to be trusted, but hey. */
}Dios santo, eso es fácil, ¿eh? Observe que no estamos usando un nombre de clase específico para el ícono (por ejemplo, como .icon-stats o algo así), estamos usando un data-* atributo para contener exactamente qué carácter queremos insertar. En nuestra fuente de iconos, asignamos esos caracteres especiales al icono que queremos usar. Encuentro esto perfectamente semántico e incluso a prueba de futuro (siempre puedes seleccionar de forma única en el futuro incluso si cambias el carácter). Pero si prefieres los nombres de clase, más poder para ti, está bien y no cambia esta técnica drásticamente.
Cubriremos el mapeo de personajes al final.
Iconos independientes
Digamos que tenemos un ícono que es un enlace o de alguna manera funcional, pero no está acompañado de ningún texto. Por ejemplo, un icono de carrito de compras en el que puede hacer clic para ir a su carrito de compras. Con suerte, esa funcionalidad es obvia visualmente, con algún tipo de estado de vuelco o obviedad de diseño general. Pero esa funcionalidad también debe ser audiblemente obvia.
En lugar de crear una técnica totalmente nueva para lidiar con esto (con lo que he incursionado en el pasado), apoyémonos en lo que ya comenzamos. Un espacio que inserta el carácter con un pseudo elemento y el texto que se encuentra justo al lado del que iniciamos la página visualmente.
<a href="https://css-tricks.com/html-for-icon-font-usage/#rss" class="icon-alone">
<span aria-hidden="true" data-icon="▨"></span>
<span class="screen-reader-text">RSS</span>
</a>Necesitamos muy poco CSS adicional, solo una pequeña corrección de usabilidad aplicada a través de la clase y una clase de caja de herramientas para ocultar el texto pero dejarlo accesible.
.icon-alone {
display: inline-block; /* Fix for clickability issue in WebKit */
}
.screen-reader-text { /* Reusable, toolbox kind of class */
position: absolute;
top: -9999px;
left: -9999px;
}Hey funciona
Ver demostración
Actualización de octubre de 2012: Hice una demostración más adecuada comparando el uso de fuentes de iconos con diferentes técnicas.
En VoiceOver, de todos modos. Sería genial escuchar de las personas que usan otros lectores de pantalla cómo se mantiene esto.
Creación / mapeo de la fuente de su icono
Un “problema” en el mundo de las fuentes de iconos en este momento es que la mayoría de las disponibles vienen preasignadas a letras. Si se utilizan con un marcado inadecuado, las letras se convierten en “contenido” y forman parte de la semántica del documento. O peor aún, leer en voz alta con lectores de pantalla.
Casi nunca tiene sentido que un icono se asigne a una letra. En su lugar, recomiendo asignar los iconos al símbolo Unicode más cercano que pueda encontrar. Por ejemplo, asignar un icono de corazón a ❤ es una idea espléndida. El significado de los símbolos es bastante relativo de todos modos, por lo que cerca cuenta y será una mejora semántica de inmediato.
Aún mejor, me gusta la idea de mapear íconos al “Área de uso privado” de Unicode. Según tengo entendido, esta es exactamente la razón por la que existe, para usarla con sus propios caracteres especiales. Mapeado de esta manera, no corres el riesgo de que un lector de pantalla pronuncie el personaje. Desafortunadamente, en el momento de escribir esto, los íconos asignados de esta manera no funcionan ni siquiera en el último Safari, por lo que aún no se recomienda. Aquí está la primicia sobre los problemas del Área de uso privado parafraseados de Keyamoon:
Existe una diferencia entre PUA (Área de uso privado) y SPUA (Área de uso privado complementario). La diferencia se explica un poco aquí. En mis pruebas, el mapeo de PUA funciona perfectamente en todos los navegadores. SPUA mapeo borks en Safari solo en Windows. La aplicación IcoMoon solo se asigna a PUA, lo cual es recomendable al menos para el futuro a corto plazo.
Estos son los pasos a seguir:
- Elija una fuente de icono.
- Vaya a IcoMoon y cárguelo (o use su conjunto de iconos)
- Elija los iconos que desee.
- Asignelos a los personajes que desee. Es mejor mapear a un símbolo relacionado o PUA.
- Descargue las fuentes / demostración.
También puede usar Pictos Server para seleccionar y mapear íconos, pero solo funciona con Pictos y no le ayuda a elegir símbolos (puede copiar y pegar desde aquí). Sin embargo, es un conjunto muy agradable y lo aloja para usted y hace que sea muy fácil crear conjuntos existentes sin cambiar manualmente los archivos de fuentes.
El futuro
En el futuro, esperamos poder confiar en speak: none; funcionando perfectamente en todas partes para que podamos volver a usar pseudo elementos y semántica perfecta.
Pertinente
- Si le preocupa FOUT (Flash of Unstyled Text) que acompaña a @ font-face en Firefox 3.5 / 3.6 e IE 6-9, una solución sería probar FOUT-B-Gone.
- Resumen de fuentes de iconos