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.

WCAG 2.2: publicado el primer borrador de trabajo

The Accessibility Guidelines Working Group (AG WG) has published a First Public Working Draft of Web Content Accessibility Guidelines (WCAG) 2.2. WCAG provides recommendations for making web content more accessible to people with disabilities. It addresses accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines also makes your web content more usable to all users in a variety of situations.

FIRST PUBLIC WORKING DRAFT: WCAG 2.2

¿Qué ha ocurrido? La Iniciativa de Accesibilidad Web, del W3C ya está trabajando en una nueva versión de las Pautas de Accesibilidad Web, la 2.2. Puedes encontrar el actual borrador de trabajo en Web Content Accessibility Guidelines (WCAG) 2.2. First draft y la actualización más reciente de la versión en Web Content Accessibility Guidelines (WCAG) 2.2. Last version.

WCAG 2.2 was initiated with the goal to continue the work of WCAG 2.1: Improving accessibility guidance for three major groups: users with cognitive or learning disabilities, users with low vision, and users with disabilities on mobile devices. Many ways to meet these needs were proposed and evaluated, and a set of these were refined by the Working Group. Structural requirements inherited from WCAG 2.0, clarity and impact of proposals, and timeline led to the final set of success criteria included in this version. The Working Group considers that WCAG 2.2 incrementally advances web content accessibility guidance for all these areas, but underscores that not all user needs are met by these guidelines.

WCAG 2.2: Comparison with WCAG2.1

Novedades de las WCAG 2.2

¿Qué nuevas características trae las WCAG 2.2? Un nuevo Success Criteria o criterio de conformidad:

Success Criterion 2.4.11 Focus Visible (Enhanced)

When a User Interface Component displays a visible keyboard focus, all of the following are true:

  • Minimum area: The focus indication area is greater than or equal to the longest side of the bounding rectangle of the focused control, times 2 CSS pixels.
  • Focus contrast: Color changes used to indicate focus have at least a 3:1 contrast ratio with the colors changed from the unfocused control.
  • Contrast or thickness: The focus indication area has a 3:1 contrast ratio against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.
Note

A focus indicator that is larger than the minimum area may have parts that do not meet the 3:1 contrast ratio, as long as an area equal to the minimum does meet the contrast ratio.

WCAG 2.2: Success Criterion 2.4.11 Focus Visible (Enhanced)

Detectando imágenes sin alt mediante CSS

En una micropublicación de Addy Osmani, muestra un pequeño truco para visualizar de forma clara cuando una imagen no tiene alternativa textual (atributo alt):

img:not([alt]){
    border: 5px solid red;
}

De esta manera, veremos un llamativo y grueso borde de 5 pixels rojo en las imágenes que probablemente estén incumpliendo una regla básica de accesibilidad web (tal vez sean decorativas, pero no es lo habitual).

Una alternativa —también propuesta por el mismo autor—, aprovecha una interesante y potente característica de CSS3: la aplicación de filtros en imágenes.

img:not([alt]){
    filter:blur(5px);
}

Y como consecuencia, veremos las imágenes sin alternativa textual desenfocadas.

Más allá del aspecto cómico que pueda tener el mostrar una imagen desenfocada, y dar a entender que no se ha cargado correctamente, creo que en situaciones en los que sea factible incluir imágenes sin textos alternativos —ya sea por los editores encargados de generar contenidos, o el propio software de creación de contenidos—, creo que no viene mal incluirlo en las hojas de estilos utilizadas, aunque sea en entornos previos (desarrollo, pre-producción, QA).

Porque, pasa el tiempo, y todavía tenemos que seguir insistiendo en las ventajas de la accesibilidad web, y la satisfacción del trabajo bien hecho: por los editores y desarrolladores. Pero sobre todo por los usuarios. Por todos.


Por cierto: blog posible comenzó su historia en el lejano año 2005. Estuvo funcionando hasta el 2008, en el que por diversos motivos, decidí aparcar este blog (junto con web es móvil) y empezar de nuevo, con Xposible.

Más tarde, empecé a utilizar tumblr (¿cómo se pronuncia?) haciendo blogs temáticos, en los que básicamente, incluía enlaces (lo contaba en asuntos varios y ahí puedes encontrar los enlaces).

Hoy, casi doce años después de la última publicación, vuelvo a escribir de nuevo aquí.

Probablemente este blog se nutra de esos enlaces y recursos pero utilizando y revitalizando webposible.  Mientras muchos blogs de aquella época, continúan en estado zombie o directamente han desaparecido, yo vuelvo tras un descanso de casi doce años. Cuento contigo.

403 day: Una iniciativa arrogante en defensa de la web

En esta primera y ojalá última edición del día 403 (4 de marzo de 2008) denegamos el acceso a nuestros sitios al navegador Internet Explorer.
La aplicación de estándares en el desarrollo web permite que los sitios funcionen y se vean correctamente en casi todos los navegadores. Por desgracia, Internet Explorer, el navegador con mayor dominio de mercado, presenta serias deficiencias en la implementación de los estándares. Como consecuencia, los desarrolladores tienen que hacer trabajo extra para que quienes lo usan disfruten de una buena experiencia. Eso cuesta dinero. Y cabellos, muchos cabellos.
Por la salud de miles de trabajadores: no rompas la web, usa otro navegador.

403day una iniciativa arrogante en defensa de la web

Sidar cumple 10 años: ¡¡Felicidades!!

Lo ha comentado Emmanuelle en la lista de correo accesoweb, pero lo que aquí puedes leer, es lo que podemos leer en Décimo Aniversario del SIDAR:

El 27 de junio de 2007 se cumplen diez (10) años desde la celebración del primer «Seminario sobre Diseño y Accesibilidad en la WWW», por tanto ¡El SIDAR está de cumpleaños!.

Desde su nacimiento, el SIDAR ha servido de punto de encuentro y discusión para usuarios, diseñadores, desarrolladores y expertos; ha difundido, promovido, informado y formado a la comunidad Iberoamericana en la eliminación de barreras en la Sociedad de la Información y del Conocimiento.

El Seminario es lo que sus miembros hacen de él, y a lo largo de estos 10 años ha sido liderado, en sus distintos grupos de interés y de trabajo, por personas voluntarias de varios países de Iberoamérica. Todos ellos han sido los impulsores, los tejedores, de esta extensa red que derriba barreras y construye una Sociedad de la Información accesible e inclusiva para todos. A todos ellos ¡Gracias!.

En estos diez años su crecimiento e impacto social ha sido continuo. Su lista de discusión general alcanza ya cerca de los 1500 miembros, sus grupos de interés y de trabajo alcanzan los 16, se ha promovido y apoyado la legislación específica en varios países, ha promovido y conseguido la inclusión de la accesibilidad en la Sociedad de la Información, como uno más de los derechos de las personas con discapacidad, en la Convención Internacional de Derechos de las Personas con Discapacidad de la ONU, etc., etc.

Estamos preparando una serie de actos de celebración, en varios países, de los que daremos cumplida cuenta en esta página. Los actos se programarán a partir del mes de septiembre y su organización corre a cargo de los propios miembros del Seminario en sus respectivos países.

Décimo Aniversario del SIDAR

¿Qué puedo decir que no haya dicho ya antes sobre SIDAR? Pues que la mayor parte de lo poquito que se sobre desarrollo web, es gracias a ellos. Por ésto, y por la labor que llevan haciendo durante 10 años… ¡gracias y muchas felicidades!

Y ya que estoy felicitando, felicidades también a mi compañero Jacobo, por algo que me ha contado hoy y por ser como es 🙂