HTML Web Content Accessibility Guidelines and HTML Semantics

Good accessibility usually starts with clear words and the right HTML elements, not a large amount of extra code.

What You Need to Know

Accessibility guidance covers perceivable content, operable controls, understandable interactions, and robust markup. Semantic HTML supports those goals, but good accessibility also depends on CSS, JavaScript, and real testing.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<main>
    <h1>Lesson outline</h1>
    <section aria-labelledby="first-step">
        <h2 id="first-step">Step one</h2>
        <p>Read the instructions before starting.</p>
    </section>
</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.
aria-labelledby: Aria-labelledby uses the text of another element as the accessible name.
id: An id uniquely identifies an element on this page.

What the example shows: WCAG describes outcomes for accessibility; semantic HTML gives you a strong foundation for many of them.

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.

What does assistive technology receive? The example includes aria-labelledby. These relationships can explain names, states, or descriptions when used correctly. They do not automatically move focus, listen for clicks, or create keyboard handling.

Your Turn

Choose one accessibility criterion and explain how this markup helps, and what still needs testing.

Common Beginner Mistakes

Judging the page only by how it looks, without checking its meaning and keyboard behavior.
Correct tags alone do not guarantee sufficient contrast, reflow, or understandable interactions.

Key Takeaways

Accessibility guidance covers perceivable content, operable controls, understandable interactions, and robust markup.
<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.