Website accessibility basics: make your site usable for everyone
Accessibility is not charity. It is better design that helps every visitor, improves your SEO, and keeps you out of legal trouble.
What accessibility means and why it matters
Web accessibility means building websites that work for people with disabilities, including those who use screen readers, navigate by keyboard, or have low vision. But the benefits go far beyond compliance.
Alt text for images
Alt text is the text that describes an image when it cannot be displayed or when a screen reader encounters it. Every meaningful image on your site needs alt text.
| Image type | Bad alt text | Good alt text |
|---|---|---|
| Team photo | "image1.jpg" | "Studio Web team working at desks in the downtown office" |
| Product shot | "photo" | "Blue ceramic mug with white handle on a wooden table" |
| Decorative divider | "line decoration" | alt="" (empty, so screen readers skip it) |
- Describe what the image shows, not what it is ("team meeting" not "photograph").
- Keep alt text under 125 characters so screen readers do not cut it off.
- Use empty alt (alt="") for purely decorative images like background patterns.
- Never start with "Image of" or "Picture of" because screen readers already announce it as an image.
Color contrast ratios
If your text blends into the background, it is unreadable for people with low vision and annoying for everyone else. WCAG requires specific contrast ratios between text and background colors.
Needs at least a 4.5:1 contrast ratio. Light gray text on a white background almost never passes.
Needs at least a 3:1 contrast ratio. Headers get a bit more flexibility, but dark on light is still safest.
Keyboard navigation
Many users navigate entirely with a keyboard: Tab to move between elements, Enter to activate links and buttons, Escape to close modals. If your site breaks with keyboard-only navigation, those users are locked out.
- Press Tab through your entire page. Every interactive element should receive a visible focus outline.
- Make sure the tab order follows the visual layout (left to right, top to bottom).
- Ensure dropdown menus and modals can be opened and closed with the keyboard.
- Never remove the focus outline with CSS (outline: none) unless you replace it with an equally visible style.
- Add skip-to-content links so keyboard users can bypass the navigation on every page.
When a modal is open, Tab should cycle only within the modal, not behind it. This prevents users from getting lost in invisible content.
If something looks clickable, it must be a button or link in the HTML. A div with an onclick handler is invisible to keyboards and screen readers.
Form labels and error messages
Forms are where accessibility failures cost you the most, because that is exactly where conversions happen. An inaccessible form means lost leads.
ARIA basics: when HTML is not enough
ARIA (Accessible Rich Internet Applications) attributes add extra meaning to elements that HTML alone cannot communicate. But the first rule of ARIA is: do not use ARIA if native HTML can do the job.
Gives an accessible name to an element that has no visible text, like an icon-only button. Example: aria-label="Close menu".
Hides decorative elements from screen readers. Use on icons that duplicate visible text.
Tells screen readers that a div is acting as a navigation landmark. Better yet, just use the native nav element.
Announces dynamic content changes (like form success messages) to screen readers without interrupting them.
Free testing tools to audit your site
You do not need to hire a consultant to find the biggest accessibility issues. These free tools catch the majority of problems in minutes.
Browser extension that overlays accessibility errors directly on your page. Start here for a visual audit.
Chrome extension that runs in DevTools and gives detailed, developer-friendly results with fix suggestions.