Originally published at AccessibleWeb Guide.
You have heard the word "accessibility" enough times to know it matters. Maybe a customer complained they could not use your checkout. Maybe your lawyer mentioned something about compliance. Maybe you just want to do the right thing.
This guide is different. You do not need to install anything. You do not need to read a line of code. All you need is a browser and five minutes.
Why a Quick Audit Matters
A full accessibility audit can take days and cost thousands of dollars. A five-minute check catches the big-ticket problems before you invest in a comprehensive review. Think of it like a smoke detector -- it does not replace a full fire inspection, but it tells you if the house is on fire right now.
Step 1: The Tab Test (60 Seconds)
Put your mouse aside. Click somewhere on the page, then press the Tab key repeatedly.
Watch for:
- Can you see where you are? A visible outline should appear around each focused element.
- Does it follow a logical order (top to bottom, left to right)?
- Can you reach everything -- navigation, search, buttons, forms?
- Can you escape dropdowns and popups with Escape?
If you get stuck and cannot move forward or backward, that is called a keyboard trap -- one of the most serious accessibility failures.
Step 2: The Zoom Test (60 Seconds)
Hold Ctrl/Cmd and press + until your browser reaches 200% zoom.
Watch for:
- Text getting cut off or disappearing behind images
- Buttons and links overlapping each other
- Navigation breaking apart
- Excessive horizontal scrolling
Reset zoom with Ctrl/Cmd + 0.
Step 3: The Image Check (60 Seconds)
Right-click any important image and select Inspect. Look for alt="something" in the code.
Watch for:
- Missing alt text (
alt=""or no alt attribute) - Meaningless alt text ("image1.jpg" or "photo")
- Product images without descriptions
Check 3-5 images. If most are missing meaningful alt text, the rest of the site probably has the same problem.
Step 4: The Heading Structure Check (60 Seconds)
Screen reader users navigate by jumping between headings, like sighted users scan bold text. In Chrome, press Ctrl+Shift+J and type:
document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(h => console.log(h.tagName, h.textContent.trim()))
Watch for:
- Exactly one H1 per page
- Headings in order (H1 > H2 > H3, no skipping levels)
- Meaningful heading text (not "Section 2" or "Content")
Step 5: The Screen Reader Quick Test (60 Seconds)
Every OS has a free screen reader:
- Mac: Cmd+F5 (VoiceOver)
- Windows: Windows+Ctrl+Enter (Narrator)
Close your eyes and try one simple task -- like finding your phone number. If you cannot, imagine doing this every day.
Prioritize Your Fixes
Fix first: Keyboard traps, missing focus indicators, missing alt text on key images
Fix soon: Heading structure, zoom breakage
Fix when you can: Tab order quirks, decorative images without empty alt
Most Fixes Do Not Require Code
- Alt text -- Add through your CMS media manager (WordPress, Shopify, Squarespace)
- Headings -- Use actual heading levels in your editor, not just bold text
- Keyboard issues -- Note the specific problem and share with your developer
Run this check every time you publish a new page or update your theme. Accessibility is an ongoing practice.
We are building a simple accessibility checker for non-developers -- no DevTools, no jargon. Join our waitlist for early access.
Top comments (0)