| 1. Color & Contrast |
- Text contrast ≥ 4.5 : 1 (normal) / 3 : 1 (large)
- UI elements (buttons, icons, focus states) ≥ 3 : 1
- Do not rely on color alone for meaning (e.g., red = error).
|
|
| 2. Typography & Readability |
- Use real text (not images).
- Minimum 16 px body; 1.5 line height.
- Avoid all-caps + tight tracking.
- Ensure zoom/reflow works up to 400%.
|
|
| 3. Headings & Structure |
- Logical heading hierarchy (H1 → H2 → H3).
- One H1 per page matching page title.
- Group content with headings, not visual styling only.
|
|
| 4. Images & Non-Text Content |
- Provide descriptive alt text for meaningful images.
- Mark purely decorative images with
alt="".
- Avoid text in images unless absolutely necessary.
|
- WAVE → Alt Text tab
- Inspect via Siteimprove → Images section
|
| 5. Interactive Elements |
- Buttons and links clearly indicate purpose (“View Scholarships” not “Click here”).
- Provide hover and focus styles that meet contrast requirements.
- Ensure components look interactive (not just color change on hover).
|
|
| 6. Forms & Inputs |
- Every input has a visible label (not placeholder only).
- Group related fields (logical order, fieldsets).
- Use clear instructions and error messages in text and color.
|
- WAVE → Form Labels check
- Submit form with errors → check visible + text feedback
|
| 7. Motion, Animation & Media |
- Avoid auto-playing audio/video or background animation.
- Provide play/pause controls.
- Avoid flashing > 3 times/sec.
- Provide captions + transcripts for media.
|
|
| 8. Layout & Responsive Design |
- Content reflows on small screens + zoom (no horizontal scroll).
- Touch targets ≥ 44 × 44 px.
- Ensure consistent nav + footer across pages.
|
|
| 9. Keyboard Accessibility |
- All interactions possible with keyboard (Tab, Enter, Space).
- Focus is always visible and in logical order.
- No keyboard traps in modals or dropdowns.
|
|
| 10. Screen Reader Flow |
- Reading order matches visual order.
- Buttons, links, and forms have clear labels.
- Status messages (“Form submitted”) are announced.
|
|
| 11. Consistent Navigation & Feedback |
- Menus, headers, and footers are consistent site-wide.
- Clear indicators for current page or active state.
- Confirmations + error messages appear near action taken.
|
|
| 12. Component Design Patterns |
- Use accessible patterns for accordions, tabs, carousels, and modals.
- Each component has keyboard support and ARIA roles tested.
|
|