Accessibility & Keyboard Navigation

8. Color and Instructions

Do not communicate errors or status using color alone. Pair color with text, an icon with an accessible name, or another clear indicator. Ensure text and controls have sufficient contrast.

9. Accessibility Testing

• Navigate the entire page with a keyboard.
• Check that form controls have accessible names.
• Inspect heading order and landmark structure.
• Test zoom and responsive layouts.
• Use an automated accessibility checker as a supplement, not a replacement, for manual testing.

Common Mistakes

• Using clickable div elements instead of native buttons or links.
• Leaving meaningful images without appropriate alt text.
• Using placeholders as the only form labels.
• Removing keyboard focus indicators.
• Using color alone to indicate an error.

Practice Exercises

1. Convert a generic page layout into semantic landmarks.
2. Add accessible labels to a registration form.
3. Write suitable alt text for an instructional diagram.
4. Navigate a website using only Tab, Shift+Tab, Enter and Space.

Revision Quiz

1. Why should semantic HTML be preferred when appropriate?
2. When is alt="" appropriate?
3. Why is placeholder text not a full replacement for a label?
4. Why should keyboard focus be visible?
5. Should errors be communicated by color alone?
6. Can an automated checker find every accessibility problem?

Answer Key and Explanations

1. It communicates structure and purpose — Browsers and assistive technologies understand semantic elements.
2. For decorative images — It prevents unnecessary announcements for images that add no information.
3. It may disappear and does not reliably replace a persistent label — A label keeps the field's purpose clear.
4. To show the current keyboard position — Users need to know which control will receive an action.
5. No. Use additional text or other clear indicators.
6. No. Automated testing must be supplemented with manual testing.