Command Palette

Search for a command to run...

Hectal
Phase 7Advanced8 of 8 in HTML

Accessibility and Quality

Build pages everyone can use: alt text, keyboard and focus, ARIA, accessible names, testing with real tools, best practices and interview answers.

Accessibility (often shortened to a11y: an a, 11 letters, a y) means building pages that people with disabilities can perceive, understand, navigate and use. That includes people who are blind and use a screen reader, people who can't use a mouse, people with low vision, colour blindness, hearing loss, tremors or memory difficulties, and everyone having a temporary or situational problem, like a broken arm or bright sunlight on a phone.

This phase turns everything you learned so far into quality work. You'll write alt text that helps, make every control reachable and visible with the keyboard, learn what ARIA is (and why the first rule of ARIA is not to use it), see how the browser computes the accessible name of every element, and test pages with the validator, Lighthouse, axe, a screen reader and the DevTools accessibility tree.

It ends with the common HTML mistakes seniors spot in code review, and a set of HTML interview questions with model answers that pull the whole course together. Accessibility continues in the CSS course (contrast, focus styles, reduced motion) and the JavaScript course (managing focus and keyboard events).

0/8 · 0%
8 topics ~3 h 23 code blocks & diagrams
Start with the first topic
1
7.1

Why Accessibility Matters

Accessibility means people with disabilities can use your page with their own tools; WCAG is the shared rulebook, AA is the level most laws ask for, and good HTML gets you most of the way.

22 min 1 diagram 2 code practice

2
7.2

Writing Good Alt Text

Alt text is the words that replace an image for people who can't see it: describe what the image means in this place, use alt="" for decoration, and never leave alt out.

21 min 1 diagram 2 code practice

3
7.3

Keyboard and Focus

Every control must work with the keyboard alone: interactive elements are focusable in source order, tabindex 0 and -1 adjust that, a skip link jumps past repeated menus, and focus must always be visible.

27 min 1 diagram 2 code practice

4
7.4

ARIA Basics

ARIA attributes add roles, names and states to the accessibility tree when HTML has no element for the job; they change only what assistive tech hears, never behaviour, so native HTML always comes first.

27 min 3 code practice

5
7.5

Accessible Names and Forms

Every control has an accessible name that the browser computes in a fixed order (aria-labelledby, aria-label, the native label, the content, then title or placeholder); accessible forms pair that with visible labels, required and invalid states, and error messages linked by aria-describedby.

27 min 2 code practice

6
7.6

Validating and Testing HTML

Quality comes from layers of checks: the W3C validator for correct HTML, Lighthouse and axe for automatic accessibility checks, a keyboard and screen reader pass for what tools can't judge, and the DevTools accessibility tree to see what assistive tech really gets.

22 min 1 diagram 2 code practice

7
7.7

HTML Best Practices and Common Mistakes

Good HTML picks the element that matches the meaning, keeps structure and order logical, avoids deprecated and fake controls, and stays lean for speed; these are the mistakes reviewers spot first.

22 min 3 code practice

8
7.8

HTML Interview Questions

The HTML questions interviewers ask most (semantic HTML, the doctype, data attributes, async and defer, accessibility and SEO) with model answers that show the mechanism, the trade-off and a real example.

27 min 1 diagram 2 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.