Accessibility Basics That Earn Keep in Production

Accessibility work has a reputation as a compliance burden. In production, it is more often the cheapest usability improvement I can make. The first ninety percent of benefit comes from four basics. Every time I skip them, I pay later.

The Four That Matter Most

Semantic HTML. button for buttons, a for links, form for forms, heading tags in order. Screen readers, keyboard users, and search engines all rely on this. It is the single highest-leverage investment in an accessible page.

Visible focus states. Every interactive element must show a focus ring when tabbed to. Users on keyboards cannot navigate a page where outline: none was used without a replacement. Tailwind makes this trivial with focus:ring-2 focus:ring-blue-500.

Descriptive link text. 'Click here' and 'read more' make link lists useless for screen reader users who skim links out of context. Every link should state its destination. 'Read the Next.js caching guide' beats 'read more'.

Alt text for informative images. Decorative images get alt="". Informative images get a concrete description. No guessing: if the image conveys information the page would miss without it, describe that information.

A Simple Audit

1. Tab through the page with keyboard only.
   - Can I reach every interactive element?
   - Can I see where I am at all times?
2. Run Lighthouse accessibility audit.
   - Fix all errors, not just warnings.
3. Read the page with a screen reader for 2 minutes.
   - Does it make sense without the visuals?

Fifteen minutes per page. Catches the ninety percent. I do this for every new template before it ships, not as a phase at the end.

What Lighthouse Misses

Automated audits catch the structural stuff. They cannot catch unclear link text, confusing heading order, or color meaning used without a text label. Manual review remains necessary for the parts a machine cannot judge. The Web Content Accessibility Guidelines are the reference when I need to resolve a tie.

The Business Case

Accessibility basics help every user, not just the ones with disabilities. Keyboard nav is faster for power users. Descriptive link text helps SEO. Alt text improves image search. The return compounds across audiences.

Ship the four basics on every page. That is the floor, not the ceiling.

The Next Four to Add

Once the basics are stable, the next tier is form labels associated via for/id, error messages that are programmatically associated with their inputs, skip-to-content links at the top of every page, and live regions for dynamic content updates. Each adds another population of users to the pool of people who can use the site well. None are hard. All are forgettable if you do not keep a checklist. My template scaffolds include them by default so I never start from zero.