От автора: мониторинг доступности сайта осуществляется с помощью средств для доступа к важной информации, предоставляемой вспомогательным технологиям на текущей странице, через дерево доступности, позволяя вам проверить, что отсутствует или иным образом требует внимания. В этой статье вы узнаете основные функции инспектора доступности и способы его использования.
(очень) краткое руководство по доступности
Доступность — это практика, позволяющая использовать ваши сайты как можно большему числу людей. Это означает, что вы стараетесь изо всех сил не блокировать кого-либо из доступа к информации из-за какой-либо инвалидности, которую они могут иметь, или любых других личных обстоятельств, таких как используемое устройство, скорости их сетевого подключения или их географического местоположения или местность.
Здесь мы в основном говорим о том, чтобы обнародовать информацию людям с нарушениями зрения — это делается с помощью API доступности, доступных внутри веб-браузеров, которые раскрывают информацию о том, какие роли играют разные элементы на вашей странице (например, просто текст или кнопки, ссылки, элементы формы и т. д.?).
Семантические элементы DOM имеют роли, назначенные им по умолчанию, которые намекают на то, что их цель. Иногда, однако, вам нужно использовать некоторую не семантическую разметку (например, div) для создания сложного настраиваемого элемента управления, а элемент управления не будет иметь роль по умолчанию, которая отражает его назначение. В такой ситуации вы можете использовать атрибуты роли WAI-ARIA для предоставления своих собственных ролей.
Роли и другая информация, предоставляемая API-интерфейсами браузера, представлена в иерархической структуре, называемой деревом доступности. Это немного похоже на дерево DOM, за исключением того, что оно содержит более ограниченный набор элементов и немного другую информацию о них.
Вспомогательные технологии, такие как скрин ридеры, используют эту информацию, чтобы узнать, что находится на веб-странице, сообщить своим пользователям, что там, и позволить им взаимодействовать со страницей. Инспектор доступности также использует эту информацию для обеспечения возможностей для отладки доступности в DevTools.
Доступ к инспектору доступности
Инспектор доступности (с Firefox 61) по умолчанию не отображается в DevTools. Чтобы включить его, вам нужно перейти к настройкам DevTools (нажмите F1 или перейдите в меню «Три точки» и выберите «Настройки» ) и установите флажок «Доступность» под заголовком «Инструменты разработчика по умолчанию» . Это приведет к тому, что вкладка «Доступность» появится на главном экране DevTools, на который можно щелкнуть, чтобы отобразить панель доступности:
Первоначально функции доступности DevTools отключены (если вы уже не включили их на другой вкладке браузера или не запустили механизм доступности Firefox), например, вы можете быть пользователем или тестером экрана. Это связано с тем, что механизм доступности работает в фоновом режиме при включении функций доступности. Пока он работает, он замедляет работу и занимает память; поэтому он мешает метрикам других панелей, таких как память и производительность, а также общая производительность браузера. По этой причине вы должны отключить его, когда вы его специально не используете.
Вы можете включить функции, используя кнопку «Включить функции доступности».
Как только содержимое панели загрузится, вы можете снова отключить ее, нажав кнопку «Отключить функции доступности», которая находится в верхнем левом углу, если только у вас нет механизма доступности, который работал ранее для работы с программой чтения с экрана, и в этом случае эта кнопка будет отменена.
Примечание. Если вы используете функции доступности на нескольких вкладках, их включение на одной вкладке отключает их во всех вкладках.
Особенности панели «Доступность»
Панель с включенной доступностью выглядит так:
С левой стороны есть древовидная диаграмма, представляющая все элементы дерева доступности для текущей страницы. У предметов с вложенными детьми есть стрелки, которые можно щелкнуть, чтобы показать детей, чтобы вы могли глубже проникнуть в иерархию. Каждый элемент имеет два свойства:
Роль — роль, которую этот элемент имеет на странице (например, pushbutton или footer). Это может быть либо роль по умолчанию, предоставляемая браузером, либо роль, предоставляемая ему с помощью атрибута role WAI-ARIA.
Имя — имя, которое этот элемент имеет на странице. Откуда это происходит, зависит от элемента; например, имя большинства текстовых элементов — это просто их textContent, тогда как имена элементов формы — это содержимое их ассоциированной label.
С правой стороны вы можете увидеть дополнительную информацию о текущем выбранном элементе. Перечисленные свойства следующие:
name — имя элемента, как описано выше.
role — роль элемента, как описано выше.
actions — список действий, которые могут быть выполнены над элементом, например, кнопка имела бы «Press», а ссылка имела бы «Jump».
value — значение элемента. Это может означать разные вещи в зависимости от типа предмета; например, ввод формы (role: entry) будет иметь значение того, что вводится во входном файле, тогда как значение ссылки будет URL-адресом в соответствующем href элемента <a>.
DOMNode — тип узла DOM, который представляет элемент в дереве доступности. Вы можете щелкнуть по значку «цель», который появляется после него, чтобы выбрать узел в «Инспекторе страниц». Наведение курсора на значок «цель» подчеркивает узел DOM в содержимом страницы.
Description — любое дополнительное описание, представленное на элементе, обычно по содержанию атрибута title.
help — это не реализовано в Gecko, поэтому оно всегда возвращает пустую строку. Это будет удалено из инспектора в Firefox 62 ( баг 1467643 ).
keyboardShortcut — любая комбинация клавиш, доступная для активации элемента, как указано в accessKey. Обратите внимание, что это работает правильно с Firefox 62 ( баг 1467381).
childCount — количество дочерних элементов, которые текущий элемент имеет в иерархии дерева доступности.
indexInParent — значение индекса, указывающее, какое число дочерний элемент находится внутри его родителя. Если элемент является первым элементом внутри его родителя, он имеет значение 0. Если оно второе, оно имеет значение 1. И так далее.
state — список различных состояний, имеющих отношение к доступности, которые могут применяться к текущему элементу. Например, одна из ссылок в одном демо содержит состояния сфокусированного, связанного, выбираемого текста, непрозрачного, разрешенного и чувствительного. Полный список внутренних состояний см. в состояниях Gecko.
attributes — список всех атрибутов, относящихся к доступности, которые применяются к элементу. Это может включать атрибуты, связанные со стилем, такие как margin-left и text-indent, а также другие полезные состояния для информации о доступности, такие как draggable и level (например, какой уровень заголовка в случае заголовков). Полный список возможных атрибутов см. в атрибутах объекта Gecko.
Примечание. Открытая информация одинакова на всех платформах — инспектор предоставляет дерево доступности Gecko, а не информацию из уровня доступности платформы.
Управление клавиатурой
Вкладка «Доступность» полностью доступна для клавиатуры:
Вы можете войти между кнопкой «Отключить доступность» и левой и правой панелями.
Когда одна из панелей сфокусирована, вы можете перемещать фокус вверх и вниз с помощью клавиш со стрелками вверх и вниз и использовать клавиши со стрелками влево и вправо, чтобы развернуть и свернуть расширяемые строки (например, разные уровни иерархии дерева доступности)
Известные связанные функции
Когда функции доступности включены, в DevTools имеется ряд полезных дополнительных функций, которые подробно описаны ниже:
Параметры контекстного меню
Добавлена опция дополнительного контекстного меню, как для общего контекстного меню на веб-странице при нажатии правой кнопки / Ctrl + на пользовательский интерфейс, так и на панели HTML инспектора страницы, когда правый / Ctrl + щелчок по элементу DOM:
Когда вы выбираете параметры контекстного меню «Свойства специальных возможностей / Показать параметры доступности», вкладка «Доступность» немедленно открывается, чтобы отобразить соответствующий элемент дерева доступности и его свойства.
Примечание. Некоторые элементы DOM не имеют свойств доступности. В этом случае элемент контекстного меню «Свойства специальных возможностей / Показать параметры доступности» неактивен.
Выделение элементов пользовательского интерфейса
На вкладке «Доступность», когда мышь наводится на элементы доступности, вы можете увидеть полупрозрачную подсветку на элементах пользовательского интерфейса, к которым они относятся, если это необходимо. Это полезно для определения того, как элементы дерева доступности относятся к элементам пользовательского интерфейса на фактической странице.
Выбор доступности
Подобным образом, когда вы выбираете кнопку выбора вкладки «Доступность», вы можете навести курсор и выбрать элементы пользовательского интерфейса на текущей странице, а соответствующий доступный объект будет выделен в дереве доступности.
Средство выбора вкладки доступности отличается от небольшого элемента панели HTML «Инспектор страниц», как показано ниже:
Когда вы «выполняете выбор», вы видите объект доступности, выделенный в дереве доступности, и затем сборщик деактивируется. Обратите внимание, однако, что если вы удерживаете клавишу Shift в «выполнении выбора», вы можете «просмотреть» объект доступности в дереве (и его свойства в правой панели), но затем продолжить сбор столько раз, сколько вам нравится (сборщик не отменяется), пока вы не отпустите клавишу Shift.
Когда сборщик активирован, вы также можете отключить его, нажав кнопку выбора во второй раз или нажав клавишу Esc.
Типичные варианты использования
Инспектор доступности очень полезен для быстрого выявления проблем доступности. Для начала вы можете исследовать элементы, которые не имеют надлежащего текстового эквивалента — изображения без alt text и элементов формы без соответствующих меток имеют свойство имени null, например.
Это также очень удобно для проверки семантики — вы можете использовать опцию контекстного меню «Свойства специальных возможностей», чтобы быстро увидеть, установлен ли на ней определенный набор роли (например, кнопка на самом деле является кнопкой, или действительно ли ссылка является ссылка).
Источник: https://developer.mozilla.org/
Редакция: Команда webformyself.