В КУРСЕ?

Разбираемся в теме

Слайд уже скрыт, а клавиатура осталась на его ссылке: где потерялось управление?

Картинки в галерее могут переключаться плавно, но это ещё не означает, что ею удобно пользоваться с клавиатуры. Видимый слайд и элемент, который сейчас получает клавиатурные команды, являются разными частями состояния интерфейса. Если учитывать только изображение, управление может оказаться непонятным. Рассмотрим вымышленную галерею из трёх карточек. Бумажная модель поможет заметить проблему без установки расширений и без предположений о качестве конкретного программного продукта.

У изображения и фокуса разные роли

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

Переключение кнопкой не требует каждый раз переносить фокус

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

Скрытая карточка не должна оставлять невидимый путь

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

Автоматическая смена требует отдельного управления

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

Попробуйте на практике

Проследите состояния условной галереи на бумаге, не создавая сайт и не устанавливая программное обеспечение.

  1. Нарисуйте три карточки с номерами и отдельными ссылками. Задайте порядок обхода: кнопка предыдущего слайда, кнопка следующего, ссылка видимой карточки, следующий элемент страницы. Автоматическое переключение пока отключено.
  2. Обозначьте первую карточку видимой, а фокус расположите на кнопке следующего слайда. После её условной активации запишите два значения отдельно: видима вторая карточка, фокус остаётся на той же кнопке.
  3. Смоделируйте дальнейший последовательный переход. В заданном порядке он должен привести к ссылке второй карточки. Отметьте как ошибочный вариант попадание на невидимую ссылку первой.
  4. Повторите смену со второй карточки на третью и проверьте выход к следующему элементу страницы. Отдельно запишите, какое управление остановкой понадобится, если позже появится автоматическое листание.

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

Частые вопросы

Достаточно убрать старую карточку за край видимой области?

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

Бумажная проверка подтверждает полную доступность галереи?

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

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

Зарегистрируйтесь, чтобы уточнить возможность доступа к этому материалу

Зарегистрироваться
← К списку материалов