Web Development · Intermediate level

Intermediate level · Module 1 of 6 · 15 guided hours

Accessible and Maintainable Front Ends

Meet core accessibility requirements and organise CSS so that sites stay consistent and easy to change.

Learning objectives

  • Apply WCAG basics: contrast, keyboard access, focus, labels and alternatives
  • Test accessibility with tools and manual checks
  • Organise CSS with naming conventions and design tokens

Topics

  • WCAG principles
  • colour contrast
  • keyboard navigation and visible focus
  • ARIA: when and when not
  • automated and manual testing
  • CSS architecture and design tokens

Lessons

  1. Lesson 1 Accessibility Principles and Checks

    Understand WCAG's principles and the most common barriers, and check pages with automated tools and manual tests.

    WCAG: perceivable, operable, understandable, robustcolour contrastkeyboard testingscreen reader basics

  2. Lesson 2 Keyboard Access, Focus and ARIA

    Make every control usable with a keyboard, keep focus visible and use ARIA only when HTML is not enough.

    tab order:focus-visibleskip linkfirst rule of ARIA

  3. Lesson 3 Maintainable CSS with Design Tokens

    Organise CSS with naming conventions, design tokens and reusable components so sites stay consistent as they grow.

    design tokenscomponent classesnaming conventions (BEM)avoiding specificity wars

Practical activity

Audit a provided website for accessibility, fix the ten most serious problems and refactor its CSS around design tokens.

Expected outcomes

  • Interfaces usable by more people
  • CSS that is consistent and easy to change

Assessment

Accessibility audit report with fixes and evidence, plus a CSS review against the agreed conventions.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.