Web Accessibility Essentials

Build and test websites that disabled people can use, from alt text to WCAG 2.2 audits.

  • Beginner
  • 22 lessons
  • 12 hours

Start the course

Accessibility means that disabled people can perceive, understand, navigate and interact with the web. It is also a legal requirement in many jurisdictions and a mark of professional, high-quality front-end work.

This course teaches accessibility against WCAG 2.2 and the ARIA Authoring Practices Guide. It starts with the principles and the everyday essentials: alt text, headings, contrast, keyboard access and forms. It then moves on to ARIA, accessible components such as dialogs, tabs and menus, single-page apps, and finally testing and full audits.

Every lesson focuses on the accessibility angle. The HTML Complete Course and CSS Complete Course teach the underlying elements and properties, and the lessons link to them where useful.

Test as you learn. Put your mouse aside and use the keyboard, and turn on a screen reader for a few minutes after each lesson. Hearing your own pages is the fastest way to understand the barriers.

Curriculum

  1. 1 Accessibility foundations

    Who accessibility helps, how people use the web, and how WCAG 2.2 is organised.

    1. What is web accessibility, and who does it help? 6 min
    2. WCAG explained: principles and conformance levels 6 min

  2. 2 Content and structure

    Alt text, headings, landmarks and colour contrast.

    1. Writing useful alt text 6 min
    2. Headings and landmarks for screen reader navigation 6 min
    3. Colour contrast and not relying on colour alone 5 min

  3. 3 Keyboard, names and forms

    Keyboard access, visible focus, skip links, accessible names and forms people can complete.

    1. Keyboard accessibility: focus order and visible focus 6 min
    2. Skip links and focus management 7 min
    3. Accessible names: labels, aria-label and aria-labelledby 6 min
    4. Accessible forms: labels, instructions and errors 8 min

  4. 4 ARIA, testing and media

    What ARIA does, choosing the right element, testing with tools and screen readers, and accessible audio and video.

    1. Introduction to ARIA: roles, states and the first rule 7 min
    2. Links or buttons? Choosing the right element 5 min
    3. Automated accessibility testing and its limits 6 min
    4. Testing with a screen reader: NVDA and VoiceOver basics 6 min
    5. Accessible media: captions, transcripts and audio description 7 min

  5. 5 Accessible components

    Dialogs, accordions, tabs, menus, live regions, motion and single-page apps.

    1. Building an accessible modal dialog 8 min
    2. Accessible disclosures, accordions and tabs 8 min
    3. Accessible navigation menus and dropdowns 8 min
    4. Live regions: announcing dynamic changes 7 min
    5. Motion, animation and vestibular disorders 7 min
    6. Accessibility in single-page apps 8 min

  6. 6 Audits and complex widgets

    Run a full WCAG 2.2 audit and build the most demanding APG patterns.

    1. Running an accessibility audit and remediation plan 7 min
    2. Complex widgets: comboboxes, grids and accessible charts 10 min

Test yourself: Web Accessibility Essentials: final quiz

10 questions. Pass mark 70%.

  1. Question 1 of 10 To conform to WCAG 2.2 at level AA, a page must meet which success criteria?
  2. Question 2 of 10 An icon sits inside a link next to the visible text “Basket”. What should the image’s alt attribute be?
    HTML
    <a href="/basket">
  <img src="basket-icon.svg" alt="?">
  Basket
</a>
  3. Question 3 of 10 What is the minimum contrast ratio for normal-sized body text under 1.4.3 Contrast (Minimum)?
  4. Question 4 of 10 Which tabindex values should you use in real projects?

    Select all that apply.

  5. Question 5 of 10 What is the accessible name of this button?
    HTML
    <button type="button" aria-label="Close">X</button>
  6. Question 6 of 10 What does adding role="button" to a <div> do on its own?
  7. Question 7 of 10 A control opens a dialog without changing the URL. Which element should it be?
  8. Question 8 of 10 Which statements about automated accessibility testing are true?

    Select all that apply.

  9. Question 9 of 10 Which method opens a dialog element so that the rest of the page becomes inert and Escape closes it?
  10. Question 10 of 10 A search updates results without reloading the page. Which markup reliably announces the result count to screen reader users without moving focus?