Доступность сайта: сенсорное управление учебной страницей

Клавиатурный маршрут не отвечает на все вопросы сенсорного управления. Небольшой значок можно точно выбрать мышью и случайно промахнуться пальцем, особенно если рядом находится другое действие. Поэтому у учебного сайта важно рассматривать размер действительной области активации, расстояние между целями и возможность выполнить действие без сложного жеста.

В этом уроке вы уточните управление a11y-lab после двенадцатой главы. Диалог предыдущего углубления необязателен. Сохраняем настоящие ссылки и кнопки, а их размеры меняем через CSS, не создавая отдельную мобильную копию интерфейса.

Область действия и видимый значок

Размер рисунка не всегда совпадает с размером цели. Иконка может быть маленькой внутри большой кнопки, и это осмысленная форма. Напротив, большой декоративный фон возле ссылки не становится активной областью, если обработка относится только к маленькому тексту. Оценивать нужно настоящий элемент действия.

У кнопки меню нашего стенда есть видимая подпись «Разделы сайта». Она помогает выбрать действие и увеличивает понятную область. В форме кнопка «Проверить адрес» также не требует дополнительного маленького значка. Здесь размер можно обеспечить внутренними полями и минимальным ограничением, не меняя названия.

У двух соседних ссылок одинакового размера остаётся другой вопрос — расстояние. Палец закрывает часть экрана, а движение может быть неточным. Поэтому плотный ряд коротких пунктов нужно рассматривать как группу. Увеличение одной цели без согласования соседей способно создать наложение областей.

При этом длинная статья содержит и обычные встроенные ссылки. Не нужно превращать каждое техническое слово в огромную карточку. Такое решение разрушит текстовый ритм. Требования и исключения различают контекст, а проектное удобство должно учитывать назначение ссылки.

Числа и уровни требования

В WCAG 2.2 критерий 2.5.8 уровня AA задаёт минимум 24 на 24 CSS-пикселя для целей указателя с исключениями. Для меньших целей предусмотрено условие расстояния: круг диаметром 24 CSS-пикселя с центром в ограничивающем прямоугольнике не пересекает другую цель или круг другой малой цели. Есть также исключения для эквивалентного управления, встроенных ссылок, неизменённого управления браузера и существенного представления. Точное условие W3C.

Число 44 на 44 CSS-пикселя относится к более строгому критерию 2.5.5 уровня AAA, тоже со своими исключениями. Документ W3C. Можно выбрать такую величину как проектную цель для основных кнопок, но нельзя объявлять её обязательным минимумом AA для каждой ссылки сайта.

CSS-пиксель не равен произвольному физическому пикселю дисплея. Не измеряйте критерий по увеличенному скриншоту без понимания масштаба. Пользовательское увеличение также не оправдывает исходную маленькую цель: читатель не должен сначала исправлять размер страницы ради любого действия.

Исключение для текста не означает, что встроенные ссылки можно делать неудобными намеренно. Оно учитывает естественное перестроение строк. Разумные межстрочные расстояния, точные названия и различимое оформление остаются полезными, даже когда определённый численный минимум к цели неприменим.

Размеры основных действий

Добавьте к существующему lesson.css следующий самостоятельный фрагмент:

#course-toggle, #feedback-form button {
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: .75rem 1rem;
  font: inherit;
}
#lesson-toc ol { display: grid; gap: .5rem; padding-inline-start: 1.5rem; }
#lesson-toc a {
  display: inline-flex; align-items: center;
  min-block-size: 44px; padding: .5rem .75rem;
}
#course-menu { gap: .75rem; }
#course-menu a { display: inline-flex; align-items: center; min-block-size: 44px; padding: .5rem; }

Ожидается увеличение реальных кнопок и отдельных навигационных ссылок. Основной текст статьи не получает глобальную огромную высоту. Значение 44 выбрано для этого проектного варианта, а не для объявления полного соответствия AAA. Полная оценка включает другие критерии и состояния.

Высота задана как минимум. Если подпись переносится, элемент становится выше и сохраняет слова. Фиксированная высота могла бы обрезать название при увеличении. Ширина кнопки также не ограничена маленьким квадратом: видимый текст занимает необходимое место.

У оглавления может появиться длинное название «Сравнение способов выбора элементов документа». В этом случае ссылка занимает несколько строк, а соседняя остаётся ниже благодаря сетке и промежутку. Не сжимайте весь пункт до одной строки многоточием ради одинаковых прямоугольников: человек выбирает часть урока по названию. Если длинное слово выходит за область, нужно исправить перенос и ширину, сохраняя полный текст и реальную область активации. Минимальный размер помогает выбору, но не исправляет потерянное название.

В базовом CSS уже существуют точные правила [hidden] для меню и его кнопки. Они сохраняются. Новое оформление не должно сделать исходно скрытую кнопку видимой до инициализации или показывать ссылки закрытого блока. Размер цели имеет смысл только вместе с правильным состоянием управления.

Действие без сложного жеста

Представим будущий просмотр иллюстрации с увеличением двумя пальцами. Такой жест можно оставить дополнительным, но читатель должен иметь понятные кнопки увеличения и уменьшения либо другую подходящую возможность одного указателя. Критерий Pointer Gestures рассматривает многоточечные и зависящие от пути жесты с исключением существенных случаев. W3C.

Для перетаскивания есть отдельный критерий Dragging Movements уровня AA: функцию, требующую dragging, нужно предоставить без перетаскивания одним указателем, кроме существенного случая или предусмотренного управления браузера. W3C. Это не тот же вопрос, что многоточечный жест.

У нашего статического стенда нет перетаскивания и авторского масштабирования пальцами. Мы не создаём их только ради демонстрации требования. Пример показывает границу будущей функции: если она появится, альтернативные действия нужно проектировать вместе с ней, а не после жалобы читателя.

Также не блокируйте обычное увеличение браузера ради сохранения макета. Восьмой урок уже показал, что композиция должна выдерживать изменение масштаба. Сенсорное управление и крупный текст являются разными условиями, которые могут встретиться одновременно.

Раскрытие и выбор

Сенсорный читатель не обязан получать действие только при наведении. Меню стенда раскрывается нажатием встроенной кнопки, поэтому его основной путь не зависит от hover. Ссылки после раскрытия сохраняют обычную активацию. Декоративное изменение цвета может сопровождать действие, но не заменять его.

Не переносите действие на момент касания, если обычное завершение позволяет отменить промах. Преждевременная обработка сложных указательных событий может ухудшить предсказуемость. В нашем примере используется обычный click встроенных элементов; отдельная модель рисования или dragging потребовала бы другого разбора.

Для будущего наблюдения выберите раскрытие меню, переход по оглавлению и отправку учебной формы. Смотрите, не активируется ли соседняя цель, понятны ли подписи и сохраняется ли возможность увеличить текст. Не записывайте эти признаки как полученные до реального просмотра.

После этого урока основные цели имеют объяснимый размер, а будущие жесты — ясную границу альтернатив. Мы не подменили весь текст крупными кнопками и не смешали уровни WCAG. Следующее углубление рассмотрит настройки самого читателя, которые способны менять движение и цветовое представление страницы.