Тестирование поддержки клавиатуры с помощью средства просмотра исходного заказа

Исходный порядок документа важен для специальных возможностей и может отличаться от порядка, в котором элементы отображаются на отображаемой странице. Исходный порядок — это порядок, в котором элементы веб-страницы отображаются в исходном коде HTML. С помощью CSS можно изменить порядок элементов страницы визуальным образом, что означает, что визуальный и исходный порядок веб-страницы может отличаться.

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

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

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

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

Порядок клавиши TAB на демонстрационной странице:

1. Поле Поиск , а затем кнопка "Перейти " для поля "Поиск ".

2. Кнопка Дополнительно в разделе Кошки , чтобы перейти на веб-страницу "Кошки". Затем другие кнопки "Еще ", для собак, овец, лошадей, а затем альпаки.

3. Синие ссылки меню навигации боковой панели: Кошки, Собаки, Овцы, Лошади, а затем Альпаки.

4. Текстовое поле пожертвования в форме пожертвования.

5. Кнопки на верхней панели навигации: "Главная", "Принять домашнее животное", "Пожертвовать", "Задания", а затем " О нас".

6. Интерфейс браузера в верхней части окна.

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

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

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

Активация и использование средства просмотра исходного порядка

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

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

2. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

3. В DevTools на панели действий выберите вкладку Элементы . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты (") .

4. В инструменте Элементы справа от вкладки Стили выберите вкладку Специальные возможности .

5. В разделе Средство просмотра исходных заказов установите флажок Показать исходный заказ .

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

   

6. В дереве DOM в инструменте Элементы выберите основной элемент макета, например section элемент .

   Номера порядка табуляции теперь отображаются на дочерних элементах section , что указывает на исходный порядок различных дочерних элементов:

   

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

См. также

• Демонстрационная веб-страница тестирования читаемости