Accessibility on Fernando Ruiz

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.

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.

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.

Accessibility on Fernando Ruiz

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?

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?

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?