Поверхности и доступность

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

Поверхности, высота и границы

Компоненты пользуются общими ролями границы, парами высоты и ролями цвета иконок. Эта глава говорит, какую роль берёт каждая часть компонента.

Граница контрола и граница области

Компоненты следуют двум нейтральным ролям границы (см. Границы). --sf-outline — граница контрола: у поля, выпадающего списка, флажка, переключателя, кнопки с контуром. Человек должен найти поле раньше, чем наведёт на него курсор или поставит фокус, а у телефона наведения нет вовсе; поэтому граница контрола в покое держит контраст не ниже 3:1 в обеих темах (Контраст). --sf-outline-variant — граница области: разделитель, рамка карточки, край панели; для контрола она слишком слаба. Граница недоступного контрола (--sf-outline-disable) слабее живой, но остаётся видимой: контрол потерял возможность действовать, а не форму.

Высота — пара поверхность + тень

Всё, что компонент поднимает над страницей (раскрытый список, контекстное меню, всплывающая панель), берёт пару одной ступени: поверхность --sf-elevation-N--surface и тень --sf-elevation-N--shadow (почему пара — Высота: поверхность и тень; какая ступень куда — Высота над страницей). Компоненты не берут тени ступени напрямую; немногие исключения (ползунок, бегунок переключателя, иконка-акцент, копия перетаскиваемого элемента) записаны в контракте elevation-shadow с причиной.

Цвет иконки

Иконка внутри компонента берёт одну из трёх ролей: on-surface (основной текст), on-surface-variant (приглушённый) или on-disable (недоступный). Других ролей для иконок нет (подробно — см. Цвет иконки: три роли).

Смотрите также: Границы — роли границы; Высота: поверхность и тень и Высота над страницей — высота; Цвет иконки: три роли — цвет иконки.

Доступность: что компонент даёт и что остаётся за автором

Компонент берёт на себя часть требований доступности, остальное зависит от разметки автора. Эта глава разделяет эти зоны ответственности.

Компонент даёт:

• видимое кольцо фокуса и его вариант для принудительных цветов;
• контраст границы контрола не ниже 3:1;
• связи подписи, подсказки и ошибки с контролом (у полей);
• кнопку с type="button" по умолчанию в конструкторе, чтобы она случайно не отправила форму;
• логические стороны: одна разметка работает при письме слева направо и справа налево;
• отключение анимации по системной настройке.

Автор отвечает за:

• нативные элементы по назначению. Действие — <button>, переход — <a>, ввод — <input>. Не делать кнопку из <div>. Переход, который должен выглядеть как кнопка, — ссылка с классами и частями кнопки: <a href="/start/" class="sf-button sf-button--default sf-button--primary sf-button--size-1"><span class="sf-button-text-container">Начать</span></a>. Loader подключает кнопку по классу на любом элементе, а цвета ссылки на такую ссылку не ложатся. Атрибута disabled у ссылки нет, поэтому вида недоступности у неё тоже нет: недоступный переход не показывают ссылкой;
• доступное имя. Подпись описывает результат («Сохранить», а не «Да»); у кнопки без текста — aria-label;
• декоративные иконки — aria-hidden="true";
• переключатель — active вместе с aria-pressed, и только для настоящего переключателя;
• сообщение об ошибке, которое объясняет, как её исправить;
• результат действия — сообщить рядом с кнопкой или в области статуса;
• вид недоступной кнопки. Цвета недоступности .sf-button рисует по атрибуту disabled. Класс disabled снимает оформление наведения и нажатия (цвета недоступности по классу рисует только вид surface), а атрибут aria-disabled="true" вида кнопки не меняет совсем. Если кнопка должна остаться в порядке фокуса и поэтому получает aria-disabled, её вид недоступности задаёт CSS проекта ролями --sf-disable, --sf-on-disable и --sf-outline-disable (см. Отключённое состояние).

Свой счётчик со степпером. Для ввода числа сначала берите готовое поле количества (sf-quantity) или нативный <input type="number">: значение хранит нативный <input>, клавиатуру и роль даёт браузер. Если проект делает свой контрол «минус — значение — плюс», элемент значения получает role="spinbutton", aria-valuenow, aria-valuemin, aria-valuemax, tabindex="0" и клавиши:

Кнопки «минус» и «плюс» — обычные <button> с доступными именами; на границе диапазона соответствующая кнопка недоступна. Подтверждённое изменение значения контрол сообщает событием change (см. Соглашение change).

Что ещё решает автор такого контрола:

• Имя и значение. Группа и элемент значения получают имя от видимой подписи через aria-labelledby. Если число без единиц непонятно, элемент значения дополняет его атрибутом aria-valuetext («3 билета»). Идентификаторы для aria-labelledby делайте свои у каждого экземпляра, например счётчиком модуля (project-counter-${++sequence}): готового помощника у базового класса нет.
• Фокус на границе. Если кнопка, на которой стоит фокус, стала недоступной (значение дошло до границы), браузер сбрасывает фокус на <body>, и человек с клавиатуры теряет место. Переведите фокус на элемент значения до того, как кнопка станет недоступной.
• Озвучивание. Изменение с клавиатуры экранный диктор читает сам по aria-valuenow, поэтому область статуса его не повторяет. Результат нажатия кнопки сообщите в одной области статуса (role="status") внутри контрола, текстом «подпись: значение». Область скрывают визуально классом sr-only: число и так видно в элементе значения.
• Удержание кнопки. Автоповтор при удержании не обязателен: sf-quantity меняет значение на один шаг за нажатие.
• Вид значения. Класса поля для отдельного элемента значения у Framework нет. Значение в рамке даёт готовое sf-quantity; свой элемент получает границу контрола утилитами border-1 border-solid border-outline.
• Стрелки влево и вправо. Они не обязательны. Если контрол их обрабатывает, в направлении справа налево они меняются местами (Направление текста). Направление читайте в момент нажатия: element.matches(':dir(rtl)'); своего помощника для этого у Framework нет.
• Крупный шаг. Page Up и Page Down работают, только если проект задал крупный шаг; без него эти клавиши ничего не делают.
• Нет максимума. Если верхней границы нет, aria-valuemax не ставится, и клавиша End ничего не делает. То же для нижней границы, aria-valuemin и Home.
• Недоступный контрол. Обе кнопки получают disabled, элемент значения — aria-disabled="true" и перестаёт менять значение с клавиатуры. Элемент значения остаётся в порядке Tab (tabindex="0"), чтобы значение можно было прочитать, и показывает кольцо фокуса.

Проверка компонента в проекте: клавиатура (Tab, Enter, пробел), видимый фокус, недоступность и загрузка, светлая и тёмная темы, узкий экран, оба направления письма.

Смотрите также: Фокус — видимый фокус; Состояния — состояния; Имя, подпись, подсказка — подпись и подсказка.