Meaningful, accessible pages
Making pages that everybody and every machine can understand: semantic regions, accessibility practices, embedded media, and how pages appear in search and sharing.
About 6 hours of study
Learning objectives
- Divide a page into landmarks
- Make a page usable without a mouse
- Prepare a page to be found and shared
Lessons
- 1
Semantic HTML: elements that mean something
Replace a page of anonymous divs with header, nav, main, section, article, aside and footer, and see what each one gives you for free.
- 2
Accessibility: pages that work for everyone Intermediate
Who uses the web differently, the rules that help them most, skip links, focus, and how ARIA fits in, along with when to leave it out.
- 3
Audio, video and embedded pages Intermediate
Add video and audio with fallbacks and captions, embed another page with iframe, and keep embeds from harming your visitors.
- 4
The head: titles, search results and sharing Intermediate
How titles, descriptions, canonical links, Open Graph tags and icons decide how your page appears in search results and when it is shared.
Module practice
- Replace divs with landmarksEasy
- Structure a blog postMedium
- Rebuild a page of fakesHard
- Three quick accessibility fixesEasy
- Add a skip linkMedium
- Audit an inaccessible pageHard
- Add a playable audio fileEasy
- A video that everyone can followMedium
- Embed a page safelyHard
- Write a title and a descriptionEasy
- Make a link look good when sharedMedium
- Write a complete head from nothingHard