5 accessibility инструментов в Chrome DevTools

Введение

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

Небольшой дисклеймер, я знаю, что многие из вас активно пользуются DevTools, тем не менее, я напомню, что для открытия DevTools удобно использовать сочетание клавиш Cmd + Shift + C / Ctrl + Shift + C.

Accessibility inspector. 

Помимо DOM браузер строит Accessibility Tree (AOM, Accessibility Object Model) или Дерево специальных возможностей (чуть подробнее тут). Соответственно Accessibility inspector позволяет просматривать информацию в этом дереве, аналогично тому, как вы просматриваете структуру DOM девера, во вкладке Elements. 

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

Найти этот и инструмент можно во вкладке Elements, в дополнительной вкладке Accessibility. 

Эмулятор плохого зрения. 

С помощью DevTools вы можете понять, как видят ваш сайт пользователи с различными нарушениями зрения. 
 
Для того чтобы включить эмуляцию проблем со зрением откройте DevTools, кликните на три точки на верхней панели. В выпадающем списке выберете меню More tools, дальше Rendering. В низу откроется дополнительная панель, прокрутите ее до самого конца, там будет пукт  “Emulate vision deficiencies”. 

На момент написания статьи DevTools эмулирует следующие нарушения: 

• Нечеткое зрение  

• Протанопия ищи цветовая слепота (помните такие тесты в ГИБДД где среди кружочков необходимо увидеть цифру?) 

• Дейтеранопия  — частичная цветовая слепота, в основном к зеленому цвету. 

• Тританопия — частичная цветовая слепота обычно в сине–жёлтых, фиолетово–красных цветов. 

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

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

Lighthouse умеет находить очевидные проблемы на вашем сайте, в том числе и проблемы с доступностью. Поскольку в данной статье мы рассматриваем только доступность, то отключим все остальное и протестируем Хабр на наличие проблем с Accessibility. 

Lighthouse проверяет такие вещи как: 

• ARIA — атрибуты 

• ROLE — атрибуты 

• Контраст 

• Lang атрибуты в HTML 

• Tabindex на формах 

• Наличие описания в атрибутах alt 

• И многое другое 

Если посмотреть отчет, то основные проблемы в том, что не все ссылки и кнопки подписаны, а на некоторых картинках отсутствует описание в атрибуте alt. Это значит, что незрячий пользователь будет слышать что-то вроде “ссылка”, “ кнопка”, “изображение”, без понимания предназначения данного элемента на странице 

Контрастность

Когда речь заходит о доступности контраст очень важен. Это можно понять, если применить эмуляцию не четкого зрения.  

Чтобы понять, насколько элемент выделяется от фона в DevTools есть специальный инструмент, который может проанализировать контраст определенного элемента.  

Что узнать коэфициент контрастности какого-либо элемента необходимо открыть DevTools, затем выберете любой текстовый элемент, и найдите CSS свойство color

Если посмотреть на скриншот, то можно выделить три основных показателя: 

• текущее значение контраста 

• Минимально допустимое значение контраста (АА) 

• Достаточно значение контраста (ААА) 

Inspect element tooltip 

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

В Inspect element tooltip выводится сводная информация о выделенном элементе, в том числе общая информация по доступности. 

Заключение

Готовя статью, я наткнулся на цитату, которая отлично передает мое отношение к вопросу доступности сайтов  

Доступность не обязана сразу быть идеальной, она просто должна быть немного лучше, чем вчера.– Леони Уотсон на FronteersConf

Спасибо за внимание, надеюсь, эти инструменты помогут вам сделать ваши проекты чуть доступнее.