Web foundations lab

Accessibility

Landmarks, names, keyboard flow, focus, alternatives, and contrast habits.

Track progress 0/120 lessons 0/18 missions 12 courses
0%
Continue View profile
01 Accessibility Accessibility: Accessible names

Build accessible names inside the persistent Learning journal: Accessible names starter project.

Admin 7 minutes · alt, aria-label, role, focus, contrast
02 Accessibility Accessibility: Image alternatives

Build image alternatives inside the persistent Product changelog: Image alternatives starter project.

Admin 7 minutes · alt, aria-label, role, focus, contrast
03 Accessibility Accessibility: Landmark labels

Build landmark labels inside the persistent Workshop signup: Landmark labels starter project.

Admin 7 minutes · alt, aria-label, role, focus, contrast
04 Accessibility Accessibility: Keyboard order

Build keyboard order inside the persistent Incident summary: Keyboard order starter project.

Admin Checkpoint 10 minutes · alt, aria-label, role, focus, contrast
05 Accessibility Accessibility: Visible focus

Build visible focus inside the persistent Community workshop: Visible focus starter project.

Admin 7 minutes · alt, aria-label, role, focus, contrast
06 Accessibility Accessibility: Status announcements

Build status announcements inside the persistent Neighborhood library: Status announcements starter project.

Admin 7 minutes · alt, aria-label, role, focus, contrast
07 Accessibility Accessibility: Heading structure

Build heading structure inside the persistent Volunteer check-in: Heading structure starter project.

Admin 7 minutes · alt, aria-label, role, focus, contrast
08 Accessibility Accessibility: Accessibility checkpoint

Build accessibility checkpoint inside the persistent Local event guide: Accessibility checkpoint starter project.

Admin 10 minutes · alt, aria-label, role, focus, contrast
Snippet coverage

Patterns you will practice here.

Run

Render a simulated preview from the current lesson snippet.

Check

Save the lesson after the required task snippets are complete.

Hint

Show the lesson hint without changing progress.

Reset

Clear local Web lab scratch state for this browser.

<!doctype html>

Start an HTML document with an explicit standards-mode marker.

<header> <main> <section> <footer>

Use semantic landmarks so pages have structure.