Interfaz, marca y accesibilidad: cómo decido lo que se ve.

Casi todo lo que hace una web accesible se decide cuando todavía no hay nada dibujado.

El contraste se decide al elegir la paleta; el orden de lectura, al montar la retícula; el tamaño de lo que se pulsa, al dibujar el botón. Si eso se deja para el final, no hay accesibilidad: hay parches. La norma internacional de referencia, las WCAG, está escrita justamente como criterios comprobables, y eso permite tratar la accesibilidad como se trata cualquier otro requisito: se cumple o no se cumple, y se puede verificar.

Aquí el nivel de trabajo es AA. En la práctica significa texto con contraste suficiente sobre su fondo, foco visible al recorrer con el teclado, objetivos de pulsación con tamaño mínimo, nada que dependa solo del color para entenderse y movimiento que se apaga cuando el sistema dice que se reduzca. Esta web respeta esa última preferencia en los ecos de la portada, que se quedan quietos si el navegador lo pide.

Y hay una parte legal que conviene no descubrir tarde: la accesibilidad de los productos y servicios digitales está regulada en la Unión Europea, y en el sector público español hay un real decreto que la exige desde 2018.

Los términos del oficio, con un caso donde se aplican y el texto público que los define.

• UX · Experiencia de uso Todo lo que percibe alguien al usar un producto: si entiende dónde está, si consigue lo que venía a hacer y qué se lleva de recuerdo. Empieza antes de la primera pantalla y sigue después de cerrarla. Ejemplo: Un formulario de contacto tiene buena experiencia si dice qué va a pasar después de enviarlo, no si tiene la sombra bonita. Fuente: The Definition of User Experience, Nielsen Norman Group
• UI · Interfaz La parte visible y manejable: retícula, tipografía, color, estados y controles. Es donde se materializan las decisiones de experiencia, y donde se notan cuando no se han tomado. Ejemplo: Dos columnas siempre iguales, una sola familia tipográfica y el peso como jerarquía: la página nueva se monta con las piezas que ya existen en vez de inventarse un bloque suyo. Fuente: Human Interface Guidelines, Apple
• Diseño centrado en las personas · ISO 9241-210 Un método normalizado en cuatro actividades que se repiten: entender el contexto de uso, especificar los requisitos de las personas, producir soluciones y evaluarlas con usuarios reales. Ejemplo: Antes de dibujar el portal de un empleado hay que saber si lo va a abrir en el móvil con guantes puestos o sentado en una oficina. La respuesta cambia el tamaño de todo. Fuente: ISO 9241-210:2019
• Heurísticas de usabilidad · Las diez de Nielsen Diez reglas generales —visibilidad del estado, control del usuario, consistencia, prevención de errores…— que sirven para revisar una interfaz sin necesidad de montar un laboratorio. Ejemplo: Es la lista con la que reviso una marca o una pantalla que ya existe: en una tarde se ve qué se salva, qué se ajusta y qué toca rehacer. Fuente: 10 Usability Heuristics for User Interface Design, Nielsen Norman Group
• WCAG 2.2 · Accesibilidad web La norma del W3C con los criterios de accesibilidad del contenido web, organizados en tres niveles: A, AA y AAA. Está escrita como criterios comprobables, así que se puede verificar en vez de opinar. Ejemplo: El nivel de trabajo aquí es AA: contraste, foco visible al tabular, tamaño mínimo de lo que se pulsa y nada que se entienda solo por el color. Fuente: Web Content Accessibility Guidelines 2.2 (W3C)
• Contraste La relación de luminancia entre un texto y su fondo. Las WCAG piden 4,5:1 para texto normal y 3:1 para texto grande y para los bordes de los controles, en nivel AA. Ejemplo: El naranja de marca no vale para texto sobre blanco porque no llega a 3:1; para eso existe una variante oscura que sí cumple. La paleta entera está comprobada, y si se toca un color hay que volver a medir. Fuente: WCAG 2.2 · criterios de contraste (Quick Reference, W3C)
• ARIA · WAI-ARIA 1.2 El vocabulario que da papel, estado y propiedades a un componente cuando el HTML no llega. Su primera regla es no usarlo: si existe el elemento nativo, el elemento nativo gana. Ejemplo: El visor de fotografías de la galería es un diálogo nativo del navegador, no un montaje con capas: lo que ya sabe hacer el sistema no se reimplementa. Fuente: Accessible Rich Internet Applications 1.2 (W3C)
• Tokens de diseño Las decisiones visuales guardadas como valores con nombre —color, tamaño, espacio, tipografía— para que una sola fuente alimente la web, la aplicación y el material impreso. El nombre dice el papel, no el color. Ejemplo: La variable se llama «acento», no «naranja». Si algún día la marca cambia de color, lo que hay que cambiar es un valor y no una convención mental repartida por cuarenta ficheros. Fuente: Design Tokens Format Module (W3C Community Group)
• Sistema de diseño El conjunto de tokens, componentes y reglas de uso que hace que dos piezas hechas por gente distinta parezcan de la misma casa. No es una carpeta de plantillas: es lo que se usa para construir. Ejemplo: La guía de esta web se genera desde los propios tokens y las piezas reales, así que no puede desincronizarse del CSS: si cambia el código, la guía cambia con él. Fuente: Material Design · Foundations (Google)
• Rendimiento percibido · Core Web Vitals Las métricas que miden cómo se siente una página al cargarla y usarla: cuándo aparece el contenido principal, cuánto tarda en responder y cuánto salta la maqueta mientras carga. Ejemplo: Las medidas de cada fotografía van escritas en el marcado para que el mosaico no salte al cargar. Es una decisión de diseño, aunque parezca de programación. Fuente: Web Vitals (web.dev, Google)
• Marca registrada El derecho exclusivo sobre un signo distintivo para unos productos o servicios, que nace del registro ante la oficina correspondiente: la nacional en España o la de la Unión Europea para todo el mercado interior. Ejemplo: Conviene comprobar que el nombre está libre antes de dibujar el logotipo, no después de imprimir las tarjetas. El registro lo tramita un agente o el propio titular; el diseño no lo sustituye. Fuente: Ley 17/2001, de Marcas (BOE)

Normas, guías y textos legales en los que se apoya lo de arriba, con su organismo y su fecha.

• Web Content Accessibility Guidelines (WCAG) 2.2 W3C · 2023-10-05
• Accessible Rich Internet Applications (WAI-ARIA) 1.2 W3C · 2023-06-06
• ISO 9241-210:2019 · Diseño centrado en las personas ISO · 2019-07
• 10 Usability Heuristics for User Interface Design Nielsen Norman Group · 1994
• Design Tokens Format Module W3C Community Group
• Directiva (UE) 2019/882 · Accesibilidad de productos y servicios Unión Europea · 2019-04-17
• Real Decreto 1112/2018 · Accesibilidad de sitios web del sector público BOE · 2018-09-07
• Ley 17/2001, de Marcas BOE · 2001-12-07
• Reglamento (UE) 2017/1001 · Marca de la Unión Europea Unión Europea · 2017-06-14
• Web Vitals Google

• Qué incluye el trabajo de marca De la identidad al material impreso, con las marcas en las que he trabajado.
• Y cómo se programa lo diseñado Pruebas, SOLID y entrega: el método del otro lado de la pantalla.
• Dónde se ve aplicado Los productos cuya marca e interfaz he diseñado, con enlace para verlos.