Тестирование поддержки клавиатуры с помощью средства просмотра исходного заказа
Исходный порядок документа важен для специальных возможностей и может отличаться от порядка, в котором элементы отображаются на отображаемой странице. Исходный порядок — это порядок, в котором элементы веб-страницы отображаются в исходном коде HTML. С помощью CSS можно изменить порядок элементов страницы визуальным образом, что означает, что визуальный и исходный порядок веб-страницы может отличаться.
Специальные возможности, такие как средства чтения с экрана, обычно следуют исходному порядку и игнорируют визуальный порядок элементов на веб-странице.
Чтобы убедиться, что документ имеет логический порядок, независимо от того, используется ли он со специальными возможностями, используйте средство просмотра исходного порядка , чтобы помечать различные элементы страницы числами, указывающими порядок в исходном коде документа. Средство просмотра исходного порядка находится на вкладке Специальные возможности (рядом с вкладкой Стили).
Анализ порядка доступа с клавиатуры через разделы страницы
Демонстрационная веб-страница для тестирования специальных возможностей имеет обратный порядок табуляции, где пользователи клавиатуры получают доступ к меню навигации на боковой панели только после перехода на вкладку по всем ссылкам Дополнительно . Меню навигации на боковой панели предназначено для быстрого доступа к содержимому страницы. Но так как вам нужно пройти всю страницу, прежде чем перейти к меню навигации на боковой панели, это меню навигации неэффективно для пользователей клавиатуры.
Порядок клавиши TAB на демонстрационной странице:
Поле Поиск , а затем кнопка "Перейти " для поля "Поиск ".
Кнопка Дополнительно в разделе Кошки , чтобы перейти на веб-страницу "Кошки". Затем другие кнопки "Еще ", для собак, овец, лошадей, а затем альпаки.
Синие ссылки меню навигации боковой панели: Кошки, Собаки, Овцы, Лошади, а затем Альпаки.
Текстовое поле пожертвования в форме пожертвования.
Кнопки на верхней панели навигации: "Главная", "Принять домашнее животное", "Пожертвовать", "Задания", а затем " О нас".
Интерфейс браузера в верхней части окна.
Причина путаницы в порядке клавиши TAB заключается в том, что порядок при использовании клавиатуры определяется исходным порядком документа. Заказ с помощью клавиатуры можно изменить с помощью атрибута tabindex для элементов, который извлекает этот элемент из исходного порядка.
В исходном коде документа меню навигации на боковой панели отображается после main содержимого веб-страницы. CSS использовался для размещения меню навигации на боковой панели над большинством main содержимого веб-страницы.
Вы можете проверить порядок элементов страницы с помощью средства просмотра исходного порядка на вкладке Специальные возможности .
Активация и использование средства просмотра исходного порядка
Чтобы активировать и использовать средство просмотра исходных заказов с демонстрационной страницей, выполните следующие действия:
Откройте демонстрационную веб-страницу тестирования специальных возможностей в новом окне или вкладке.
Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.
В DevTools на панели действий выберите вкладку Элементы . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты (
") .В инструменте Элементы справа от вкладки Стили выберите вкладку Специальные возможности .
В разделе Средство просмотра исходных заказов установите флажок Показать исходный заказ .
На отображаемой веб-странице отображаются числа, указывающие порядок табуляции , контролируемый порядком строк кода в исходном файле:
В дереве DOM в инструменте Элементы выберите основной элемент макета, например
sectionэлемент .Номера порядка табуляции теперь отображаются на дочерних элементах
section, что указывает на исходный порядок различных дочерних элементов:
Прокрутите страницу, чтобы увидеть все числа и проверка, как исходный порядок различных элементов отличается от визуального порядка элементов.