A webpage should make sense even when someone cannot see its colors, pictures, or layout.
What You Need to Know
An audit begins with a real page. Identify what makes it difficult to use, change one issue at a time, and test again. Clear labels, logical headings, and reachable controls usually help immediately.
In this example: correct five errors in a sample page.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<main>
<h1>Fix this contact form</h1>
<form action="/send" method="post">
<label for="contact-email">Email address</label>
<input id="contact-email" name="email" type="email" required>
<button type="submit">Send message</button>
</form>
</main>Let’s Read the Code
- <main>: The main element marks the primary page content.
- <h1>: A top-level heading explains what the page is about.
- for: For connects a label or output with a control by ID.
- id: An id uniquely identifies an element on this page.
What the example shows: This corrected version uses a visible label, proper input type, and real button.
What Happens in the Browser?
Try this with Tab and Shift+Tab. If you can, inspect the accessibility tree too; appearance alone does not tell the whole story.
Try a different way of reading. Read only the headings and labels, or navigate through links without looking at the rest of the page. If the page still makes sense, the underlying HTML is probably doing an important part of its job.
Your Turn
Create a deliberately broken version with placeholder instead of label, then repair it.
Common Beginner Mistakes
- Judging the page only by how it looks, without checking its meaning and keyboard behavior.
- Fixing missing labels does not excuse testing error handling and keyboard behavior.
Key Takeaways
- An audit begins with a real page.
- <main>: The main element marks the primary page content.
- A meaningful HTML element is usually a stronger starting point than adding an ARIA role to a generic div. Also check what happens using only the keyboard.