Доступность форм

FAST Element предоставляет мощный инструмент для создания веб-компонентов с соблюдением современных стандартов доступности (Accessibility, A11y). Фокус на доступности особенно важен для форм, поскольку они являются основным способом взаимодействия пользователей с интерфейсом. Библиотека FAST предоставляет встроенные механизмы и рекомендации для правильной разметки, управления фокусом, взаимодействия с клавиатурой и совместимости с вспомогательными технологиями.

Использование семантических элементов HTML

Семантическая разметка — основа доступных форм. Любой компонент формы должен опираться на стандартные HTML-элементы: <input>, <textarea>, <select>, <label>, <fieldset>, <legend>. FAST Element позволяет оборачивать эти элементы в кастомные компоненты без потери семантики.

Пример использования:

import { FASTElement, html, css } from "@microsoft/fast-element";

const template = html`
  <label for="username">Имя пользователя</label>
  <input id="username" type="text" />
`;

export class UserForm extends FASTElement {
  static template = template;
}

Ключевые моменты:

  • Атрибут for на <label> связывает метку с полем ввода, что улучшает совместимость с экранными читалками.
  • Использование стандартных элементов <input> сохраняет нативное поведение и доступность.

Управление фокусом и навигация с клавиатуры

Фокусировка и навигация клавиатурой критичны для пользователей, которые не могут использовать мышь. FAST Element позволяет контролировать фокус через стандартные события и атрибуты:

  • tabindex управляет порядком перехода по элементам.
  • focus() программно переводит фокус на элемент.
  • События focus и blur помогают отслеживать активные поля.

Пример:

this.shadowRoot.getElementById("username").focus();

Рекомендуется использовать tabindex="0" для интерактивных элементов и избегать отрицательных значений, чтобы не нарушать естественный порядок табуляции.

ARIA-атрибуты

Для кастомных элементов форм FAST Element предоставляет возможность добавлять ARIA-атрибуты для обеспечения доступности:

  • aria-label и aria-labelledby — определяют текстовое описание элемента.
  • aria-describedby — связывает элемент с дополнительной инструкцией или сообщением об ошибке.
  • aria-required, aria-invalid — указывают обязательность поля и статус валидации.

Пример:

<input 
  id="email" 
  type="email" 
  aria-label="Электронная почта" 
  aria-required="true" 
/>
<span id="email-error" role="alert">Неверный формат email</span>

Обработка ошибок и сообщения пользователю

Важная часть доступной формы — предоставление информации об ошибках. FAST Element позволяет динамически обновлять DOM и связывать сообщения с полями через ARIA:

const input = this.shadowRoot.getElementById("email");
const error = this.shadowRoot.getElementById("email-error");

if (!validateEmail(input.value)) {
  input.setAttribute("aria-invalid", "true");
  input.setAttribute("aria-describedby", "email-error");
  error.textContent = "Неверный формат email";
} else {
  input.removeAttribute("aria-invalid");
  input.removeAttribute("aria-describedby");
  error.textContent = "";
}

Особенности:

  • role="alert" гарантирует, что экранные читалки немедленно озвучат ошибку.
  • Связывание через aria-describedby делает информацию о состоянии видимой для вспомогательных технологий.

Поля с динамическим контентом

FAST Element поддерживает динамическое добавление и удаление полей формы. Для доступности важно обновлять ARIA-атрибуты и управлять фокусом:

const newField = document.createElement("input");
newField.setAttribute("aria-label", "Дополнительная информация");
newField.tabIndex = 0;
this.shadowRoot.appendChild(newField);
newField.focus();

Рекомендуется:

  • Переводить фокус на новые поля при их появлении.
  • Обновлять атрибуты aria-* для корректной озвучки.

Поля с группировкой и контейнеры

Для сложных форм с несколькими связанными полями используются <fieldset> и <legend> или их кастомные аналоги в FAST Element. Это позволяет:

  • Группировать логически связанные элементы.
  • Дать пользователю контекст, который озвучивается экранными читалками.

Пример:

<fieldset>
  <legend>Контактные данные</legend>
  <input type="text" id="phone" aria-label="Телефон" />
  <input type="email" id="email" aria-label="Email" />
</fieldset>

Совместимость с экранными читалками

FAST Element сохраняет совместимость с экранными читалками при соблюдении следующих правил:

  • Использовать семантические HTML-элементы.
  • Правильно связывать label и input.
  • Добавлять ARIA-атрибуты только при необходимости для кастомных элементов.
  • Обеспечивать правильный порядок табуляции и фокусировки.
  • Сообщения об ошибках озвучивать через role="alert" или aria-live.

Итоговые рекомендации по доступным формам

  • Семантика важнее визуальных стилей. Кастомные компоненты не должны ломать базовую разметку.
  • ARIA-атрибуты дополняют, но не заменяют стандартные HTML-атрибуты.
  • Управление фокусом и навигацией по клавиатуре должно быть предсказуемым и последовательным.
  • Все динамические изменения интерфейса должны быть отражены через ARIA и визуально.

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

Оглавление