⌨️ How to Test Keyboard Accessibility

What to do:

1. Put your mouse aside — don't touch it
2. Press the Tab key repeatedly
3. Navigate through your entire website
4. Press Enter to activate buttons and links
5. Press Spacebar to toggle checkboxes
6. Press Escape (Esc) to close modals or menus

What to check:

• ✅ Can you see a visible focus indicator (blue outline) around the focused element?
• ✅ Does focus move in a logical order (top to bottom, left to right)?
• ✅ Can you reach all interactive elements (links, buttons, forms)?
• ✅ Do you get stuck anywhere (keyboard trap)?

Pass/Fail: If you can navigate the entire site and reach everything — ✅ PASS. If not — ❌ FAIL.

📢 How to Test with a Screen Reader

Free screen readers you can use:

• Windows: NVDA (free download) or Narrator (built-in)
• Mac: VoiceOver (built-in — press Cmd + F5)
• Chrome: ChromeVox extension (free)

What to test:

• ✅ Do images have meaningful alt text?
• ✅ Do buttons say what they do?
• ✅ Are headings read in logical order (H1, H2, H3)?
• ✅ Can you fill out and submit a form?

Quick tip: Turn down your volume first — screen readers can be loud!

🎨 How to Test Color Contrast

Manual method:

1. Look at your text and background colors
2. Is light gray text on white background hard to read?
3. Is red text on a dark background hard to see?

Better method — use a free tool:

Use AccessiTool's color contrast checker to get exact ratio numbers.

WCAG requirements:

• ✅ Normal text: 4.5:1 ratio minimum
• ✅ Large text (18pt+): 3:1 ratio minimum
• ✅ Non-text (icons, buttons): 3:1 ratio minimum

🖼️ How to Test Alt Text

What to do:

1. Right-click on any image
2. Select "Inspect" or "Inspect Element"
3. Look for the alt attribute in the HTML
4. Does it have a description? Or is it empty (alt="")?

What good alt text looks like:

• ✅ alt="Red leather sofa on sale for $499" (descriptive)
• ✅ alt="" (for decorative images only)

What bad alt text looks like:

• ❌ alt="image" or alt="12345" (meaningless)
• ❌ No alt attribute at all

📝 How to Test Form Accessibility

What to do:

1. Find a contact form, search box, or checkout form
2. Click inside the first field
3. Does a visible label tell you what to enter?
4. Try navigating with the Tab key — does focus go to each field?

What to check:

• ✅ Every field has a visible label ("Name", "Email", "Message")
• ✅ Required fields are clearly marked (with asterisk * or text)
• ✅ Error messages are clear and helpful

📚 How to Test Heading Hierarchy

What to do:

1. Look at your page's headings
2. Does the title use H1? (should be only one per page)
3. Are main sections using H2?
4. Are subsections using H3?
5. Are any heading levels skipped (H1 → H3 without H2)?

Good heading structure example:

<h1>Main Page Title</h1>
  <h2>Section 1</h2>
    <h3>Subsection 1.1</h3>
    <h3>Subsection 1.2</h3>
  <h2>Section 2</h2>
    <h3>Subsection 2.1</h3>