A11y on Fernando Ruiz

ARIA vs HTML Semántico: La Regla de Oro

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El HTML Semántico utiliza las etiquetas nativas del navegador (como <button>, <input>, <nav>) que ya traen accesibilidad y comportamiento integrados. ARIA (Accessible Rich Internet Applications) es un conjunto de atributos que se añaden al código para “parchear” o explicar elementos personalizados que el navegador no entiende por defecto.

La Primera Regla de ARIA

Si hay una cosa que todo diseñador y desarrollador debe recordar es la Primer Regla de ARIA:

ARIA vs HTML Semántico: La Regla de Oro

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Primera Regla de ARIA

Si hay una cosa que todo diseñador y desarrollador debe recordar es la Primer Regla de ARIA:

ARIA vs. Semantic HTML: The Golden Rule

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Semantic HTML uses the browser’s native tags (such as <button>, <input>, <nav>) which already come with built-in accessibility and behavior. ARIA (Accessible Rich Internet Applications) is a set of attributes added to the code to “patch” or explain custom elements that the browser doesn’t understand by default.

The First Rule of ARIA

If there is one thing every designer and developer should remember, it is the First Rule of ARIA:

Color Contrast Math: Readability and Ratio

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Color Contrast is the difference in luminosity between the text (foreground) and the background. WCAG 2.1 accessibility guidelines establish specific mathematical contrast ratios (e.g., 4.5:1) that must be met for content to be readable by as many people as possible.

Why the Designer Must Know Color Math?

Designing only for “what looks good” on your high-end 5K monitor is a dangerous trap. A large portion of the world’s population has some form of visual impairment or uses their devices under direct sunlight.

Estrategia de Tab Order: El Camino del Usuario de Teclado

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Tab Order es la secuencia exacta en la que un usuario de teclado (pulsando Tab y Shift + Tab) recorre los elementos interactivos de una interfaz. Una buena estrategia de tabulación asegura que el usuario no se pierda, no tenga que dar clics innecesarios y pueda completar sus tareas de forma rápida y lógica.

¿Por qué el Diseñador debe Decidir el Tab Order?

Aunque el orden de tabulación suele ser una consecuencia automática del orden en el código HTML (el DOM), el diseño visual puede ser mucho más complejo. Como diseñadores, a veces creamos layouts con columnas, rejillas (grids) o elementos flotantes que no siguen un orden lineal puro.

Estrategia de Tab Order: El Camino del Usuario de Teclado

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Decidir el Tab Order?

Estrategias de Movimiento Reducido: Motion y Accesibilidad

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Movimiento Reducido es una preferencia de accesibilidad que los usuarios pueden activar en sus sistemas operativos (Windows, macOS, iOS, Android). Cuando se activa, indica a las aplicaciones que eliminen o simplifiquen las animaciones innecesarias (prefers-reduced-motion) para evitar náuseas, mareos o distracciones a personas con trastornos vestibulares o TDAH.

¿Por qué el Diseñador debe Gestionar el Movimiento?

Como diseñadores, amamos las animaciones: zooms, paralaje (parallax), rebotes y transiciones suaves. Sin embargo, para millones de personas, estas animaciones no son “bonitas”; son físicamente dolorosas. El movimiento excesivo puede causar migrañas, desorientación y malestar vestibular.

Estrategias de Movimiento Reducido: Motion y Accesibilidad

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Gestionar el Movimiento?

Focus Management: Navigation without a Mouse

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Focus Management is the control of which interface element is selected at any given time to interact with it. It is the backbone of navigation for keyboard users (who press Tab), screen readers, and anyone not using a mouse.

Why the Designer Must Manage Focus?

Imagine walking into a dark room with only a flashlight. The area your flashlight illuminates is “the focus.” If you move the flashlight and, suddenly, the light disappears or jumps to the next room without sense, you’ll feel lost and frustrated.

Foundations of the Accessibility Tree: How Machines See

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

The Accessibility Tree is a data structure generated by the browser (based on the DOM) that contains only the information relevant to assistive technologies (such as screen readers or voice dictation). It is not visual; it is a translation of your design into names, roles, states, and values.

Why the Designer should know the Accessibility Tree?

As designers, we often focus on the Visual DOM (colors, shapes, positions). However, for blind or visually impaired users, your design is only what the Accessibility Tree says it is.

Fundamentos del Accessibility Tree: Cómo Ven las Máquinas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Accessibility Tree (Árbol de Accesibilidad) es una estructura de datos generada por el navegador (basada en el DOM) que contiene solo la información relevante para las tecnologías asistivas (como lectores de pantalla o dictado por voz). No es visual; es una traducción de tu diseño en nombres, roles, estados y valores.

¿Por qué el Diseñador debe Conocer el Árbol de Accesibilidad?

Como diseñadores, solemos centrarnos en el DOM Visual (colores, formas, posiciones). Sin embargo, para los usuarios ciegos o con discapacidad visual, tu diseño es solo lo que el Árbol de Accesibilidad dice que es.

Fundamentos del Accessibility Tree: Cómo Ven las Máquinas

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Conocer el Árbol de Accesibilidad?

Gestión de Foco: La Navegación sin Ratón

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

La Gestión de Foco es el control de qué elemento de la interfaz está seleccionado en cada momento para interactuar con él. Es la columna vertebral de la navegación para usuarios de teclado (que pulsan Tab), lectores de pantalla y cualquier persona que no use un ratón.

¿Por qué el Diseñador debe Gestionar el Foco?

Imagina que entras en una habitación a oscuras y solo tienes una linterna. La zona que ilumina tu linterna es “el foco”. Si mueves la linterna y, de repente, la luz desaparece o salta a la habitación de al lado sin sentido, te sentirás perdido y frustrado.

Gestión de Foco: La Navegación sin Ratón

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Gestionar el Foco?

Matemáticas del Contraste de Color: Legibilidad y Ratio

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

El Contraste de Color es la diferencia de luminosidad entre el texto (primer plano) y el fondo. Las pautas de accesibilidad WCAG 2.1 establecen ratios matemáticos de contraste específicos (ej. 4.5:1) que deben cumplirse para que el contenido sea legible por el mayor número posible de personas.

¿Por qué el Diseñador debe Conocer la Matemática del Color?

Diseñar solo por “lo que se ve bien” en tu monitor 5K de alta gama es una trampa peligrosa. Una gran parte de la población mundial tiene algún tipo de discapacidad visual o utiliza sus dispositivos bajo la luz directa del sol.

Matemáticas del Contraste de Color: Legibilidad y Ratio

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Conocer la Matemática del Color?

Pruebas con Lectores de Pantalla: El Oído del UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

Las Pruebas con Lectores de Pantalla son el proceso de navegar e interactuar con una interfaz digital utilizando únicamente tecnologías de lectura por voz (como VoiceOver, TalkBack o NVDA). Su objetivo es verificar que la información visual se traduce correctamente a una experiencia auditiva lógica y comprensible.

¿Por qué el Diseñador debe Saber Usar un Lector de Pantalla?

Como diseñadores, solemos pensar en la accesibilidad como una lista de “checks” técnicos que debe cumplir desarrollo. Sin embargo, la accesibilidad es experiencial.

Pruebas con Lectores de Pantalla: El Oído del UX

Mon, 01 Jan 0001 00:00:00 +0000

info Definición Rápida

¿Por qué el Diseñador debe Saber Usar un Lector de Pantalla?

Como diseñadores, solemos pensar en la accesibilidad como una lista de “checks” técnicos que debe cumplir desarrollo. Sin embargo, la accesibilidad es experiencial.

Reduced Motion Strategies: Motion and Accessibility

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Reduced Motion is an accessibility preference that users can activate in their operating systems (Windows, macOS, iOS, Android). When activated, it tells applications to remove or simplify unnecessary animations (prefers-reduced-motion) to prevent nausea, dizziness, or distraction for people with vestibular disorders or ADHD.

Why the Designer Should Manage Motion?

As designers, we love animations: zooms, parallax, bounces, and smooth transitions. However, for millions of people, these animations are not “pretty”; they are physically painful. Excessive movement can cause migraines, disorientation, and vestibular discomfort.

Screen Reader Testing: The Ear of UX

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Screen Reader Testing is the process of navigating and interacting with a digital interface using only voice reading technologies (such as VoiceOver, TalkBack, or NVDA). Its goal is to verify that visual information is correctly translated into a logical and understandable auditory experience.

As designers, we often think of accessibility as a technical “checklist” that development must follow. However, accessibility is experiential.

Tab Order Strategy: The Keyboard User's Path

Mon, 01 Jan 0001 00:00:00 +0000

info Quick Definition

Tab Order is the exact sequence in which a keyboard user (pressing Tab and Shift + Tab) traverses an interface’s interactive elements. A good tabbing strategy ensures that the user doesn’t get lost, doesn’t have to perform unnecessary clicks, and can complete their tasks quickly and logically.

Why the Designer Should Decide the Tab Order?

Although tab order is usually an automatic consequence of the order in the HTML code (the DOM), visual design can be much more complex. As designers, we sometimes create layouts with columns, grids, or floating elements that don’t follow a pure linear order.

A11y on Fernando Ruiz

ARIA vs HTML Semántico: La Regla de Oro

La Primera Regla de ARIA

ARIA vs HTML Semántico: La Regla de Oro

La Primera Regla de ARIA

ARIA vs. Semantic HTML: The Golden Rule

The First Rule of ARIA

Color Contrast Math: Readability and Ratio

Why the Designer Must Know Color Math?

Estrategia de Tab Order: El Camino del Usuario de Teclado

¿Por qué el Diseñador debe Decidir el Tab Order?

Estrategia de Tab Order: El Camino del Usuario de Teclado

¿Por qué el Diseñador debe Decidir el Tab Order?

Estrategias de Movimiento Reducido: Motion y Accesibilidad

¿Por qué el Diseñador debe Gestionar el Movimiento?

Estrategias de Movimiento Reducido: Motion y Accesibilidad

¿Por qué el Diseñador debe Gestionar el Movimiento?

Focus Management: Navigation without a Mouse

Why the Designer Must Manage Focus?

Foundations of the Accessibility Tree: How Machines See

Why the Designer should know the Accessibility Tree?

Fundamentos del Accessibility Tree: Cómo Ven las Máquinas

¿Por qué el Diseñador debe Conocer el Árbol de Accesibilidad?

Fundamentos del Accessibility Tree: Cómo Ven las Máquinas

¿Por qué el Diseñador debe Conocer el Árbol de Accesibilidad?

Gestión de Foco: La Navegación sin Ratón

¿Por qué el Diseñador debe Gestionar el Foco?

Gestión de Foco: La Navegación sin Ratón

¿Por qué el Diseñador debe Gestionar el Foco?

Matemáticas del Contraste de Color: Legibilidad y Ratio

¿Por qué el Diseñador debe Conocer la Matemática del Color?

Matemáticas del Contraste de Color: Legibilidad y Ratio

¿Por qué el Diseñador debe Conocer la Matemática del Color?

Pruebas con Lectores de Pantalla: El Oído del UX

¿Por qué el Diseñador debe Saber Usar un Lector de Pantalla?

Pruebas con Lectores de Pantalla: El Oído del UX

¿Por qué el Diseñador debe Saber Usar un Lector de Pantalla?

Reduced Motion Strategies: Motion and Accessibility

Why the Designer Should Manage Motion?

Screen Reader Testing: The Ear of UX

Why the Designer Should Know How to Use a Screen Reader?

Tab Order Strategy: The Keyboard User's Path

Why the Designer Should Decide the Tab Order?