Guided Project
Rotto Rocks
A capstone-style tourism website build that brings together HTML, CSS, responsive design, accessibility, SEO, and deployment planning.
View ProjectAccessibility Essentials
Build practical accessibility habits with semantic HTML, alt text, keyboard testing, forms, contrast, ARIA, and repeatable audits.
How to use this section
Work through these lessons in order after core HTML and CSS fundamentals. The series teaches accessibility as ordinary web craft: structure, content, interaction, design, and testing, with WCAG 2.2 principles as the practical reference point.
Projects in this section
Use these guided, reference, and practice projects to connect the lessons to real site work.
Lessons in this section
Accessibility Is Not an Add-On
Learn what web accessibility means, why it belongs at the start of the development process, and how the WCAG POUR principles help you spot common barriers before they become expensive rebuilds.
Start tutorial →Semantic HTML: The First Accessibility Tool
Learn how native HTML elements give pages meaning before CSS, JavaScript, or ARIA enter the room.
Start tutorial →Images, Alt Text, and Meaning
Learn how to write useful text alternatives by asking what an image is doing on the page.
Start tutorial →Keyboard Navigation and Focus States
Learn how to make pages usable without a mouse by testing keyboard navigation, fixing focus styles, and avoiding keyboard traps.
Start tutorial →Accessible Forms
Learn how labels, instructions, field grouping, and error messages make forms easier to complete.
Start tutorial →Colour, Contrast, and Readability
Learn how colour, contrast, spacing, text size, and states affect whether people can comfortably read and use a page.
Start tutorial →ARIA: Use With Care
Learn what ARIA is, when it helps, and why native HTML should be your first choice.
Start tutorial →Testing Accessibility as You Build
Learn a practical accessibility testing workflow that combines manual checks, browser tools, and automated tools.
Start tutorial →