Throughout this whole tutorial, one topic has kept coming up, even though we haven't named it yet: accessibility (often abbreviated "a11y"). Time to sum it up.

What is accessibility?

Accessibility means: building a website so it can be used by everyone - including people who, for example:

• are blind or have low vision and use a screen reader that reads the page aloud
• have motor impairments and can't use a mouse, only a keyboard
• have a cognitive impairment and find complicated, unclear structures harder to understand
• have a temporary "impairment" - for example when a phone screen is barely readable in bright sunlight, or when a broken arm means only one hand can be used

What you've already gotten right in this tutorial

The nice thing: you've been learning accessibility the whole time without realizing it, because semantic, clean HTML is almost automatically accessible. Here's an overview of what you've already done right:

• Chapter 6: heading hierarchy (h1-h6) instead of arbitrary size choices - screen reader users can jump directly between sections with this.
• Chapter 17: alt text on every image - essential for blind users.
• Chapter 28: <label> correctly connected with for/id - helps everyone who can't click precisely on a tiny box.
• Block 7: semantic structure with <nav>, <main>, etc. - screen reader users can jump straight to "the navigation" or "the main content" without having everything read aloud.

Keyboard operability: a quick test

A simple but very revealing test: set your mouse aside and try operating your website using only the Tab key (and Enter to activate). Does focus jump sensibly from link to link, from form field to form field? With clean, semantic HTML (like the kind you've built), this works automatically, without you having to do anything extra.

Good link text and alt text

Two very practical rules worth remembering for the future:

• Avoid link text like "click here" - a screen reader user who has all links on a page listed out then just hears "click here, click here, click here" with no idea where any of them go. Better: "View my favourite players" instead of "click here".
• An alt text should describe what is shown in the image and why it's relevant - not simply "image" or the file name.

<!-- Bad -->
<a href="players.html">click here</a>

<!-- Good -->
<a href="players.html">View my favourite players</a>