WCAG Basics for Developers: Keyboard, Contrast, and Semantic HTML

Apr 6, 2026 · Written by: Netspare Team

Web delivery

WCAG Basics for Developers: Keyboard, Contrast, and Semantic HTML

WCAG (Web Content Accessibility Guidelines) defines testable success criteria for perceivable, operable, understandable, and robust content. Level AA is the common regulatory and procurement target.

Accessibility overlaps with SEO (semantic structure, text alternatives) and reduces legal risk, but the primary win is users with disabilities completing real tasks without workarounds.

Keyboard navigation and focus

Every interactive control must be reachable via Tab/Shift+Tab in a logical order; modals must trap focus and restore it on close.

Visible focus rings are not optional decoration—do not `outline: none` without an equally clear replacement.

Color contrast and motion

Text contrast ratios (4.5:1 for normal text in AA) matter for low vision and bright environments—not only monochromatic users.

Respect `prefers-reduced-motion` for large animations; essential motion may still exist but should be narrowed.

Headings, labels, and ARIA

  • One h1 per view; heading levels must not skip arbitrarily—screen readers build outlines from them.
  • Every input needs an associated label; placeholder is not a label.
  • Use native elements (`button`, `a`) before reinventing with `div` + ARIA.

Practical testing workflow

Automated axe-core scans catch ~30–40% of issues; manual keyboard walkthroughs find the rest.

Include disabled users in usability tests when possible—synthetic compliance without feedback still ships friction.

Frequently asked questions

Do accessibility overlays replace remediation?
No—overlays cannot reliably fix structural problems and may interfere with assistive tech. Fix the underlying HTML/CSS/JS.
WCAG AAA for everything?
AAA targets are stricter and sometimes conflict with brand design; AA is the pragmatic baseline unless regulations demand more.

You may also like