Learn

/

Accessibility

Accessibility

4 patterns

Focus indicators, icon labels, status communication, and link distinction patterns that make interfaces usable for everyone. You'll hit this when keyboard users cannot navigate your UI or color-blind users miss critical information.

Avoid

Toolbar

Save

Edit

Share

Delete

Tab key pressed twice. Where is the focus?


Prefer

Toolbar

Save

Edit

Share

Delete

Tab key pressed twice. Focus is on “Edit”.

Why avoid

Removing focus outlines with 'outline: none' may look cleaner, but it makes the interface unusable for keyboard-only users. This includes people using assistive technology, power users who prefer keyboard shortcuts, and anyone with a broken mouse or trackpad.

Why prefer

Visible focus indicators are essential for keyboard navigation. They show which element is currently selected, just like a cursor shows where you are typing. Without them, keyboard users are navigating blind, tabbing through elements with no idea where they are on the page.

Avoid

Actions


Prefer

Actions

Edit

Delete

Share

Search

Why avoid

Icon-only toolbars save space, but force users to guess what each icon means. Studies show that icon recognition varies widely across cultures and experience levels. Users waste time hovering or trial-clicking to discover what each button does.

Why prefer

Adding text labels next to icons removes ambiguity. Even common icons like the share symbol are interpreted differently across platforms. Text labels make actions immediately clear to all users, including those who are new to the interface or use screen readers.

Avoid

System Status

API Server

Database

CDN

Queue


Prefer

System Status

API Server

Operational

!

Database

Degraded

CDN

Operational

Queue

Down

Why avoid

Relying on color alone to convey meaning violates WCAG 1.4.1 (Use of Color). A red dot and a green dot may look identical to someone with red-green color blindness. Without a secondary indicator like an icon or label, these users cannot determine system status at all.

Why prefer

Combining color with icons and text labels ensures that status information reaches all users. About 8% of men have some form of color vision deficiency. Using multiple visual channels (color, shape, and text) makes the status immediately clear regardless of how someone perceives color.

Avoid

Custom Domains

Our platform supports custom domains for all plans. See the setup guide for instructions, or visit the DNS reference for advanced configuration.


Prefer

Custom Domains

Our platform supports custom domains for all plans. See the setup guide for instructions, or visit the DNS reference for advanced configuration.

Why avoid

Links that differ from body text only by color are easy to miss. Users with low vision or color blindness may not notice the color difference at all. Removing underlines from inline links trades a well-understood convention for a subtle visual distinction that many users will overlook.

Why prefer

Underlined links are universally recognized as clickable. The underline provides a non-color visual cue that distinguishes links from surrounding text, which is critical for users with color vision deficiency and for anyone scanning a page quickly.