HTML Accessibility Testing: Keyboard, Inspector, and Screen Reader

Not everyone uses a mouse to explore a website. Good HTML must also make sense through a keyboard or screen reader.

What You Need to Know

Accessibility checks are not just a score from an automated scanner. Navigate by keyboard, inspect names and relationships, and try a screen reader. Each method catches problems the others may miss.

In this example: test a navigation form for keyboard behavior.

Try the Example

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

<main>
    <h1>Contact us</h1>
    <form action="/contact" method="post">
        <label for="visitor-email">Email</label>
        <input id="visitor-email" name="email" type="email" required>
        <button type="submit">Send</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: Testing is a sequence: inspect the markup, use a keyboard, check labels, and try a screen reader if possible.

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.

A quick keyboard check: Press Tab to move forward, Shift+Tab to go back, and Enter or Space to activate controls when appropriate. Watch where focus goes. If you cannot tell which control is active, the interface needs improvement.

Your Turn

Move through the example without a mouse. Read each control name and current state aloud as if describing it to a friend.

Common Beginner Mistakes

Judging the page only by how it looks, without checking its meaning and keyboard behavior.
An audit score alone does not prove that the form is understandable.

Key Takeaways

Accessibility checks are not just a score from an automated scanner.
<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.