Введение в Focus

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

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

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

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

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

Что такое фокус?

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

keyboard focus in a text field

Объект, сфокусированный в данный момент, часто обозначается кольцом фокуса (focus ring), стиль которого зависит как от браузера, так и от стилей, применяемых автором страницы. Например, Chrome, как правило, выделяет сфокусированные элементы синей рамкой, тогда как Firefox использует пунктирную границу.

sign up button

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

Как пользователь вы можете контролировать какой элемент в настоящее время сфокусирован используя Tab, Shift+Tab или клавиши со стрелками. В Mac OSX это работает несколько иначе: в то время как Chrome всегда позволяет вам перемещаться с помощью Tab, в других браузерах, таких как Safari, вам нужно нажать Option+Tab чтобы изменить фокус. (Вы можете изменить этот параметр в разделе «Клавиатура» в системных настройках.)

keyboard preferences dialog

Порядок, в котором фокус двигается вперед и назад через интерактивные элементы с использованием Tab называется, что не удивительно, порядок табуляции (tab order). Уверенность в том, что вы проектируете страницу с логичным порядком табуляции, является важным шагом, который мы рассмотрим позже.

Что можно сфокусировать?

Встроенные интерактивные HTML элементы, такие как текстовые поля, кнопки и списки для выбора являются неявно фокусируемыми, что означает, что они автоматически вставляются в порядок табуляции и имеют встроенную обработку событий клавиатуры без вмешательства разработчика.

implicitly focusable fields

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

not all elements are focusable

Испытание фокуса

Давайте попробуем некоторые из методов фокусировки, которые мы только что обсудили. Используя Chrome, перейдите сюда airline site mockup page и найдите конкретный билет используя только клавиатуру. Эта страница не принимает ввод мыши, поэтому вы не сможете сделать упражнение кое-как (не потому что мы вам не доверяем ;-).

airline site mockup

Параметры билета, которые вы должны указать:

  • в одну сторону (One Way)
  • в Melbourne (Arrival)
  • отправляющийся (Depart Date) 12 октября 2017 (10/12/2017)
  • прибывающий (Return Date) 23 октября 2017 (10/23/2017)
  • место у окна (Window seat)
  • не получать рекламные предложения (Receive promotional offers?)

Когда вы успешно заполните форму без ошибок ввода и активируете кнопку поиска, форма просто очистится и перезагрузится. Идите и заполните форму, а затем возвращайтесь назад.

Давайте рассмотрим, как форма использует ваш ввод с клавиатуры. Начиная с ваших первых нажатий Tab, браузер подсвечивает элементы навигации для рейсов (Flights), отелей (Hotels) и проката автомобилей (Rental Cars). По мере того, как вы продолжите нажимать Tab вы перейдете к группе переключателей, где вы сможете выбрать из поездки в обе стороны (Round Trip), в одну сторону (One Way) или многогородней поездки (Multi City) используя кнопки со стрелками.

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

Выбор типа посадки также зависит от клавиш со стрелками, либо вы можете ввести «w», «a» или «n», чтобы перейти к конкретной опции посадки. Затем вы можете отключить рассылку рекламных предложений по умолчанию, нажав пробел когда флажок сфокусирован. Наконец, сфокусируйте кнопку «Поиск» (Search) и нажмите Enter, чтобы отправить форму.

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

Translated by