Training Trains Internship
Student login
← Tailwind CSS & Bootstrap learning path
Tailwind CSS & Bootstrap · Module 9 of 10

Accessibility and UI quality

Build accessible, consistent interfaces with either framework.

📖 Key ideas

  1. Use semantic HTML: button, nav, main, label.
  2. Ensure colour contrast (WCAG AA 4.5:1 for normal text).
  3. Visible focus styles for keyboard users.
  4. Add alt text and aria-labels for icon buttons.
  5. Test with keyboard only and a screen reader.
💡 Real-life example: Accessibility is building ramps along with stairs: everyone can enter.
WCAGWeb accessibility guidelines
Contrast ratioDifference between text and background
aria-labelAccessible name for elements
Semantic HTMLElements that describe meaning