ARIA и доступность в интерфейсах

<!-- Плохо -->
<div role="button" tabindex="0" onclick="...">Кнопка</div>

<!-- Хорошо -->
<button type="button">Кнопка</button>

<div role="button">Кнопка</div>
<div role="navigation">Меню</div>
<div role="dialog">Модалка</div>
<div role="alert">Уведомление</div>
<div role="tab">Вкладка</div>
<div role="tabpanel">Панель</div>
<div role="tooltip">Тултип</div>
<div role="status">Статус</div>

<button aria-label="Закрыть окно">
    <svg>...</svg>
</button>

<a href="/cart" aria-label="Корзина, 3 товара">
    <i class="bi bi-cart"></i>
</a>

<section aria-labelledby="features-title">
    <h2 id="features-title">Возможности</h2>
    <p>...</p>
</section>

<input type="password" aria-describedby="password-hint">
<p id="password-hint">Минимум 8 символов</p>

<button aria-label="Закрыть">
    <svg aria-hidden="true">...</svg>
</button>

<button aria-expanded="false" aria-controls="menu">
    Меню
</button>

<ul id="menu" hidden>...</ul>

button.addEventListener('click', () => {
    const expanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', String(!expanded));
    menu.hidden = expanded;
});

<button aria-controls="panel-1" aria-expanded="true">
    Показать
</button>
<div id="panel-1">...</div>

<nav>
    <ul>
        <li><a href="/" aria-current="page">Главная</a></li>
        <li><a href="/about">О нас</a></li>
    </ul>
</nav>

<div aria-live="polite" id="status"></div>

status.textContent = 'Товар добавлен в корзину';

<div aria-busy="true" aria-live="polite">
    Загрузка...
</div>

<input
    type="email"
    aria-invalid="true"
    aria-describedby="email-error"
>
<p id="email-error" role="alert">Введите корректный email</p>

<input type="email" required aria-required="true">

<nav aria-label="Главное меню">
    <ul role="list">
        <li role="listitem">
            <a href="/" aria-current="page">Главная</a>
        </li>
    </ul>
</nav>

<h3>
    <button
        aria-expanded="false"
        aria-controls="section1"
        id="accordion1id"
    >
        Заголовок аккордеона
    </button>
</h3>
<div
    id="section1"
    role="region"
    aria-labelledby="accordion1id"
    hidden
>
    Содержимое
</div>

<div role="tablist">
    <button
        role="tab"
        id="tab-1"
        aria-selected="true"
        aria-controls="panel-1"
    >
        Вкладка 1
    </button>
    <button
        role="tab"
        id="tab-2"
        aria-selected="false"
        aria-controls="panel-2"
        tabindex="-1"
    >
        Вкладка 2
    </button>
</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
    Содержимое 1
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
    Содержимое 2
</div>

<div
    role="dialog"
    aria-modal="true"
    aria-labelledby="modal-title"
    aria-describedby="modal-body"
>
    <h2 id="modal-title">Заголовок</h2>
    <p id="modal-body">Содержимое</p>
    <button aria-label="Закрыть">×</button>
</div>

<dialog id="myModal">
    <h2>Заголовок</h2>
    <p>Содержимое</p>
    <button>Закрыть</button>
</dialog>

dialog.showModal();
dialog.close();

<button type="button" aria-label="Удалить">
    <i class="bi bi-trash" aria-hidden="true"></i>
</button>

<button type="button" aria-label="Редактировать">
    <i class="bi bi-pencil" aria-hidden="true"></i>
</button>

<form>
    <div class="mb-3">
        <label for="email">Email</label>
        <input
            type="email"
            id="email"
            required
            aria-required="true"
            aria-describedby="email-error"
            aria-invalid="false"
        >
        <p id="email-error" role="alert"></p>
    </div>

    <button type="submit">Отправить</button>
</form>

input.addEventListener('blur', () => {
    const valid = input.checkValidity();
    input.setAttribute('aria-invalid', String(!valid));
    error.textContent = valid ? '' : 'Введите корректный email';
});

<div role="button">

<button aria-hidden="true">

<button aria-label="Сохранить">Сохранить</button>

Непонятно, где мы

<button>Отправить</button>

Не всегда работает

Tab уходит за пределы

Скринридер не знает состояние