Los íconos se usan ampliamente en el diseño web: pueden resaltar partes importantes de un sitio web, actuar como atajos donde el texto no cabe, fortalecer su marca e informar a sus visitantes sobre las barreras del idioma.
Pero para ser verdaderamente inclusivo, su sitio debe usar disponible iconos En esta publicación, cubriremos todo lo que necesita saber para crear íconos en línea, que incluyen:
¿Cuáles son los iconos disponibles?
Los íconos disponibles son íconos que pueden ser entendidos por todos los visitantes del sitio, independientemente de su discapacidad, discapacidad o limitaciones. Los íconos disponibles aseguran que cada visitante pueda comprender y acceder a los íconos en la página y la información o funciones asociadas con ellos.
Más de mil millones de personas viven con algún tipo de discapacidad y apostamos a que estos usuarios constituyen una parte importante de su base de usuarios. Cumplir con las pautas de accesibilidad en todos los aspectos del diseño de su sitio web, incluidos los iconos, garantiza que a las personas con discapacidades, discapacidades y limitaciones no se les niegue la misma experiencia que a otros visitantes.
Cómo hacer que los iconos estén disponibles
Hay algunas reglas de accesibilidad que debe seguir para que sus íconos estén disponibles para los visitantes de su sitio web o aplicación. Estos son algunos consejos para tener en cuenta al diseñar o implementar un conjunto de iconos.
Haz que los íconos sean claramente visibles en la página.
Para que sean accesibles, los iconos deben ser claramente visibles en el sitio web. Si un ícono requiere primero la interacción del usuario (como hacer clic o pasar el mouse sobre el mouse), se puede omitir, lo que significa que no todos los usuarios recibirán la misma información del sitio.
Aquí hay un ejemplo de Google Maps. Usando el menú de íconos (en la imagen a continuación), el visitante puede buscar supermercados, restaurantes, restaurantes de comida para llevar, hoteles y estaciones de servicio en el área haciendo clic en el ícono. Por ejemplo, al hacer clic en el icono de un restaurante, aparecerá una lista de restaurantes locales, que están marcados con un icono de cuchillo y tenedor en el mapa.
Estas opciones aparecen en la parte superior de la página incluso antes de que se realice la búsqueda y están diseñadas para contrastar bien con el fondo para que sean visibles.
Utilice el texto adjunto para reducir la ambigüedad.
En el ejemplo anterior de Google Maps, también preste atención al texto junto a cada icono. Quizás se pregunte por qué es necesario incluir texto; después de todo, ¿no son solo íconos de reemplazo de texto?
Esto es importante porque los íconos comúnmente entendidos son raros. Y lupalo que significa que el «motor de búsqueda» es uno de los pocos que es realmente ampliamente reconocido. Sin embargo, con la mayoría de los íconos, se debe adjuntar una etiqueta de texto a la imagen para evitar ambigüedades.
Incluso omnipresente icono de hamburguesa en el menú móvil puede ser pasado por alto por los usuarios. En realidad Prueba A/B mostró un mayor compromiso y conversiones cuando se agregó la palabra «Menú» al icono.
Agregar etiquetas de texto tiene el beneficio adicional de aumentar el área de acceso del enlace, lo que facilita hacer clic o tocar y reduce los costos de interacción.
Utilice suficiente contraste de color.
También debe considerar el color para la accesibilidad de los iconos. Si el contraste de color de un ícono es demasiado bajo en relación con el color de fondo, es posible que algunos usuarios con visión limitada no puedan verlo o usarlo.
Considere el paquete de iconos a continuación:
La mayoría de los visitantes podrán ver estos iconos de redes sociales. Sin embargo, debido al bajo contraste de color, es posible que las personas con problemas de visión o daltónicos no puedan hacerlo. Además, estos íconos serían difíciles de ver para cualquier persona cuando se reducen en una pantalla más pequeña.
Las Pautas de accesibilidad al contenido web recomiendan: relación de contraste de al menos 4,5: 1 para imágenes (excepto las imágenes decorativas y las imágenes que forman parte de un componente de interfaz inactivo). Si no sabes exactamente lo que eso significa, está bien. Puede comprobar fácilmente el contraste de color de sus iconos con verificador de contraste en línea como este.
Escribe un texto alternativo conciso y efectivo.
El texto alternativo (o texto alternativo para abreviar) es necesario para las imágenes disponibles, ya que describe la imagen para los visitantes del lector de pantalla. Para los íconos, use texto alternativo que describa la función del ícono cuando se hace clic. Por ejemplo, este icono:
… puede tener el siguiente texto alternativo:
<img src="https://blog.hubspot.com/website/contact.png" alt="email us">
Además, los íconos decorativos no requieren texto alternativo ya que no brindan información a los visitantes. Por ejemplo, se usan cuatro íconos para ilustrar los elementos en la lista de Airbnb a continuación, pero informar a una persona ciega que hay un ícono de casa o un ícono de llave es superfluo; lo que necesitan saber está en el texto adjunto:
Para estos íconos decorativos, aún debe incluirse alternativa un atributo en la etiqueta de la imagen, pero deje el valor en blanco, por ejemplo:
<img src="https://blog.hubspot.com/website/decorative.png" alt="">
Haz que los íconos sean lo suficientemente grandes para que puedas verlos e interactuar con ellos.
El tamaño de los íconos también es importante, especialmente para los enlaces de íconos. Un buen tamaño para recordar es 44 x 44 píxeles, ya que el icono más pequeño será difícil de ver o tocar para algunos usuarios en un dispositivo móvil. Compruebe el tamaño de su icono y ajústelo si es necesario antes de exportarlo.
Conjuntos de iconos listos para usar
Si no está seguro de las herramientas de diseño o tiene poco tiempo, puede descargar iconos predibujados individualmente o como conjuntos de iconos. (Aquí hay 15 paquetes de íconos gratuitos para comenzar).
Asegúrese de haber verificado las licencias de todos los íconos descargados. Esto es especialmente cierto si planea usarlos comercialmente. Algunos íconos tienen requisitos de atribución que se deben cumplir.
Uno de los paquetes de iconos más famosos es Font Awesome, que contiene miles de iconos. Echémosle un vistazo más de cerca.
Impresionantes iconos de fuentes disponibles
Fuente increíble es un paquete de iconos de código abierto que es popular entre los diseñadores web. Si bien los íconos gratuitos de Font Awesome se pueden usar con fines comerciales, algunos íconos representan marcas que pueden ser marcas registradas, así que asegúrese de tener permiso para usarlos.
La búsqueda avanzada en Font Awesome facilita encontrar el ícono adecuado para su proyecto. Puede filtrar su búsqueda por Gratis o Pro, Estilo de ícono, Tipo de ícono y más.
Los íconos de Font Awesome se pueden usar de dos maneras. En primer lugar, hay fuentes de iconos que utilizan símbolos en lugar de letras y números de las fuentes normales. Font Awesome también proporciona íconos SVG que funcionan mejor en términos de accesibilidad, ya que es más fácil agregar el código accesible que necesitan los lectores de pantalla a los archivos SVG en lugar de las fuentes de íconos.
Algunos de los beneficios de usar Font Awesome son la gran variedad de íconos disponibles, muchos de los cuales tienen diferentes variantes. Puede cambiar el tamaño de los iconos sin perder nitidez, darles el color que desee y rotarlos, animarlos o voltearlos.
Si no puede encontrar los íconos que necesita en Font Awesome o en cualquier otro lugar, lo mejor que puede hacer es crear uno propio; echemos un vistazo a lo que implica este proceso a continuación.
Comience a compartir sus íconos web.
Habilitar la accesibilidad de los íconos es esencial para ayudar a los visitantes a comprender su sitio. Deben ser fáciles de ver, lo suficientemente grandes como para interactuar con ellos y comprenderlos por sí solos o con el texto que los acompaña. Para tener la oportunidad de una mejor participación, vale la pena tomarse un tiempo adicional para hacerlo bien.
Nota del editor: esta publicación se publicó originalmente en abril de 2020 y se actualizó para que sea completa.
