font icons accesibles

Tardé en conocer los font-icons, y más en utilizarlos. Ahora, en una especie de framework que utilizo para trabajar, también he incluido font-icons: una vieja versión de Font Awesome que sigue siendo útil.

¿Qué es un font-icon? Es una forma de mostrar imágenes usando ficheros de fuentes, lo que ocurre es que en lugar de tener por ejemplo la letra «a» tiene el icono «lupa».

¿Qué ventajas tiene?

  • Poder cambiar el tamaño y color mediante CSS
  • Tener un conjunto homogéneo de iconos
  • Uso relativamente sencillo

¿Qué desventajas tiene? Aquí van algunas:

  • En ocasiones es necesario configurar el servidor para que sirva los ficheros de fuentes de la forma adecuada (mimetype)
  • No siempre hay un equilibrio entre los iconos disponibles y los que realmente se utilizan (y eso penaliza los tiempos de carga)
  • Para que sea compatible con un amplio espectro de navegadores, suelen ser necesarios varios ficheros con diferentes formatos de fuentes (y también penaliza los tiempos de carga).
  • No siempre se tienen en cuenta un aspecto clave, la accesibilidad.

¿Cómo hace un font-icon accesible?

Hay dos posibles casos de uso: iconos decorativos, e iconos importantes.
Y tenemos dos tipos de técnicas para hacerlos accesibles: usando HTML y usando WAI-ARIA.

Veamos, usando como ejemplo la versión actual de Font Awesome (5.10.2).

Una vez tenemos disponible las fuentes de iconos, mediante un código similar a:
<i class="fas fa-star"></i>

En el caso de que sea una imagen decorativa, usando el clásico HTML no haría falta nada más, pero con WAI-ARIA podemos añadir la propiedad aria-hidden para que lo oculte.
<i class="fas fa-star" aria-hidden></i>

En el caso de que se utilice un icono de fuente como si fuera una imagen y como tal necesite una alternativa textual, usando el viejo HTML nos bastaría con añadir un título descriptivo title.
Pero si aprovechamos las cracterísticas de WAI-ARIA podríamos usar role="img" para indicar que es una imagen, y aria-label para añadir esa alternativa textual necesaria.

El resultado final sería:

<i class="fas fa-star" role="img" aria-label="Favorito" title="Favorito"></i>

Optimizar los font-icons y usar sólo los iconos que necesito

Una recomendación final: como en cualquier utilidad, toca valorar si lo que nos ofrece es lo que necesitamos y cuánto nos cuesta para ver si merece o no la pena.

En el caso de los font-icons, tenemos por ejemplo, la posibilidad de usar centenares de iconos. ¿Necesitamos tantos?¿Qué coste tiene en velocidad de carga?

Si no necesitamos 400 iconos, solamente queremos 4, ¿para qué queremos tanto? Al final vamos a conseguir que la página se cargue más tarde y nos penaliza demasiado.

Para esos casos, nada como usar fontello que nos permite seleccionar para nuestro proyecto sólo los iconos que vamos a utilizar realmente. Y aunque no nos ofrezca la versatilidad de otras alternativas, puede ser justo lo que necesitamos.

Principios de diseño de servicios públicos de Servicios Digitales de Aragón

  1. Sitúa a las personas en el centro del proceso de diseño
  2. Diseña servicios de inicio a fin, no procedimientos
  3. Hazlo sencillo, accesible y seguro
  4. Co-crea en equipos multidisciplinares
  5. Piensa en global, sé consistente
  6. Construye una identidad digital 360º
  7. Aplica metodologías de trabajo ágiles
  8. Sé transparente, comparte y comunica
  9. Aprende y mejora de manera continua
  10. Implícate en el cambio de cultura

Valores y principios del equipo de SDA — Servicios Digitales de Aragón

KPI: Key Performance Indicator

Podríamos empezar, a modo de introducción con Cómo cumplir propósitos: definir objetivos, medir resultados (SMART).

Y centrándonos en la medición, toca hablar de KPI, como un indicador clave de rendimiento. Lo que nos permitirá saber numéricamente si cumplimos o no los objetivos.

En KPI is an imperative tool for UX designers podemos encontrar un interesante artículo que nos explica que son los KPI y cómo utilizarlos en el contexto del diseño.

El manual de datos abiertos (Open Data Handbook)

Aprovechando las circunstancias, estoy volviendo a retomar mi interés por la Web Semántica, o como se llama ahora, Open Data 🙂

Mi objetivo es que el cliente en el que estoy publique datos abiertos e intentar que sean buenos. Estoy desarrollando un vocabulario controlado (inspirándome mucho en Dublin Core), utilizando algunas herramientas que desconocía y, en definitiva, volviendo a estar entusiasmado por la manteria.

Lo que quería recomendar es un recurso divulgativo bastante bueno: Open Data Handbook. Se trata, como su nombre indica, un manual de datos abiertos, con la ventaja de que está traducido a bastantes idiomas, entre otros el castellano.

Creo que su lectura puede clarificar posibles dudas o lagunas sobre los datos abiertos, y pueden surgir ideas interesantes. A mí me está siendo muy útil, de ahí que lo recomiende.

Post ScriptumA la hora de escribir estas palabras, estamos confinados en casa por el desgraciadamente conocido COVID-19. Ánimo a todos.

Comparativa de frameworks front-end

Antes de empezar, una confesión: como en los clientes en los que he trabajado siempre se ha restringido el acceso a node.js y creo que eso me ha ahorrado una nada despreciable cantidad de horas de probaturas.

Pero, para los que tengan tiempo y ganas para investigar, o al menos tengan curiosidad para ver algunas alternativas que hay, puede dar un vistazo a A RealWorld Comparison of Front-End Frameworks 2020.