WCAG требования

Библиотека Tabbable предназначена для определения элементов на веб-странице, доступных для навигации с помощью клавиши Tab. Она используется в контексте доступности (Accessibility, a11y) и соответствует требованиям WCAG по обеспечению клавиатурной навигации. Основная задача библиотеки — идентификация элементов, на которые можно перейти фокусом, а также различение фокусируемых и табулируемых элементов.

Ключевые функции:

• Определение всех табулируемых элементов в контейнере.
• Фильтрация скрытых или отключённых элементов.
• Поддержка кастомных атрибутов tabindex.
• Совместимость с динамически изменяющимся DOM.

Принципы работы Tabbable

1. Фокусируемые элементы Fокусу поддаются элементы, у которых есть естественная фокусируемость: , , , </code>, <code><select></code>. Кроме того, элементы с атрибутом <code>tabindex="0"</code> становятся фокусируемыми.</p></li> <li><p><strong>Исключение неактивных элементов</strong> Элементы с атрибутом <code>disabled</code> или <code>aria-hidden="true"</code> автоматически исключаются из списка табулируемых. Это соответствует рекомендациям <strong>WCAG 2.1</strong> (Success Criterion 2.1.1 — Keyboard).</p></li> <li><p><strong>Обработка отрицательного tabindex</strong> Элементы с <code>tabindex="-1"</code> считаются фокусируемыми программно, но они не попадают в последовательность табуляции. Tabbable учитывает этот факт, что важно для управления фокусом в сложных интерфейсах.</p></li> </ol> <hr /> <h3 id="использование-библиотеки">Использование библиотеки</h3> <p>Библиотека предоставляет основной метод <code>tabbable(container)</code>, который возвращает массив DOM-элементов:</p> <pre class="javascript"><code>import tabbable from 'tabbable'; const container = document.getElementById('form'); const focusableElements = tabbable(container); console.log(focusableElements);</code></pre> <p><strong>Особенности метода:</strong></p> <ul> <li><code>container</code> — любой элемент DOM, внутри которого производится поиск.</li> <li>Возвращается <strong>массив в порядке табуляции</strong>.</li> <li>Поддерживаются вложенные контейнеры и динамически изменяющийся контент.</li> </ul> <p>Дополнительно можно использовать <code>isTabbable(element)</code> для проверки, является ли конкретный элемент табулируемым:</p> <pre class="javascript"><code>import { isTabbable } from 'tabbable'; const button = document.querySelector('button'); console.log(isTabbable(button)); // true или false</code></pre> <hr /> <h3 id="атрибут-tabindex-и-порядок-навигации">Атрибут tabindex и порядок навигации</h3> <p><code>tabindex</code> играет ключевую роль в соблюдении стандартов WCAG:</p> <ul> <li><code>tabindex="0"</code> — элемент включается в естественный порядок табуляции.</li> <li><code>tabindex="-1"</code> — элемент исключается из последовательности, но доступен для скриптов.</li> <li><code>tabindex="n"</code> (положительное число) — явная установка порядка табуляции, но использование <strong>положительных значений не рекомендуется</strong> в современных интерфейсах, так как это усложняет предсказуемость навигации.</li> </ul> <p>Tabbable корректно учитывает эти значения при формировании массива элементов.</p> <hr /> <h3 id="особенности-взаимодействия-с-aria">Особенности взаимодействия с ARIA</h3> <p>Tabbable учитывает спецификации ARIA:</p> <ul> <li>Элементы с <code>aria-hidden="true"</code> игнорируются.</li> <li>Контейнеры с <code>role="presentation"</code> или <code>role="none"</code> также исключаются.</li> <li>При динамическом изменении состояния ARIA, массив табулируемых элементов обновляется при повторном вызове метода.</li> </ul> <p>Это позволяет создавать интерфейсы, соответствующие <strong>WCAG 2.1</strong>, без лишних проверок вручную.</p> <hr /> <h3 id="интеграция-с-динамическим-dom">Интеграция с динамическим DOM</h3> <p>В современном JavaScript интерфейсе элементы могут добавляться или удаляться динамически. Для поддержки этого необходимо:</p> <ol type="1"> <li>Вызывать <code>tabbable(container)</code> при каждом изменении DOM, где меняется доступность фокуса.</li> <li>Использовать наблюдатели <code>MutationObserver</code>, чтобы автоматически обновлять список фокусируемых элементов:</li> </ol> <pre class="javascript"><code>const observer = new MutationObserver(() => { const focusable = tabbable(container); console.log(focusable); }); observer.observe(container, { childList: true, subtree: true });</code></pre> <hr /> <h3 id="практические-сценарии">Практические сценарии</h3> <ol type="1"> <li><p><strong>Модальные окна и диалоги</strong> Ограничение табуляции только элементами внутри модального окна предотвращает уход фокуса за пределы диалога. Tabbable помогает определить внутренние элементы и реализовать <strong>focus trap</strong>.</p></li> <li><p><strong>Формы и сложные панели</strong> Автоматическое определение табулируемых полей формы позволяет создавать интерфейсы с правильной навигацией без ручного перечисления всех элементов.</p></li> <li><p><strong>Компоненты с кастомным поведением</strong> Dropdown-меню, аккордеоны и интерактивные виджеты могут динамически изменять доступность фокуса. Tabbable обеспечивает корректный порядок и проверку доступности элементов.</p></li> </ol> <hr /> <h3 id="соответствие-wcag">Соответствие WCAG</h3> <p>Использование Tabbable напрямую связано с несколькими критериями <strong>WCAG 2.1</strong>:</p> <ul> <li><strong>2.1.1 Keyboard</strong> — все функциональные элементы должны быть доступными с клавиатуры.</li> <li><strong>2.4.3 Focus Order</strong> — последовательность табуляции должна быть логичной.</li> <li><strong>4.1.2 Name, Role, Value</strong> — интеграция с ARIA обеспечивает правильное озвучивание элементов ассистивными технологиями.</li> </ul> <p>Эти критерии обеспечиваются за счёт точного определения табулируемых элементов и фильтрации неактивных компонентов.</p> </div> <div class="post-navigation row mt-3 mb-4"> <div class="previous-post-link col-md-5"> <a href="/tutorials/tabbable/vanilla-javascript-tabbable/" rel="prev">« Vanilla JavaScript</a> </div> <div class="index-link col-md-2 text-center"> <a href="/tutorials/tabbable/">Оглавление</a> </div> <div class="next-post-link col-md-5 text-end"> <a href="/tutorials/tabbable/aria-spetsifikatsiya/" rel="next">ARIA спецификация »</a> </div> </div> </div> <div class="col-md-3 mt-lg-0 mt-md-0 mt-sm-3 mt-3"> <aside class="sidebar"> <h3>Учебник Tabbable</h3> <ul> <li> Введение <ul> <li> <a href="/tutorials/tabbable/chto-takoe-tabbable/">Что такое tabbable</a> </li> <li> <a href="/tutorials/tabbable/zachem-nuzhna-biblioteka-dlya-upravleniya-fokusom/">Зачем нужна библиотека для управления фокусом</a> </li> <li> <a href="/tutorials/tabbable/ustanovka-i-podklyuchenie-tabbable/">Установка и подключение</a> </li> <li> <a href="/tutorials/tabbable/sovmestimost-s-brauzerami-tabbable/">Совместимость с браузерами</a> </li> <li> <a href="/tutorials/tabbable/osnovnye-kontseptsii-tabulyatsii/">Основные концепции табуляции</a> </li> </ul> </li> <li> Базовое использование <ul> <li> <a href="/tutorials/tabbable/funktsiya-tabbable/">Функция tabbable</a> </li> <li> <a href="/tutorials/tabbable/poluchenie-vsekh-fokusiruemykh-elementov/">Получение всех фокусируемых элементов</a> </li> <li> <a href="/tutorials/tabbable/parametry-i-optsii/">Параметры и опции</a> </li> <li> <a href="/tutorials/tabbable/vozvrashchaemye-znacheniya-tabbable/">Возвращаемые значения</a> </li> <li> <a href="/tutorials/tabbable/raznitsa-mezhdu-tabbable-i-focusable/">Разница между tabbable и focusable</a> </li> </ul> </li> <li> Функция focusable <ul> <li> <a href="/tutorials/tabbable/naznachenie-i-otlichiya-ot-tabbable/">Назначение и отличия от tabbable</a> </li> <li> <a href="/tutorials/tabbable/elementy-s-tabindex-1/">Элементы с tabindex=&quot;-1&quot;</a> </li> <li> <a href="/tutorials/tabbable/skrytye-i-nevidimye-elementy/">Скрытые и невидимые элементы</a> </li> <li> <a href="/tutorials/tabbable/rabota-s-disabled-elementami/">Работа с disabled элементами</a> </li> <li> <a href="/tutorials/tabbable/primery-prakticheskogo-primeneniya/">Примеры практического применения</a> </li> </ul> </li> <li> Функция isTabbable <ul> <li> <a href="/tutorials/tabbable/proverka-otdelnykh-elementov/">Проверка отдельных элементов</a> </li> <li> <a href="/tutorials/tabbable/logika-opredeleniya-dostupnosti-dlya-tabulyatsii/">Логика определения доступности для табуляции</a> </li> <li> <a href="/tutorials/tabbable/obrabotka-granichnykh-sluchaev-tabbable/">Обработка граничных случаев</a> </li> <li> <a href="/tutorials/tabbable/integratsiya-v-uslovnuyu-logiku/">Интеграция в условную логику</a> </li> </ul> </li> <li> Функция isFocusable <ul> <li> <a href="/tutorials/tabbable/opredelenie-fokusiruemosti-elementa/">Определение фокусируемости элемента</a> </li> <li> <a href="/tutorials/tabbable/elementy-s-nestandartnymi-atributami/">Элементы с нестандартными атрибутами</a> </li> <li> <a href="/tutorials/tabbable/osobennosti-raboty-s-svg/">Особенности работы с SVG</a> </li> <li> <a href="/tutorials/tabbable/validatsiya-polzovatelskogo-vvoda-tabbable/">Валидация пользовательского ввода</a> </li> </ul> </li> <li> Атрибут tabindex <ul> <li> <a href="/tutorials/tabbable/estestvennyy-poryadok-tabulyatsii/">Естественный порядок табуляции</a> </li> <li> <a href="/tutorials/tabbable/polozhitelnye-znacheniya-tabindex/">Положительные значения tabindex</a> </li> <li> <a href="/tutorials/tabbable/nulevoe-znachenie-tabindex/">Нулевое значение tabindex</a> </li> <li> <a href="/tutorials/tabbable/otritsatelnye-znacheniya-tabindex/">Отрицательные значения tabindex</a> </li> <li> <a href="/tutorials/tabbable/antipatterny-i-plokhie-praktiki/">Антипаттерны и плохие практики</a> </li> </ul> </li> <li> Работа с контейнерами <ul> <li> <a href="/tutorials/tabbable/ogranichenie-oblasti-poiska/">Ограничение области поиска</a> </li> <li> <a href="/tutorials/tabbable/vlozhennye-konteynery-tabbable/">Вложенные контейнеры</a> </li> <li> <a href="/tutorials/tabbable/shadow-dom-tabbable/">Shadow DOM</a> </li> <li> <a href="/tutorials/tabbable/iframe-i-ikh-soderzhimoe/">Iframe и их содержимое</a> </li> <li> <a href="/tutorials/tabbable/dinamicheski-sozdavaemye-elementy/">Динамически создаваемые элементы</a> </li> </ul> </li> <li> Опции библиотеки <ul> <li> <a href="/tutorials/tabbable/getshadowroot/">getShadowRoot</a> </li> <li> <a href="/tutorials/tabbable/includecontainer/">includeContainer</a> </li> <li> <a href="/tutorials/tabbable/nastroyka-sobstvennykh-filtrov/">Настройка собственных фильтров</a> </li> <li> <a href="/tutorials/tabbable/proizvoditelnost-razlichnykh-konfiguratsiy/">Производительность различных конфигураций</a> </li> </ul> </li> <li> Специальные HTML-элементы <ul> <li> <a href="/tutorials/tabbable/formy-i-ikh-elementy/">Формы и их элементы</a> </li> <li> <a href="/tutorials/tabbable/contenteditable-oblasti/">Contenteditable области</a> </li> <li> <a href="/tutorials/tabbable/kastomnye-komponenty/">Кастомные компоненты</a> </li> </ul> </li> <li> Видимость и доступность <ul> <li> <a href="/tutorials/tabbable/css-svoystva-vliyayushchie-na-tabulyatsiyu/">CSS свойства влияющие на табуляцию</a> </li> <li> <a href="/tutorials/tabbable/visibility-i-display/">Visibility и display</a> </li> <li> <a href="/tutorials/tabbable/opacity-i-pointer-events/">Opacity и pointer-events</a> </li> <li> <a href="/tutorials/tabbable/klipping-i-overflow/">Клиппинг и overflow</a> </li> <li> <a href="/tutorials/tabbable/pozitsionirovanie-za-predelami-viewport/">Позиционирование за пределами viewport</a> </li> </ul> </li> <li> Модальные окна и диалоги <ul> <li> <a href="/tutorials/tabbable/lovushka-fokusa/">Ловушка фокуса</a> </li> <li> <a href="/tutorials/tabbable/vozvrat-fokusa-pri-zakrytii/">Возврат фокуса при закрытии</a> </li> <li> <a href="/tutorials/tabbable/pervyy-fokusiruemyy-element/">Первый фокусируемый элемент</a> </li> <li> <a href="/tutorials/tabbable/tsiklicheskaya-navigatsiya-tabbable/">Циклическая навигация</a> </li> <li> <a href="/tutorials/tabbable/obrabotka-escape-i-enter/">Обработка Escape и Enter</a> </li> </ul> </li> <li> Меню и выпадающие списки <ul> <li> <a href="/tutorials/tabbable/navigatsiya-strelkami-tabbable/">Навигация стрелками</a> </li> <li> <a href="/tutorials/tabbable/zakrytie-pri-potere-fokusa-tabbable/">Закрытие при потере фокуса</a> </li> <li> <a href="/tutorials/tabbable/vlozhennye-podmenyu-tabbable/">Вложенные подменю</a> </li> <li> <a href="/tutorials/tabbable/poisk-po-pervoy-bukve/">Поиск по первой букве</a> </li> </ul> </li> <li> Карусели и слайдеры <ul> <li> <a href="/tutorials/tabbable/upravlenie-fokusom-mezhdu-slaydami/">Управление фокусом между слайдами</a> </li> <li> <a href="/tutorials/tabbable/skrytie-neaktivnykh-elementov-ot-tabulyatsii/">Скрытие неактивных элементов от табуляции</a> </li> <li> <a href="/tutorials/tabbable/knopki-navigatsii/">Кнопки навигации</a> </li> <li> <a href="/tutorials/tabbable/indikatory-i-paginatsiya/">Индикаторы и пагинация</a> </li> <li> <a href="/tutorials/tabbable/avtomaticheskaya-prokrutka-i-fokus/">Автоматическая прокрутка и фокус</a> </li> </ul> </li> <li> Аккордеоны и вкладки <ul> <li> <a href="/tutorials/tabbable/pereklyuchenie-mezhdu-panelyami/">Переключение между панелями</a> </li> <li> <a href="/tutorials/tabbable/aria-atributy-i-roli-tabbable/">Aria-атрибуты и роли</a> </li> <li> <a href="/tutorials/tabbable/pattern-roving-tabindex/">Паттерн roving tabindex</a> </li> <li> <a href="/tutorials/tabbable/svorachivanie-i-razvorachivanie-tabbable/">Сворачивание и разворачивание</a> </li> <li> <a href="/tutorials/tabbable/sokhranenie-sostoyaniya-fokusa/">Сохранение состояния фокуса</a> </li> </ul> </li> <li> Таблицы и сетки данных <ul> <li> <a href="/tutorials/tabbable/sortirovka-i-filtratsiya-tabbable/">Сортировка и фильтрация</a> </li> <li> <a href="/tutorials/tabbable/virtualizatsiya-i-lenivaya-zagruzka/">Виртуализация и ленивая загрузка</a> </li> </ul> </li> <li> Drag and drop <ul> <li> <a href="/tutorials/tabbable/fokus-na-peretaskivaemykh-elementakh/">Фокус на перетаскиваемых элементах</a> </li> <li> <a href="/tutorials/tabbable/zony-sbrosa/">Зоны сброса</a> </li> <li> <a href="/tutorials/tabbable/vizualnaya-obratnaya-svyaz-tabbable/">Визуальная обратная связь</a> </li> <li> <a href="/tutorials/tabbable/dostupnost-dlya-skrinriderov/">Доступность для скринридеров</a> </li> </ul> </li> <li> Динамический контент <ul> <li> <a href="/tutorials/tabbable/dobavlenie-elementov-v-dom-tabbable/">Добавление элементов в DOM</a> </li> <li> <a href="/tutorials/tabbable/udalenie-elementov-tabbable/">Удаление элементов</a> </li> <li> <a href="/tutorials/tabbable/obnovlenie-spiska-tabbable/">Обновление списка tabbable</a> </li> <li> <a href="/tutorials/tabbable/debounce-i-throttle-tabbable/">Debounce и throttle</a> </li> <li> <a href="/tutorials/tabbable/mutationobserver/">MutationObserver</a> </li> </ul> </li> <li> Производительность <ul> <li> <a href="/tutorials/tabbable/keshirovanie-rezultatov-tabbable/">Кеширование результатов</a> </li> <li> <a href="/tutorials/tabbable/optimizatsiya-selektorov-tabbable/">Оптимизация селекторов</a> </li> <li> <a href="/tutorials/tabbable/lenivye-vychisleniya/">Ленивые вычисления</a> </li> <li> <a href="/tutorials/tabbable/batch-obnovleniya-tabbable/">Batch обновления</a> </li> <li> <a href="/tutorials/tabbable/profilirovanie-i-benchmarki-tabbable/">Профилирование и бенчмарки</a> </li> </ul> </li> <li> Интеграция с фреймворками <ul> <li> <a href="/tutorials/tabbable/react-i-khuki/">React и хуки</a> </li> <li> <a href="/tutorials/tabbable/angular-direktivy-tabbable/">Angular директивы</a> </li> <li> <a href="/tutorials/tabbable/svelte-actions-tabbable/">Svelte actions</a> </li> <li> <a href="/tutorials/tabbable/vanilla-javascript-tabbable/">Vanilla JavaScript</a> </li> </ul> </li> <li> Доступность <ul> <li> <a href="/tutorials/tabbable/wcag-trebovaniya/">WCAG требования</a> </li> <li> <a href="/tutorials/tabbable/aria-spetsifikatsiya/">ARIA спецификация</a> </li> <li> <a href="/tutorials/tabbable/testirovanie-dostupnosti-tabbable/">Тестирование доступности</a> </li> </ul> </li> <li> Обработка ошибок <ul> <li> <a href="/tutorials/tabbable/nevalidnye-konteynery/">Невалидные контейнеры</a> </li> <li> <a href="/tutorials/tabbable/otsutstvie-tabbable-elementov/">Отсутствие tabbable элементов</a> </li> <li> <a href="/tutorials/tabbable/tsiklicheskie-ssylki-v-dom/">Циклические ссылки в DOM</a> </li> <li> <a href="/tutorials/tabbable/zashchitnoe-programmirovanie/">Защитное программирование</a> </li> <li> <a href="/tutorials/tabbable/logirovanie-i-otladka/">Логирование и отладка</a> </li> </ul> </li> <li> Тестирование <ul> <li> <a href="/tutorials/tabbable/unit-testy-tabbable/">Unit тесты</a> </li> <li> <a href="/tutorials/tabbable/e2e-testirovanie-fokusa/">E2E тестирование фокуса</a> </li> <li> <a href="/tutorials/tabbable/kross-brauzernoe-testirovanie-tabbable/">Кросс-браузерное тестирование</a> </li> </ul> </li> <li> Альтернативные решения <ul> <li> <a href="/tutorials/tabbable/sravnenie-s-focus-trap/">Сравнение с focus-trap</a> </li> <li> <a href="/tutorials/tabbable/sravnenie-s-ally-js/">Сравнение с ally.js</a> </li> <li> <a href="/tutorials/tabbable/sobstvennaya-realizatsiya/">Собственная реализация</a> </li> <li> <a href="/tutorials/tabbable/kogda-biblioteka-izbytochna/">Когда библиотека избыточна</a> </li> </ul> </li> <li> Миграция и обновление <ul> <li> <a href="/tutorials/tabbable/breaking-changes-tabbable/">Breaking changes</a> </li> <li> <a href="/tutorials/tabbable/deprecation-warnings-tabbable/">Deprecation warnings</a> </li> <li> <a href="/tutorials/tabbable/obratnaya-sovmestimost-tabbable/">Обратная совместимость</a> </li> <li> <a href="/tutorials/tabbable/strategii-postepennogo-vnedreniya/">Стратегии постепенного внедрения</a> </li> </ul> </li> <li> Расширенные паттерны <ul> <li> <a href="/tutorials/tabbable/kompozitsiya-neskolkikh-lovushek-fokusa/">Композиция нескольких ловушек фокуса</a> </li> <li> <a href="/tutorials/tabbable/prioritety-i-steki/">Приоритеты и стеки</a> </li> <li> <a href="/tutorials/tabbable/uslovnaya-aktivatsiya-tabbable/">Условная активация</a> </li> <li> <a href="/tutorials/tabbable/delegirovanie-upravleniya/">Делегирование управления</a> </li> <li> <a href="/tutorials/tabbable/kastomnye-strategii-tabulyatsii/">Кастомные стратегии табуляции</a> </li> </ul> </li> <li> Отладка <ul> <li> <a href="/tutorials/tabbable/vizualizatsiya-poryadka-tabulyatsii/">Визуализация порядка табуляции</a> </li> <li> <a href="/tutorials/tabbable/trassirovka-fokusa/">Трассировка фокуса</a> </li> <li> <a href="/tutorials/tabbable/chastye-problemy-i-resheniya-tabbable/">Частые проблемы и решения</a> </li> </ul> </li> <li> Лучшие практики <ul> <li> <a href="/tutorials/tabbable/graceful-degradation-tabbable/">Graceful degradation</a> </li> </ul> </li> </ul> </aside> </div><!--'end_frame_cache_WyJsYv'--> </div> </div> <footer class="bg-javascript pb-2 pt-2 text-center text-light text-lg-start"> <div class="container"> <div class="row d-flex align-items-center"> <div class="col-md-7 col-lg-8 text-center text-md-start"> <div class="font-weight-bold"> javascript42 — изучаем JavaScript вместе </div> </div> <div class="col-md-5 col-lg-4 ml-lg-0 text-center text-md-end"> <!--'start_frame_cache_DLdrDN'--> <a class="btn btn-outline-light btn-floating m-1 feedback-button" role="button"><i class="bi bi-envelope-fill"></i></a> <div class="feedback-modal" style="display: none"> <div class="feedback-modal-content"> <div class="close feedback-modal-close"> <button type="button" class="btn-close" aria-label="Close"></button> </div> <h3 class="text-center mb-3">Обратная связь</h3> <form action="" method="post" class="feedback-form"> <input type="hidden" name="sessid" id="sessid" value="e76b2d88b2438752570ce40ab6a48c2a" /> <input type="hidden" name="action" value="send_feedback"> <input type="text" class="form-control" id="feedback-lastname" name="UF_LASTNAME"> <div class="mb-3"> <label for="feedback-name" class="form-label">Ваше имя</label> <input type="text" class="form-control" id="feedback-name" name="UF_NAME" required> </div> <div class="mb-3"> <label for="feedback-email" class="form-label">Ваш email</label> <input type="email" class="form-control" id="feedback-email" name="UF_EMAIL" required> </div> <div class="mb-3"> <label for="feedback-message" class="form-label">Ваше сообщение</label> <textarea class="form-control" id="feedback-message" name="UF_MESSAGE" rows="4" required>