Skip to main content
Himanshu Chandola
/blogs

Implementing Web Interface Guidelines: A Developer's Accessibility Checklist

|2 min read

The Web Interface Guidelines by Vercel are a comprehensive checklist for building accessible, polished web interfaces. After implementing these guidelines across my portfolio, I wanted to share the practical lessons learned.

What Are Web Interface Guidelines?

The Web Interface Guidelines are a set of rules covering accessibility, focus states, forms, animations, typography, and more. Think of it as a quality checklist for modern web development.

Key Areas I Fixed

1. Focus States

The Problem: Using outline-none without providing an alternative focus indicator.

/* ❌ Bad - removes focus with no replacement */
.link { outline: none; }

/* ✅ Good - visible focus for keyboard users */
.link { 
  outline: none;
}
.link:focus-visible {
  ring: 2px solid var(--primary);
}
💡

Use :focus-visible instead of :focus — it only shows the ring for keyboard navigation, not mouse clicks.

2. Form Accessibility

Every input needs a label. Even if you're using placeholders for a minimal design, add a screen-reader-only label:

<label className="sr-only" htmlFor="email">Email</label>
<input 
  id="email"
  name="email"
  type="email"
  placeholder="your email…"
/>

3. Typography Details

Small things that matter:

| Before | After | |--------|-------| | loading... | loading… | | "quoted text" | "quoted text" | | 10 MB | 10 MB (with non-breaking space) |

The ellipsis character (…) is a single glyph, not three periods.

4. Reduced Motion

Some users experience motion sickness from animations. Respect their preference:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

5. Dark Mode Scrollbars

Add color-scheme: dark to your HTML element for proper scrollbar styling:

<html lang="en" style={{ colorScheme: "dark" }}>

6. Decorative Icons

Icons that don't convey meaning should be hidden from screen readers:

<SpotifyIcon aria-hidden="true" />
<span className="sr-only">Spotify</span>

The Checklist

Here's my condensed checklist for new projects:

  • [ ] Every interactive element has visible :focus-visible styles
  • [ ] Form inputs have associated labels (visible or sr-only)
  • [ ] Decorative icons have aria-hidden="true"
  • [ ] Animations respect prefers-reduced-motion
  • [ ] Typography uses proper ellipsis and curly quotes
  • [ ] Dark mode has color-scheme: dark on <html>
  • [ ] Skip-to-content link for keyboard users
  • [ ] transition: all replaced with explicit properties

Impact

These changes aren't glamorous, but they matter:

  • Accessibility: Screen reader users can navigate your site
  • Keyboard users: Can see where they are on the page
  • Motion-sensitive users: Won't experience discomfort
  • Professionalism: Shows attention to detail

The best part? Most of these are one-time fixes that improve every page on your site.

Resources