Categorías
accesibilidad recomendaciones W3C

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)

Categorías
Desarrollo web

Jeremy Keith: Mejora progresiva

  1. Identificar la funcionalidad principal.
  2. Haz que esa funcionalidad esté disponible utilizando la tecnología más simple posible.
  3. ¡Mejorar!

Hydration — Jeremy Keith

Categorías
Desarrollo web Diseño web

Artículos atemporales sobre desarrollo web

Alguien en twitter (¡en twitter!) preguntaba sobre artículos atemporales y que de alguna manera cambiaran la perspectiva sobre el desarrollo web.

Esos son los artículos que a mí me gustan y me gustaría escribir 🙂

Chris Coyier ha listado en un artículo los suyos (y de ellos los conocía y también me impactaron). Se titula Timeless Web Dev Articles.

Entre tanta comunicación limitada en twitter, no viene mal leer con calma un buen puñado de artículos.

Cómo echo de menos la época pre-twitter.

Categorías
Tipografía

Tipografía Public Sans, fuentes con licencia libre

digital.gov, encargada de mejorar los servicios digitales guvernamentales de los Estados Unidos, ha desarrollado una tipografía, la Public Sans y ha puesto a disposición las fuentes con la licencia SIL OPEN FONT LICENSE (libre para uso personal y comercial).

Se puede acceder también al repositorio: github: Public Sans.

Cuenta con nueve pesos e incluye cursiva en todos ellos. A continuación un ejemplo, con un enlace a la página de ejemplo:

Muestra de la fuente Public Sans con un peso de 500
Muestra de la fuente Public Sans con un peso de 500

Una nueva fuente que se une a otras que le preceden y que han nacido en el contexto digital contemporáneo con una destacada importancia:

  • Fira Go (2018), varios autores, basada en la fuente Fira Sans (2013) diseñada por Erik Spiekermann para el sistema operativo Firefox OS.
  • Roboto (2011), Christian Robertson (Estados Unidos), diseñada para el sistema operativo Android.
  • San Francisco (2014), Apple, Estados Unidos. Usada en sus sistemas operativos (iOS y Mac OSX).
  • Segoe UI (2004), Steve Matteson, Estados Unidos. Usada en los sistemas operativos de Microsoft.

Xposible: Las fuentes de Massimo Vignelli

Relacionado con el asunto, probablemente te interese leer ¿Qué diferencia hay entre los términos tipografía y fuente?

Categorías
Diseño

Lista de componentes de un sistema de diseño

Mi primer sistema de diseño no era más que una plantilla con una tabla: cabecera, subcabecera, un par de filas (estilos alternos mediante clases, nada de odd y even) y poco más.

Era útil, pero siempre pensaba que era necesario algo más. Era un completo novato que estaba aprendiendo HTML, CSS y accesibilidad con las especificaciones del W3C traducidas por Sidar en los largos viajes en tren para ir al trabajo.

Obviamente, en casi veinte años todo ha cambiado mucho, aunque para mi sorpresa, sigo haciendo básicamente el mismo trabajo aunque con más experiencia (y tal vez no la proporcional parte de conocimiento).

He leído con interés algunos buenos artículos sobre Sistemas de Diseño (Design Systems) que me han resultado útiles para conocer de qué se trataba, qué utilidad tenían y como crearlos e implementarlos. Para un proyecto, poco antes de empezar a sonar el término, empecé lo que yo denominé Guía de estilos que era en parte un sistema de diseño con componentes reutilizables y algunos recursos extras que considero importantes (accesibilidad, legislación, web móvil, estándares, diseño, etcétera).

Dejando de lado todo lo anterior, en Design System Checklist podemos encontrar una larga lista de verificación que puede servir para, a la hora de desarrollar un sistema de diseño, que componentes podría tener. Además incluye enlaces con información contextual muy útil, por lo que no puedo dejar de recomendar el recurso.