Accessibility Basics
Build pages everyone can use — including people who cannot see the screen or use a mouse.
What you will learn
- Understand who relies on accessible pages
- Apply the core accessibility wins you already know
- Add labels and meaningful structure
Who is this for?
About 1 in 6 people lives with some disability. Many browse using a screen reader (software that reads the page aloud) or only a keyboard. Accessible HTML lets them use your site — and you already know most of it.
The wins you already have
- Meaningful
alttext on every image. - A real
<label>for every form field. - Headings in proper order (
<h1>then<h2>...). - Semantic tags (
<nav>,<main>,<footer>) so users can jump around. - Descriptive link text — say “Read the syllabus”, not “click here”.
<!-- Hard for a screen reader -->
<a href="syllabus.html">click here</a>
<!-- Clear and accessible -->
<a href="syllabus.html">Read the HTML syllabus</a>Both links go to the same page — only the clickable words differ. A screen-reader user often jumps from link to link hearing just the link text; “click here” tells them nothing, while “Read the HTML syllabus” explains exactly where it leads. Always put the meaning in the link text.
Note: There is a whole system called ARIA for advanced cases, but the golden rule comes first: use the correct HTML element for the job. A real <button> beats a <div> pretending to be a button every time.
Tip: Test it yourself: try to fill one of your forms using only the Tab key (no mouse). If you can reach and complete every field, you are off to a great start.
Q. Which link text is the most accessible?
✍️ Practice
- Audit a page: does every image have good
alt? Does every input have a<label>? Fix what is missing. - Rewrite three vague “click here” links to have descriptive text.
🏠 Homework
- Navigate one of your pages using only the keyboard (Tab and Enter). Note anything you cannot reach.