Как пользоваться клавиатурой без мышки – советы

Что такое доступность с клавиатуры?

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

A11y с начала

Эти советы являются частью материала Web Accessibility: the Complete Learning Guide, где мы собрали руководства, статьи, курсы и книги, которые помогут вам понять основы веб-доступности.

Протестируйте ваш сайт на доступность с клавиатуры

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

Navigating quick links in the Tuts footer with the Tab keyNavigating quick links in the Tuts footer with the Tab keyNavigating quick links in the Tuts footer with the Tab key
Переход по быстрым ссылкам внизу сайта Tuts с помощью клавиши Tab

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

Создайте приметный стиль для :focus

В CSS есть псевдо-класс :focus, который включается когда пользователь кликает или нажимает на элемент, или выделяет его при помощи клавиши Tab. Состояние :focus применяется только к фокусируемым элементам, а именно <a>, <button>, <input>, <textarea>, <select>, и <area>.

Каждый браузер использует свой стиль по умолчанию для :focus, обычно это рамочка вокруг элемента из чёрных точек, или размытое свечение. Однако, это не нравится многим дизайнерам, и они полностью убирают это. Это самая распространённая ошибка, которая убивает доступность с клавиатуры на web-страницах. Если тебе не нравится стиль по умолчанию, Используй тот, который сочетается с дизайном твоего сайта.

focus styles in Google Chrome browserfocus styles in Google Chrome browserfocus styles in Google Chrome browser
Стиль :focus по умолчанию в браузере Google Chrome

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

Используйте указатели для ссылок, без собственного цвета

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

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

Если вы убираете стандартное подчёркивание, всегда используйте другой указатель без цвета (имеется ввиду, что он не будет отличаться цветом, т.е. не иметь своего определённого цвета), который соответствует дизайну вашего сайта, наподобие границ, значков, или подсвечивания.

Clear links on govuk 1 hyperlink 2 focused 3 visitedClear links on govuk 1 hyperlink 2 focused 3 visitedClear links on govuk 1 hyperlink 2 focused 3 visited
Ясные ссылки на gov.uk: (1) гиперссылка (2) в фокусе (3) посещённая.

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

Используйте обычные элементы управления

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

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

Например, вы можете создать ползунок с доступом с клавиатуры, используя следующий HTML:

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

Если вам почему-то нужно использовать не фокусируемый HTML-тег для интерактивного элемента, вы можете сделать его сфокусированным с помощью атрибута tabindex=”0″. Например, вот <div> превращается в фокусируемую кнопку:

Атрибут role=”button” в примере кода выше — это ролевой ориентир ARIA. Хотя пользователи, использующие только клавиатуру, в нём не нуждается, он незаменим для пользователей, использующих экранного диктора и зрительной доступности.

Даже если необычная кнопка было сделано фокусируемой, она по-прежнему уступает её стандартному аналогу, с точки зрения доступности с клавиатуры. Вы сразу это поймёте, когда попытаетесь добавить обработчик события к такой кнопке. Вот как выглядит слушатель событий нажатия, для обычного элемента <button>:

А вот аналог, с использованием div кнопки.

Если вы нажмёте на эти кнопки используя мышь или сенсорную панель, то вы увидите оба всплывающих сообщения. Однако, если вы доберётесь до каждой из кнопок с помощью клавиши Tab и нажмёте Enter, то увидите только первое сообщение, принадлежащее стандартной кнопке.

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

Добавьте ссылку «Перейти к главному»

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

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

:/>  Как сделать загрузочную флешку Windows 10 — 7, XP — 5 способов

Чтобы создать рабочую ссылку для пропуска навигации, вам необходимо привязать её к основному контенту с использованием HTML атрибутов id и href следующим образом:

А если у нас разные версии windows?

Не отчаивайтесь, друзья. Абсолютно все версии этой популярной операционной системы (начиная с Windows 7) имеют идентичные настройки и комбинации клавиш. Единственная разница заключается в оформлении ОС, поэтому в 8 и 10 версиях все необходимые элементы, окна и функции могут выглядеть слегка иначе.

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

Надеюсь, что статья была вам полезной! Не забывайте делиться ею в своих социальных сетях и подписываться на обновления блога!

Дополнительная информация:

Ввод данных с клавиатуры

Когда нужно что-то ввести в программу, в сообщение электронной почты или в поле, на экране мигает вертикальная черта ( | ). Это курсор, который также называют позиция ввода. Он показывает, где будет начинаться ввод. Можно переместить курсор, щелкнув желаемое расположение или воспользовавшись клавишами навигации (см. в этом разделе пункт «Использование клавиш навигации»).

Кроме букв, цифр, знаков препинания и символов, к клавишам ввода относятся еще и клавиша табуляции, клавиши Shift, Caps Lock, Enter, пробел и Backspace.

Название клавиши

Использование клавиши

Shift

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

Caps Lock

Чтобы вводить только заглавные буквы, один раз нажмите Caps Lock. Если снова нажать клавишу Caps Lock, эта функция будет отключена. На клавиатуре может быть световой индикатор, который показывает, включена функция Caps Lock.

Tab

Если нажать клавишу табуляции Tab, курсор переместится на несколько пробелов вперед. Также с помощью клавиши табуляции можно перейти к следующему поля в форме.

Enter

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

Пробел

Если нажать клавишу Пробел, курсор перемещается на один пробел вперед.

Backspace

Нажав клавишу Backspace, можно удалить символ перед курсором или выделенный текст.

Выбор меню, команд и параметров

С помощью клавиатуры можно открывать меню и выбирать команды и другие параметры. В программе, меню которой содержат подчеркнутые буквы, нажатие Alt и клавиши подчеркнутой буквы открывает соответствующее меню. Нажмите подчеркнутую букву в пункте меню, чтобы выбрать ту или иную команду.

В программах, где используется лента (например, в программах Paint или WordPad), после нажатия клавиши Alt буква, клавишу которой можно нажать, не подчеркивается, а накладывается.

Нажмите Alt F, чтобы открыть меню «Файл», далее нажмите P, чтобы выбрать команду «Печать». Этот фокус также работает и с диалоговыми окнами. Когда у параметра в диалоговом окне есть подчеркнутая буква, значит, выбрать этот параметр можно нажатием клавиши Alt вместе с клавишей подчеркнутой буквы.

Приведенная таблица содержит перечень некоторых из важнейших сочетаний клавиш. Подробный список см. Сочетания клавиш.

Другие клавиши

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

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

Использование клавиш навигации

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

Использование сочетаний клавиш в windows

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

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

В справке знак «плюс» ( ) между несколькими клавишами означает, что эти клавиши следует нажимать в сочетании. Например, сочетание «Ctrl A» означает: нажав и удерживая клавишу Ctrl, нажмите клавишу A.

Использование цифровой клавиатуры

На цифровой клавиатуре расположены цифры от 0 до 9, знаки арифметических действий (сложение), − (вычитание), * (умножение) и / (деление), а также десятичная запятая, как на калькуляторе. Эти символы продублированы на других клавишах, но расположение их на цифровой клавиатуре позволяет быстро вводить цифровые данные или знаки математических операций одной рукой.

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

Также с помощью цифровой клавиатуры можно выполнять простые подсчеты в программе «Калькулятор».

Как находить клавиатурные команды в программе

В большинстве программ действия можно выполнять с помощью клавиатуры. Чтобы посмотреть, каким командам соответствуют клавиши, откройте меню. Сообщения (если они доступны) отображаются возле пунктов меню.

:/>  Как очистить оперативную память компьютера в Виндовс 7 и 8?

Как упорядочены клавиши клавиатуры

Клавиши на клавиатуре компьютера могут быть разделены на несколько групп по функциям:

  • Буквы (буквы и цифры). Это клавиши букв, цифр, знаков препинания и символов, как и на обычной пишущей машинке.
  • Служебные клавиши. Эти клавиши используются по отдельности или в сочетании с другими клавишами для выполнения определенных действий. Чаще всего используются служебные клавиши Ctrl, Alt, Esc и клавиша с эмблемой Windows.
  • Функциональные клавиши. Функциональные клавиши используются для выполнения специальных задач. Они обозначены F1, F2, F3 и так далее, до F12. В зависимости от программы, функциональность этих клавиш может меняться.
  • Клавиши навигации. Эти клавиши используются для перемещения по документам, веб-страницах, а также для редактирования текста. К ним относятся клавиши со стрелками, Home, End, Page Up, Page Down, Delete и Insert.
  • Цифровая клавиатура. На цифровой клавиатуре удобно быстро вводить цифры. Клавиши сгруппированы в блок, как на обычном калькуляторе.

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

Клавиша pause/break

Эта клавиша используется редко. В некоторых древних программах нажатие Pause/Break может приостановить программу, а нажатие клавиши Ctrl Pause/Break может прекратить выполнение программы.

Клавиша prtscn (или print screen)

Когда-то эта клавиша действительно выполняла функцию, которую обозначает его название (т.е. «Печать экрана») – посылала текст текущего экрана на принтер. Сейчас нажатие PrtScn фиксирует изображение всего экрана (делает «снимок экрана») и копирует его в буфер обмена в памяти компьютера.

На некоторых клавиатурах на клавише PrtScn отмечена еще и команда SYS RQ – она еще загадочнее. Когда-то SYS RQ означала «system request» – «системный запрос», но в Windows эта команда недоступна.

Дополнительные сведения о клавише Print Screen, см. Создание снимка экрана (клавиша Print Screen).

Справка: Чтобы зафиксировать изображение не всего экрана, а только активного окна, нажмите Alt PrtScn.

Клавиша scrlk (или scroll lock)

В большинстве программ нажатие Scroll Lock не дает никакого эффекта. В некоторых программах нажатие Scroll Lock меняет поведение клавиш со стрелками и клавиши Page Up и Page Down: нажатие этих клавиш вызывает прокрутку документа без изменения положения курсора или выделения. На клавиатуре может быть световой индикатор, который показывает, включена функция Scroll Lock.

Кому нужна доступность с клавиатуры?

Вот основные целевые группы, которым нужна доступность с клавиатуры:

Контрол-навигация

Нельзя не заметить, что в рунете всё бóльшую популярность набирает т. н. контрол-навигация: перемещение по страницам одного уровня с помощью сочетаний

Ctrl ←

и

Ctrl →.

Некоторые товарищи даже

неуютно себя чувствуют

, когда попадают на сайт, не поддерживающий листание страниц с клавиатуры.

Почему эта функциональность до сих пор не реализована в самих браузерах?

На самом деле ещё первый графический браузер Мозаик умел распознавать элементы link с атрибутом rel, предусмотренные стандартом HTML для описания связей между страницами. Такие ссылки отображались в виде кнопок на специальной навигационной панели.

Из современных браузеров навигационные ссылки умеют показывать только Опера (по умолчанию панель скрыта) и Файрфокс (необходим плагин Site Navigation Bar). Как видим, панель навигации так и не прижилась. А как обстоит дело с сочетаниями клавиш?

Вместе с навигационной панелью в седьмой Опере появились клавиатурные сочетания Ctrl Shift ← и Ctrl Shift → для листания назад и вперёд. При этом браузер не давал переопределить для этой цели более привычные Ctrl ← и Ctrl →, из-за чего, например, на сайте Артемия Лебедева в качестве подсказки в Опере выводится не «Ctrl», а «Ctrl Shift».

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

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

Для Файрфокса существует плагин Link Widgets, позволяющий листать страницы с клавиатуры. В нём используются менее удобные, на мой взгляд, Alt PageUp и Alt PageDown, изменить их нельзя. Lite поделился ссылкой на более богатый возможностями плагин NextPlease!, кроме всего прочего позволяющий настроить любые сочетания клавиш для навигации по страницам, включая контрол со стрелками.

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

Пример скрипта есть в «Техногрете», однако он содержит существенную недоработку: сочетания контрола и стрелок срабатывают в полях ввода, конфликтуя с перемещением по словам. По этой причине контрол-навигацию следует отключать в элементах input и textarea, как это правильно делает «Хабрахабр».

P. S. Что ещё, кроме листания, было бы удобно делать с клавиатуры? На мой взгляд, сильно не хватает сочетания клавиш для поиска по сайту. Только оно должно не открывать отдельную страницу, а просто фокусировать поле ввода, которое порой нелегко найти. Пожалуй, для этой цели подойдёт сочетание Ctrl Shift F, которое в Опере до версии 9.5 как раз использовалось для перехода по ссылке с атрибутом rel="search".

Навигация по клавиатуре – более простой способ

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

:/>  Меню пуск: возможности, как открыть

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

Отобразите ссылку перехода для пользователей, использующих только клавиатуру

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

Вы можете увидеть этот эффект в действии, на таких сайтах как: webaim.org, www.w3.org, и (конечно же) www.gov.uk:

Reveal the Skip Link Only to Keyboard UsersReveal the Skip Link Only to Keyboard UsersReveal the Skip Link Only to Keyboard Users
Вы когда-нибудь видели эту ссылку раньше?

Следующий CSS является упрощённой версией кода для пропуска навигации из справочника университета штата Нью-Йорк IT Accessibility Handbook:

Когда пользователь нажимает клавишу Tab, элементу .skip-main придаётся состояние фокуса, и на экране появляется ссылка для пропуска навигации.

Вы можете быстро проверить, как это работает, если нажмёте на самую верхнюю часть демо ниже, а затем клавишу Tab. Возможно, вам будет проще, если откроете демо в полноэкранном режиме.

Полезные комбинации горячих клавиш

Теперь давайте я вам расскажу о самых необходимых, важных и действительно «горячих» клавишах. Сначала команды для работы с файлами и папками (из списка контекстного меню):

  • Ctrl A – выделение всех объектов в пределах активного окна (текста в документа);
  • Ctrl C – копирование выделенного;
  • Ctrl X – вырезание выделенного;
  • Ctrl V – вставка выделенного;
  • Ctrl N – создание нового документа или открытие нового окна в проводнике (по умолчанию «Мой компьютер»);
  • Ctrl P – печать документа;
  • Ctrl Z – отмена последнего действия.

Далее идут общие комбинации, позволяющие работать с открытыми окнами:

  • Alt Tab – переключение между открытыми окнами и приложениями;
  • Alt F6 – переключение между несколькими окнами в пределах одного открытого приложения (вкладки браузера при работе в интернете, например);
  • Win D – свернуть все окна и перейти на рабочий стол;
  • Win F – открыть окно поиска в рамках активного окна;

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

Следующие шаги

В этой статье я поделился некоторыми советами по основам доступности с клавиатуры, которые вы можете реализовать с помощью HMTL и CSS. Есть и другие, более продвинутые вещи, которые вы могли бы сделать для доступа с клавиатуры. Например, вы можете:

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

Советы для безопасного использования клавиатуры

Правильное использование клавиатуры может предотвратить боли или повреждение запястья и руки, особенно при длительном использовании компьютера.

Вот несколько советов, которые помогут предотвратить проблемы:

  • Поместите клавиатуру на уровне локтя. Ваши предплечья должны расслабленно опускаться по сторонам.
  • Расположите клавиатуру по центру перед собой. Если на клавиатуре есть отдельная группа цифровых клавиш, можно считать центральной точкой клавишу «пробел».
  • Во время ввода ваши руки и запястья должны оставаться над клавиатурой, чтобы далеко расположенные клавиши можно было доставать движением всей руки, а не вытягиванием пальцев.
  • Не кладите ладони или запястья на любую поверхность при вводе текста. Если на клавиатуре есть участок для отдыха запястий, используйте ее только во время перерывов в вводе текста.
  • Во время ввода текста нажимайте на клавиши легко, ваши запястья должны быть прямые.
  • Если вы не вводите текст, расслабьте руки.
  • Делайте короткие перерывы в работе за компьютером каждые 15-20 минут.

Три дополнительные клавиши клавиатуры

Мы уже осмотрели почти все клавиши, которыми можно воспользоваться. Но для любознательных, давайте посмотрим на три наиболее загадочные клавиши на клавиатуре: PrtScn, Scroll Lock и Pause/Break.

Оставьте комментарий

Adblock
detector