Accessible by default

01Start with native controls

Buttons already support keyboard activation. Links already support navigation. A clickable div does not get these behaviors automatically.

<button type="button">Show details</button>
<a href="services.html">Explore services</a>

02Keep focus visible

Tab through your page. Every interactive element should show a visible focus indicator. Do not remove outlines without replacing them with something equally clear.

a:focus-visible, button:focus-visible {
  outline: 3px solid #2f5bea;
  outline-offset: 4px;
}

03Check the whole experience

Use meaningful headings, readable contrast, useful alt text and clear labels. Do not rely on color alone. Test keyboard access and zoom, and respect reduced-motion preferences.

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animated-card { animation: none; }
}

04Try it yourself

Use Tab and Enter to open the details. Notice the visible focus indicator.

Further reading

Use the MDN learning guides and HTML Living Standard for deeper explanations and current browser guidance.