От автора: в семействе встроенного в Firefox Developer Tools пополнение. Инспектор доступности позволяет проверять сайт на работу с вспомогательными технологиями.
Введение
Как веб-разработчик, вы когда-нибудь думали, как ваш сайт выглядит на скрин ридерах для слепых? Вы не думали, почему получаете сообщения о том, что люди с ограниченными возможностями не могут пользоваться вашим веб-приложением? Или как слепой пользователь, была ли у вас ситуация, когда вы не понимали, почему скрин ридер не читает что-либо со страницы, которую вы посещали ранее? Или еще хуже, была ли у вас ситуация, когда вам выставлялись барьеры, и вы ничего не могли сделать на веб-странице?
Команда доступности рада представить новый инспектор доступности в Firefox Developer Tools. Он дополняет инструменты проверки, которые уже есть, и напрямую работает с движком доступности, который доставляет информацию на скрин ридеры и другие вспомогательные технологии. У инструмента несколько функций:
Позволяет инспектировать дерево иерархии объектов, которое было создано из информации с веб-страницы. Для каждого узла отдельное дерево дает все релевантную информацию, такую как role (что это?), name (что это делает?), states и другую информацию, которую используют вспомогательные технологии для создания подходящего представления для целевой аудитории.
Визуальная подсветка выделения внутри дерева – визуально показывает, на какой элемент ссылается этот объект.
Возможность прыгать от свойств объекта доступности прямо в инспектор HTML для проверки элемента, из которого был создан объект доступности.
Возможность прыгать от выбранного HTML элемента в инспектор HTML к соответствующему объекту доступности для проверки его свойств.
Элемент контекстного меню в главном браузере, позволяющий инспектировать доступность элемента. Это откроет инспектор доступности, где будет выбран соответствующий узел, и будут видны его свойства.
Как и скрин ридеры, инструмент доступен для мыши, клавиатуры и вспомогательных технологий.
Где скачать?
Полностью функциональный инспектор вышел 11 апреля 2018 в Firefox Nightly build и появится в Firefox 61 (бета в мае). Релиз в июне 2018. Можете скачать Nightly build на десктоп и попробовать или дождаться беты и dev edition в мае.
Как это работает?
Сперва включите
Сейчас инспектор нужно включить вручную, чтобы он появился в блоке с инструментами. Перейдите в Settings And Feedback menu button в Developer Toolbox, выберите Settings, с помощью Tab перейдите к чекбоксу Accessibility. Нажмите пробел для выделения. Это добавить инспектор в блок инструментов и включить соответствующие пункты контекстного меню.
Включите движок
Если вы используете скрин ридер или другие вспомогательные технологии в Firefox по умолчанию, то следующий шаг можно пропустить. Всем остальным необходимо включить движок.
Перейдите на панель Accessibility. Там есть кнопка, включающая доступность. Для проверки веб-страниц ее необходимо активировать.
Инспектируйте элементы
После включения загрузите любую страницу, кликните правой кнопкой мыши на элементе, чтобы проверить его доступность. В контекстном меню теперь есть пункт Inspect Accessibility.
Откроется инспектор доступности, где будет выделен узел, соответствующий выбранному элементу. Здесь можно просмотреть или прослушать информацию. С помощью tab переключитесь на другую панель и с помощью стрелок вверх и вниз перемещайтесь по информации (name, role, description, states). Некоторые из них можно раскрыть, например, states, actions и attributes. С помощью Shift-tab вернитесь к дереву объектов и выберите другое дерево. Или сфокусируйте элемент DOM Node и нажмите enter, чтобы перейти в инспектор HTML дерева и уже там проверить HTML элемент и его соседей.
Если у вас есть зрение, вы можете перемещаться по дереву объектов доступности, а визуальная подсветка будет показывать, какой элемент соответствует этому объекту.
Поработали – выключите движок
Если обычно вы не используете вспомогательные технологии в Firefox, после проверки вы, наверное, захотите выключить движок доступности. Это можно сделать с помощью той кнопки, которая его включает.
Если вы пользуетесь скрин ридерами или другими вспомогательными технологиями, не беспокойтесь. Если инспектор видит, что доступность уже работала, когда он был запущен, инспектор не позволит выключить движок. Т.е. никто внезапно не отберет у вас доступность.
Чем не является инспектор
Инспектор не является инструментом оценки. Это инспектор. Он не подскажет вам о низком коэффициенте контрастности, вы не посмотрите там совместимость с WCAG. Он помогает инспектировать код, помогает понять, как сайт переводится в объекты для вспомогательных технологий. Это хороший инструмент для подготовки к другим инструментам Axe, Tenon.io, Colour Contrast Analyzer и любым другим, которые вы хотите использовать для реальной оценки доступности сайта.
Пример
Например, вам попалась такая немного сломанная форма (откройте в новой вкладке):
<html><head><title>Testing a broken form</title></head> <body> <form action="post"> <label>E-mail address:</label><input id="email" type="email" /><br /> <label>Password:</label><input type="password" id="pw" /><br /> <input type="submit"/><input type="reset"/> </form> </body> </html>
Кто разбирается в доступности, быстро заметят 2 ошибки. Откройте эту страницу в новой вкладке. Сфокусируйтесь на первом поле, вызовите контекстное меню и выберите Inspect Accessibility.
Откроется инспектор. При проверке свойств объекта вы заметите, что для name указано null. Null – не хорошо. Это значит, что ничего не представлено. То есть скрин ридер не сможет автоматически определить назначение поля. Есть лейбл, но он неправильно привязан к полю.
Объект лейбла расположен прямо над полем ввода. Выберите его и перейдите к элементу DOM Node в свойствах и нажмите enter.
Откроется инспектор HTML с выделенным элементом label. Для привязки лейбла к полю ввода необходимо добавить атрибут for для лейбла, а в качестве значения указать ID поля ввода. Для этого:
Нажмите enter для входа в режим редактирования элемента
С помощью tab перейдите к Add New Attribute и нажмите пробел
Введите for=”email” и нажмите enter для сохранения
Для выхода из режима редактирования и возврата к дереву нажмите escape
С помощью стрелки вниз перейдите к полю ввода, нажмите клавишу контекстного меню и выберите Inspect Accessibility Properties. Вам вернет в свойства поля ввода в Accessibility Inspector. Теперь name сменилось с null на «E-mail address:» — именно то, что нам нужно.
Поправьте сами поле пароля! Не забывайте, что вышеописанные действия не сохранят изменения в ваш файл. Изменения необходимо применить отдельно, после чего можно перезагрузить Firefox и проверить решение проблем.
Заметка о клике правой кнопкой мыши на элементе
В примере выше и описании я специально сказал, что на веб-странице необходимо использовать клик правой кнопкой мыши, а не клавишу контекстного меню. Причина в том, что клавиша контекстного меню работает только на элементах, которые могут получить фокус. На узлах и текстовых элементах она не работает. Даже если вы пользователь скрин ридера, используйте эмуляцию мыши для перемещения указателя мыши на элемент, который необходимо проинспектировать. Нажатие правой кнопки мыши также необходимо эмулировать. Если не знаете, как это сделать, обратитесь к документации вашего скрин ридера.
Надеемся, в будущем решение будет лучше.
Автор: Marco
Источник: https://www.marcozehe.de/
Редакция: Команда webformyself.