Powered byStealthAgents

Research field note

Focus Appearance Evidence for Outsourced Design Review

A standards-led review of visible keyboard focus, contrast, obscuration, component states, and test limitations.

Published by Website Design Outsource4 minute read
RESEARCH / ACCESSIBILITYA practical visual map for the work, checks, and handoff.
On this page
  1. Research question
  2. Evidence synthesis
  3. Practical interpretation
  4. Verification approach
  5. Evidence scope and limitations
  6. Sources
  7. Related Research
  8. Ready to plan your next step?

Published: September 7, 2026

Keyboard focus can technically exist while being too faint, clipped, or covered to guide a person through a page. This WebsiteDesignOutsource.com note reviews WCAG 2.2 and platform guidance relevant to outsourced component acceptance. Sources were reviewed September 7, 2026.

Research question

What evidence supports a reviewable claim that focus remains visible across website components and page states?

Evidence synthesis

WCAG 2.2 includes Focus Visible at Level AA, Focus Not Obscured at Level AA and AAA variants, and Focus Appearance at Level AAA. The criteria address distinct outcomes. W3C understanding documents explain intent and examples, while CSS specifications and browser references describe author styling mechanisms such as `:focus-visible` and outlines.

Component screenshots alone omit traversal order, sticky overlays, scroll changes, validation, and transient states. Browser defaults can be useful, but resets or theme tokens may suppress them. Custom indicators need review against adjacent colors and component shapes.

Practical interpretation

Inference: acceptance should combine systematic keyboard traversal with state and viewport coverage. Teams should document which criterion and conformance level they are evaluating rather than using a vague "focus compliant" label.

Verification approach

  • Traverse every operable element in a meaningful task order.
  • Check default, selected, expanded, invalid, disabled, and modal states.
  • Test sticky headers, cookie layers, drawers, and virtual keyboards.
  • Inspect indicators in light, dark, image, and high-contrast contexts.
  • Repeat at zoom and narrow widths without using a pointer.
  • Record browser, operating system, input, build, and observed exception.

Evidence scope and limitations

This synthesis does not certify WCAG conformance or cover every assistive technology. Focus visibility is only one keyboard concern; operation, order, semantics, target size, and error recovery require separate evidence.

Sources

  1. WCAG 2.2 Normative accessibility recommendation.
  2. Understanding Focus Visible Level AA criterion guidance.
  3. Understanding Focus Not Obscured Minimum Level AA obscuration guidance.
  4. Understanding Focus Not Obscured Enhanced Level AAA obscuration guidance.
  5. Understanding Focus Appearance Level AAA appearance guidance.
  6. WAI Keyboard Compatibility Keyboard operation context.
  7. Selectors Level 4 focus-visible CSS selector definition.
  8. CSS UI Outline Properties CSS outline specification.
  9. MDN focus-visible Browser implementation reference.
  10. WAI-ARIA Authoring Practices Composite-widget keyboard guidance.

Sticky interface focus obscuration

Target size accessibility research

Ready to plan your next step?

Contact WebsiteDesignOutsource.com

Turn the guidance into a reviewable handoff

Record the owner, input, acceptance condition, evidence, and escalation point before production begins. That small contract makes the work easier to inspect and approve.

Plan a website production handoff

Start with a real brief

Move one website project from backlog to a reviewed handoff.

Share the pages, platform, current assets, deadline, and approval owner. We will help determine the right production lane and the decisions your team should keep.

Plan the handoff