Проверка поддержки клавиатуры с помощью клавиш TAB и ВВОД

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

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

Вы можете проверить удобство использования веб-страницы для пользователей клавиатуры несколькими способами:

Проверка веб-страницы на наличие проблем со специальными возможностями клавиатуры

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

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

  2. Используйте клавиатуру для перемещения по демонстрационной документации, используя клавиши TAB или SHIFT+TAB для перехода от элемента к элементу. На демонстрационной веб-странице клавиша TAB сначала перемещает фокус на форму поиска в header разделе.

  3. Нажмите клавишу TAB , чтобы разместить фокус на кнопке, а затем нажмите клавишу ВВОД , чтобы щелкнуть кнопку фокусировки. Например, на демонстрационной странице нажмите клавишу TAB , чтобы поместить фокус в поле Поиск , а затем нажмите клавишу ВВОД , чтобы отправить поиск. Такой подход приводит к тому же результату, что и при нажатии кнопки "Перейти ". Нажатие кнопки ВВОД для отправки формы поиска работает правильно.

  4. Нажмите клавишу TAB еще раз. Следующий элемент, на который вы сосредоточите внимание, — это первая ссылка Дополнительно в content разделе веб-страницы, как показано в структуре:

    Навигация по документу с помощью клавиатуры и клавиши TAB. Фокус отображается по ссылке в документе

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

  6. Обратите внимание на URL-адрес в левом нижнем углу. Если вы посмотрите в левую нижнюю часть экрана (или используете средство чтения с экрана), вы поймете, что находитесь в меню навигации на боковой панели с синими ссылками, так как в браузере отображается URL-адрес, на который указывает ссылка "Кошки" (#cats).

    Отсутствие стиля фокусировки делает невозможным узнать, где вы сейчас находитесь в документе. Единственное указание — отображение целевого объекта ссылки в левом нижнем углу экрана.

  7. Нажмите клавишу TAB еще раз, чтобы добраться до поля ввода в форме пожертвования. Однако вы не можете щелкнуть кнопки над текстовым полем, нажав клавишу TAB. Вы не можете использовать клавиатуру, чтобы сосредоточиться на 50, 100 или 200 кнопках, а затем выбрать их. Кроме того, при выборе параметра Ввод форма пожертвования не отправляется.

    Единственный доступный с клавиатуры элемент в форме пожертвования — это поле ввода текста.

  8. При повторном выборе вкладки фокус будет сделан на верхней панели навигации страницы с кнопками меню для домой, Принять домашнее животное, Пожертвовать, Задания и О нас. Нажмите клавиши TAB или SHIFT+TAB , чтобы поместить фокус на кнопку меню, как показано в контуре фокуса. Затем нажмите клавишу ВВОД , чтобы открыть этот раздел веб-страницы.

    Меню main имеет выделение и контур фокуса, и, следовательно, доступно с клавиатуры

Обнаруженные проблемы, которые необходимо устранить

На основе приведенного выше пошагового руководства мы обнаружили следующие проблемы, которые необходимо устранить: