Simple Idea: Accessibility means making your webpage usable by as many people as possible, including people who use keyboards, screen readers, magnification tools, or other assistive technologies.

1. Accessibility at a Glance

Accessible HTML

Semantic
HTML

→

Labels &
Text

→

Keyboard
Access

→

Better
Accessibility

2. Why is Accessibility Important?

Not every user interacts with a webpage in the same way. Some users may use a keyboard instead of a mouse, while others may rely on screen readers or other assistive technologies.

Accessible HTML makes the structure and purpose of content clearer, which improves usability for a wider range of users.

3. Use Semantic HTML

Semantic elements describe the purpose of content. They are usually a better choice than using generic <div> elements everywhere.

<header>
    Website Header
</header>

<nav>
    Navigation
</nav>

<main>
    Main Content
</main>

<footer>
    Footer
</footer>

This gives the document a meaningful structure that can be understood more easily by users and assistive technologies.

4. Use Proper Headings

Headings organize content into a logical hierarchy. Use headings to describe topics rather than simply making text look large.

<h1>HTML Tutorial</h1>

<h2>HTML Basics</h2>

<h3>HTML Elements</h3>

<h3>HTML Attributes</h3>

<h2>HTML Forms</h2>

A clear heading structure helps users understand the organization of the page.

5. Use Labels with Form Controls

Form fields should have clear labels so users know what information they are expected to enter.

<label for="email">
    Email Address
</label>

<input
    type="email"
    id="email"
    name="email">

The label's for attribute should match the input's id.

6. Provide Alternative Text for Images

The alt attribute provides a text alternative for an image.

<img
    src="html-course.jpg"
    alt="HTML course lesson">

The alternative text should describe the image when the image communicates meaningful information.

Decorative Images

If an image is purely decorative and adds no useful information, an empty alternative text can be appropriate:

<img
    src="decoration.png"
    alt="">

7. Use Descriptive Link Text

Link text should give users an idea of where the link will take them.

Prefer:

<a href="/html-forms">
    Learn HTML Forms
</a>

Instead of:

<a href="/html-forms">
    Click Here
</a>

8. Keyboard Accessibility

Users should be able to navigate important interactive controls using the keyboard.

Native HTML elements such as buttons, links, form controls, and form inputs already provide standard keyboard behavior.

<button type="button">
    Open Menu
</button>

Best Practice: Prefer native HTML controls before creating custom interactive elements with JavaScript.

9. Button vs Div for Actions

A common accessibility mistake is using a generic element for something that should behave like a button.

Prefer:

<button type="button">
    Save
</button>

A real button provides built-in semantics and keyboard behavior.

10. Language of the Document

The lang attribute identifies the primary language of the page.

<html lang="en">

This information can help browsers and assistive technologies process the content correctly.

11. Accessible Tables

Tables should be used for tabular data, not simply for page layout. Header cells should clearly identify the data they describe.

<table>

    <tr>
        <th>Course</th>
        <th>Duration</th>
    </tr>

    <tr>
        <td>HTML</td>
        <td>2 Months</td>
    </tr>

</table>

12. Accessible Navigation

Use the semantic <nav> element for important navigation areas.

<nav aria-label="Main Navigation">

    <a href="/">
        Home
    </a>

    <a href="/courses">
        Courses
    </a>

    <a href="/contact">
        Contact
    </a>

</nav>

When there are multiple navigation areas, descriptive labels can help distinguish them.

13. ARIA Basics

ARIA provides additional accessibility information when native HTML semantics do not fully describe a custom interface.

<button
    aria-label="Close menu">

    X

</button>

Important: Native HTML should usually be your first choice. Use ARIA when additional semantic information is actually needed.

14. aria-label

The aria-label attribute gives an accessible name to an element when a visible text label is not sufficient.

<button
    aria-label="Search">

    🔍

</button>

15. Hidden Content and Accessibility

The hidden attribute tells the browser that an element is not currently relevant for display.

<p hidden>
    Additional content
</p>

Do not hide important information simply to make a page look cleaner. Hidden content should have a real functional reason.

16. Focus and tabindex

Keyboard users need a predictable focus order. Native interactive elements normally participate in keyboard navigation without requiring custom tabindex values.

<button tabindex="0">
    Submit
</button>

Use custom tabindex values carefully because unnecessary changes can make keyboard navigation confusing.

17. Accessible Forms

A good accessible form should provide clear labels, appropriate input types, useful instructions, and understandable validation messages.

<form>

    <label for="name">
        Full Name
    </label>

    <input
        type="text"
        id="name"
        name="name"
        required>

    <label for="email">
        Email
    </label>

    <input
        type="email"
        id="email"
        name="email"
        required>

    <button type="submit">
        Register
    </button>

</form>

18. Accessibility and Color

Important information should not be communicated through color alone.

For example, instead of using only red to indicate an error, provide text or another clear indicator as well.

Error: Please enter a valid email address.

19. Accessibility Checklist

Area	Check
Structure	Use semantic HTML elements.
Headings	Use a logical heading hierarchy.
Images	Provide appropriate alt text.
Forms	Use labels and meaningful controls.
Navigation	Use descriptive link text.
Keyboard	Ensure important controls can be reached by keyboard.
Language	Set the correct document language.
Color	Do not use color as the only way to communicate meaning.

20. Common Mistakes

Mistake 1: Using div instead of semantic controls

Do not create custom buttons from generic elements when a native <button> can perform the task.

Mistake 2: Missing image alt text

Meaningful images should have appropriate alternative text.

Mistake 3: Missing form labels

Users should be able to understand what each input field is for.

Mistake 4: Poor heading structure

Headings should organize the content logically instead of being chosen only for their visual size.

21. Best Practices

Start with semantic HTML.
Use native interactive elements wherever possible.
Provide meaningful labels and alternative text.
Keep keyboard navigation logical.
Use ARIA only when necessary.
Do not communicate important information through color alone.
Test pages using keyboard navigation and accessibility tools.

22. Practice Example

Create a simple accessible course page containing a heading, navigation, image, form, and semantic main content.

<html lang="en">

<body>

    <header>

        <h1>
            HTML Course
        </h1>

    </header>

    <nav aria-label="Main Navigation">

        <a href="#">
            Home
        </a>

        <a href="#">
            Courses
        </a>

    </nav>

    <main>

        <section>

            <h2>
                Registration
            </h2>

            <form>

                <label for="email">
                    Email
                </label>

                <input
                    type="email"
                    id="email"
                    name="email"
                    required>

                <button type="submit">
                    Register
                </button>

            </form>

        </section>

    </main>

</body>

</html>

Summary

HTML accessibility means creating webpages that can be used by people with different abilities and assistive technologies. The strongest foundation is semantic HTML, proper headings, meaningful labels, useful image alternative text, descriptive links, keyboard-friendly controls, and clear page structure. Use native HTML whenever possible and add ARIA only when additional accessibility information is needed.

← Previous: Viewport Next: ARIA Basics →