Accessibility by example

The bad

Source code

<div class="BadMenu">
    <a class="BadMenu__item" href="/">
        Home
    </a>
    <a class="BadMenu__item" href="#" data-hook="toggleBadExamples">
        Examples ▼
    </a>
    <a class="BadMenu__item" href="/about.html">
        About
    </a>
</div>

<div class="BadSubMenu" data-hook="badSubMenu">
    <a href="#">Example 1</a>
    <a href="#">Example 2</a>
</div>

<style>
    .BadMenu {
        display: flex;
        width: 100%;
        justify-content: space-around;
    }

    .BadMenu__item {
        cursor: pointer;
        text-decoration: none;
        color: black;
    }

    .BadMenu__item:hover,
    .BadMenu__item:focus {
        text-decoration: underline;
    }

    .BadSubMenu {
        display: flex;
        flex-direction: column;
        border: 1px solid gray;
        margin: 10px 0;
        padding: 10px;
    }

    .BadSubMenu:not(.is-open) {
        overflow: hidden;
        height: 0;
        margin: 0;
        padding: 0;
        border: none;
    }
</style>

<script>
    const toggleBadExamples = document.querySelector('[data-hook="toggleBadExamples"]');
    const badSubMenu = document.querySelector('[data-hook="badSubMenu"]');

    toggleBadExamples.addEventListener('click', () => {
        badSubMenu.classList.toggle('is-open');
    });
</script>

What's wrong with this?

The menu doesn't have a navigation role.
There is no semantic coherence between the menu items.
The submenu toggle is an <a>, but should be a <button>.
Voice Over reads the toggle button's icon aloud.
The next focus after opening the submenu is not inside it.
The submenu gets focus even when it's closed.

The good

Show solution

Source code

<nav class="GoodMenu" aria-label="Main navigation">
    <ul class="GoodMenu__items">
        <li class="GoodMenu__item">
            <a class="GoodMenu__link" href="/">
                Home
            </a>
        </li>
        
        <li class="GoodMenu__item">
            <button class="GoodMenu__toggle" data-hook="toggleGoodExamples" aria-expanded="false">
                Examples <span aria-hidden="true">▼</span>
            </button>
            
            <ul class="GoodSubMenu" data-hook="goodSubMenu">
                <li class="GoodMenu__item">
                    <a class="GoodMenu__link" href="#">Example 1</a>
                </li>
                <li class="GoodMenu__item">
                    <a class="GoodMenu__link" href="#">Example 2</a>
                </li>
            </ul>
        </li>
        
        <li class="GoodMenu__item">
            <a class="GoodMenu__link" href="/about.html">
                About
            </a>
        </li>
    </ul>


<style>
    .GoodMenu {
        width: 100%;
    }

    .GoodMenu__items {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        justify-content: space-around;
    }

    .GoodMenu__link,
    .GoodMenu__toggle {
        cursor: pointer;
        color: black;
        text-decoration: none;
    }

    .GoodMenu__link:hover,
    .GoodMenu__link:focus,
    .GoodMenu__toggle:hover,
    .GoodMenu__toggle:focus {
        text-decoration: underline;
    }

    .GoodSubMenu {
        list-style: none;
        border: 1px solid gray;
        margin: 10px 0;
        padding: 10px;
    }

    .GoodSubMenu:not(.is-open) {
        display: none;
    }
</style>

<script>
    const toggleGoodExamples = document.querySelector('[data-hook="toggleGoodExamples"]');
    const goodSubMenu = document.querySelector('[data-hook="goodSubMenu"]');

    toggleGoodExamples.addEventListener('click', () => {
        const isOpen = goodSubMenu.classList.contains('is-open');

        if (isOpen) {
            goodSubMenu.classList.remove('is-open');
            toggleGoodExamples.setAttribute('aria-expanded', 'false');
        } else {
            goodSubMenu.classList.add('is-open');
            toggleGoodExamples.setAttribute('aria-expanded', 'true');
        }
    });
</script>
    </nav>

Improvements

Use <nav> to wrap the menu to give it a navigation role.
Label the navigation with aria-label.
Put menu items in a list <ul> to give them semantic coherence.
Use a <button> for the submenu toggle to indicate interactivity.
Use aria-hidden="true" on the submenu's icon.
Set aria-expanded on the toggle button to indicate its state. Make sure to change it when toggling.
Nest the submenu to ensure correct tab order.
Remove a closed submenu from tab order with display: none or visibility: hidden or aria-hidden="true".

Navigation

The bad

Source code

The good

Source code

Improvements