Навигация с клавиатуры

Поддержка клавиатурной навигации является важной частью доступности интерфейсов и UX. В Carbon Components Svelte каждый компонент построен с учетом ARIA-атрибутов и событий клавиатуры, что позволяет пользователям эффективно управлять элементами без использования мыши.

Основные принципы

  1. Фокусируемость элементов Любой интерактивный компонент должен быть доступен через клавишу Tab. В Svelte это достигается с помощью стандартного HTML-атрибута tabindex и обработчиков событий on:focus и on:blur. Компоненты Carbon автоматически выставляют правильный tabindex для кнопок, ссылок, полей ввода и элементов меню.

  2. Обработка клавиш Enter и Space Для кнопок и элементов, имитирующих кнопку, важно поддерживать активацию клавишами:

    <Button on:keydown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        handleClick();
    }
}}>
    Подтвердить
</Button>

    Здесь handleClick — функция, выполняющая действие кнопки. Этот подход необходим для соответствия стандартам WCAG.

  3. Навигация по спискам и меню Компоненты меню и селекторы (Dropdown, ComboBox, Menu) поддерживают навигацию с помощью стрелок:

    • ArrowDown и ArrowUp перемещают фокус по элементам списка.
    • Home и End переводят фокус на первый или последний элемент.
    • Enter или Space выбирают элемент.

    В Carbon Components Svelte эти события уже встроены в компоненты, но при кастомизации необходимо использовать события on:keydown и методы управления состоянием.

  4. Закрытие модальных элементов клавишей Escape Для модальных окон (Modal) или выпадающих списков важна поддержка закрытия через клавишу Escape:

    <Modal bind:open>
    <div slot="content">
        Контент модального окна
    </div>
    <svelte:window on:keydown={(e) => {
        if (e.key === 'Escape') open = false;
    }} />
</Modal>

    Это обеспечивает быстрый доступ к выходу из модальных интерфейсов без использования мыши.

Практические советы по реализации

  • Фокус на элементе по умолчанию В диалогах и формах важно сразу устанавливать фокус на первый интерактивный элемент:

    <TextInput bind:this={firstInput} />
<script>
    import { onMount } from 'svelte';
    let firstInput;
    onMount(() => firstInput.focus());
</script>

  • Семантическая разметка и ARIA Компоненты Carbon используют ARIA-атрибуты для описания ролей (role="menu", role="menuitem") и состояния (aria-expanded, aria-selected). Это позволяет вспомогательным технологиям корректно интерпретировать интерфейс.

  • Обеспечение циклической навигации В длинных списках или меню полезно реализовать циклический фокус, чтобы пользователь при достижении конца списка возвращался к первому элементу. В Svelte это делается через проверку текущего индекса и манипуляцию focus().

Примеры реализации

Навигация по табам:

<Tabs>
    <Tab id="tab-1">Первый</Tab>
    <Tab id="tab-2">Второй</Tab>
</Tabs>
<script>
    import { Tabs, Tab } from 'carbon-components-svelte';
</script>
  • ArrowLeft и ArrowRight перемещают активный таб.
  • Tab переводит фокус внутрь панели с контентом.

Выпадающий список с клавиатурной навигацией:

<Dropdown bind:selected={selectedItem} items={items} />
<script>
    import { Dropdown } from 'carbon-components-svelte';
    let selectedItem;
    const items = ['Элемент 1', 'Элемент 2', 'Элемент 3'];
</script>
  • Открытие: Enter или Space.
  • Навигация: ArrowUp/ArrowDown.
  • Выбор: Enter.

Управление пользовательским фокусом

  • autofocus для полей ввода: позволяет задать элемент, который получит фокус при рендере.
  • bind:this + focus(): динамическая установка фокуса после обновления состояния компонента.
  • Контроль tabindex: для скрытых или временно неактивных элементов ставить tabindex="-1", чтобы исключить их из последовательности табуляции.

Поддержка доступности

Carbon Components Svelte строятся с ориентацией на WCAG 2.1. Это означает:

  • Поддержка всех основных клавиш управления: Tab, Shift+Tab, Enter, Space, Escape, Arrow keys, Home, End.
  • Видимый индикатор фокуса (:focus-visible) для всех интерактивных элементов.
  • Корректная работа скринридеров за счет использования ARIA-атрибутов и семантики HTML.

Эти механизмы позволяют создавать интерфейсы, полностью управляемые с клавиатуры, без потери функциональности и доступности.

Хотите, я могу сделать отдельный раздел с наиболее частыми ошибками при настройке клавиатурной навигации в Carbon Components Svelte с примерами и их исправлением? Это сильно облегчает обучение.

Оглавление