Анализ отсутствия индикации фокуса клавиатуры

  • Статья

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

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

Демонстрационная веб-страница со ссылками на кошки, но без визуального указания фокуса

Анализ отсутствия индикации фокуса с помощью средства "Источники"

Чтобы узнать, какие стили CSS применяются к ссылке, например связанную кнопку, используйте средство Источники :

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

  2. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите пункт Проверить. Или нажмите клавишу F12. DevTools откроется рядом с веб-страницей.

  3. Нажмите кнопку Проверить (значок проверки) в левом верхнем углу средства разработки, чтобы кнопка была выделена (синяя).

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

    Наложение средства

    Но наложение "Проверка" не показывает, что элемент не имеет визуального указания, когда ссылка имеет фокус.

  5. На отрисоченной веб-странице нажмите кнопку Кошки .

    Средство "Проверка " отключается, и откроется средство "Элементы ", выделяющее a узел в дереве DOM. Правило #sidebar nav li a CSS отображается на вкладке Стили вместе со ссылкой на номер строки в styles.css:

    Инструмент

  6. Щелкните ссылку styles.css . CSS-файл откроется в средстве "Источники ":

    Стили, применяемые к ссылке в средстве

    Обратите внимание, что #sidebar nav li a правило CSS имеет параметр outline: noneсвойства CSS , который удаляет контур, который браузеры автоматически добавляют при фокусе ссылок с помощью клавиатуры.

    CSS-файл содержит правило CSS, использующее :hover псевдокласс, который используется для указания пункта меню, на котором вы находитесь при использовании мыши: #sidebar nav li a:hover. Однако CSS-файл не содержит правило CSS, использующее :focus псевдокласс, например #sidebar nav li a:focus. Это означает, что стили CSS не используются для визуального указания пункта меню, на котором вы работаете при использовании клавиатуры.

    Свойства outline:none и стили :hover

Имитация состояния фокуса с помощью области Стили

Вместо фокусировки по ссылке с помощью клавиатуры можно имитировать состояние фокуса с помощью области Стили :

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

  2. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите пункт Проверить.

  3. Нажмите кнопку Проверить (значок проверки) в левом верхнем углу devTools, а затем щелкните ссылку Кошки на отрисоченной веб-странице. Узел <a href="#cats">Cats</a> выделен в инструменте Элементы .

  4. В области Стили нажмите кнопку Переключить состояние элемента (:hov). Откроется раздел Состояние элемента Force .

  5. :focus Установите флажок. Состояние фокуса применяется к ссылке, но ссылка не имеет визуального указания фокуса:

    Связь

См. также