Проверка поддержки клавиатуры и средства чтения с экрана в дереве специальных возможностей
Несколько функций DevTools проверка для поддержки клавиатуры и средства чтения с экрана. Использование средства проверки для проверка специальных возможностей каждого элемента страницы по отдельности может занять довольно много времени. Альтернативный способ проверка веб-страницы — использовать дерево специальных возможностей. Дерево специальных возможностей указывает, какие сведения на странице предоставляются для специальных возможностей, таких как средства чтения с экрана.
Дерево специальных возможностей — это подмножество дерева DOM, которое содержит элементы из дерева DOM, которые являются актуальными и полезными для отображения содержимого страницы в средстве чтения с экрана. Дерево специальных возможностей находится на вкладке Специальные возможности инструмента Элементы (рядом с вкладкой Стили).
Чтобы изучить с помощью дерева специальных возможностей, выполните следующие действия:
Откройте демонстрационную веб-страницу тестирования специальных возможностей в новом окне или вкладке.
Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.
Нажмите кнопку Проверить (
) в левом верхнем углу средства разработки, чтобы кнопка была выделена (синяя).На отображаемой веб-странице в разделе Пожертвование наведите указатель мыши на кнопку 100 . Появится наложение средства "Проверка ".
На отображаемой веб-странице нажмите кнопку 100 . В средствах разработки отображается инструмент Элементы . В дереве DOM отображается
<div class="donationbutton">100</div>элемент для кнопки 100 . На панели Стили отображаются правила CSS, применяемые к элементу .
Справа от вкладки Стили выберите вкладку Специальные возможности . Отобразится дерево специальных возможностей для элемента и будет развернуто:
Любой элемент в дереве, который не имеет имени или имеет роль generic (например, элемент), является проблемой, так как <div class="donationbutton">100</div> этот элемент будет недоступен для пользователей клавиатуры или пользователей, использующих специальные возможности.