HAAMHAAM
HAAM octopus mascot

Trust, accessibility, and feedback · UX/UI pattern guide

Accessibility pass

An accessibility pass systematically removes barriers across semantics, keyboard use, focus, contrast, content, motion, forms, media, and assistive-technology behavior.

At a glance

What the pattern is designed to accomplish

Keyboard paths, focus states, contrast, labels, semantic landmarks, and reduced motion.

Planning price

€1,000

A starting budget anchor before discovery and technical scoping.

Typical effort

3-6 days

The implementation range depends on states, data, and integrations.

Pattern family

Trust, accessibility, and feedback

Use the family to find adjacent patterns that support the same journey.

Use cases

When this pattern is a strong fit

Use the pattern when it removes a real decision or interaction burden, not simply because users recognize its visual form.

Best suited to

  • Every public, customer, employee, and civic digital product
  • Products preparing for procurement, regulation, or broader market reach
  • Existing interfaces with accumulated component and content debt

Anatomy

The essential parts of accessibility pass

The visual treatment can change, but these responsibilities need to remain clear.

Part 1

Automated checks combined with keyboard and screen-reader review

Define this part explicitly in the design and test it with realistic content and states.

Part 2

Assessment against current WCAG success criteria and product context

Define this part explicitly in the design and test it with realistic content and states.

Part 3

Prioritized issues with reproducible steps and ownership

Define this part explicitly in the design and test it with realistic content and states.

Part 4

Regression prevention through components, tests, content rules, and training

Define this part explicitly in the design and test it with realistic content and states.

Implementation

Design and delivery guidance

The pattern works when interaction rules, content, data, and edge cases support the same user goal.

Recommended approach

  • Include disabled users in research and testing.
  • Fix shared components before repeating page-level patches.
  • Treat conformance as a baseline, not proof of a good experience.

Common failure modes

  • Relying only on automated scanners or overlays
  • Postponing accessibility until after architecture and content are fixed
  • Documenting failures without integrating fixes into delivery work

Accessibility

Inclusive design requirements

Accessibility is part of the pattern's behavior and content model, not a visual pass added after implementation.

Minimum considerations

  • Test keyboard, zoom, reflow, contrast, reduced motion, and common screen readers.
  • Verify names, roles, values, landmarks, headings, errors, and status messages.
  • Retest with real content and complete workflows after remediation.

History

How accessibility pass emerged and who popularized it

Interface patterns usually evolve through several technologies and products. The distinction below avoids assigning a single inventor where the evidence points to gradual adoption.

Origins

How the pattern came about

Digital accessibility grew from disability-rights advocacy, assistive technology, human-computer interaction, and legal standards. The W3C created the Web Accessibility Initiative in 1997 to coordinate guidance for an open and inclusive web.

Popular adoption

Who helped make it mainstream

W3C published WCAG 1.0 as a Recommendation on May 5, 1999, giving web teams a shared technical reference. Disability advocates, public-sector procurement, Section 508, later WCAG versions, and platform accessibility APIs drove broader adoption.

Related patterns

Continue through the pattern library

Adjacent patterns often need to be designed as one journey rather than as isolated components.

Trust, accessibility, and feedback

Inline validation and recovery

Field-level errors, helpful fixes, prevention states, and success confirmations.

Read the pattern guide

Trust, accessibility, and feedback

Loading, skeleton, and empty states

Skeleton screens, progress states, friendly empty states, and retry actions.

Read the pattern guide

Trust, accessibility, and feedback

Ask-AI object helper

Per-object AI prompts that explain fit, answer questions, compare options, and escalate to contact.

Read the pattern guide