Accessibility Basics

Landmarks, alt text, labels, focus order and ARIA.

Video tutorialTrack course · freeCodeCamp

HTML Full Course for Beginners

Speed

0.75x1x1.25x1.5x2x

Skip intro Next lesson

Watch 00:00 · 1 checkpoints Watch on YouTube More on this topic

Transcript & captions .txt

7/7

1. 00:00Accessibility Basics. Landmarks, alt text, labels, focus order and ARIA.
2. 00:05Use real buttons and links, not clickable divs — they come with keyboard support for free.
3. 00:11Keep a logical heading order so screen reader users can scan the page.
4. 00:16Label every form field.
5. 00:21Never remove the focus outline without replacing it with a visible one.
6. 00:26Use ARIA only when no native element does the job.
7. 00:31Try it yourself — edit the sample and run it in the browser.

• Use real buttons and links, not clickable divs — they come with keyboard support for free.
• Keep a logical heading order so screen reader users can scan the page.
• Label every form field.
• Never remove the focus outline without replacing it with a visible one.
• Use ARIA only when no native element does the job.