Введение
Если вы хотите повысить доступность вашего сайта, но думаете, что для этого необходимо что-то устанавливать или разбираться с каким-то сервисом, товот подборкаиз 5 инструментов, которые доступны вбраузреChrome, и с помощью которых можно быстро определить наличие проблем с доступностью.
Небольшой дисклеймер, я знаю, что многие из вас активно пользуютсяDevTools, тем не менее, я напомню, что для открытияDevToolsудобно использовать сочетание клавишCmd+Shift+ C /Ctrl+Shift+ C.
Accessibilityinspector.
Помимо DOM браузер строитAccessibilityTree(AOM,AccessibilityObjectModel) или Дерево специальных возможностей (чуть подробнее тут). СоответственноAccessibilityinspectorпозволяет просматривать информацию в этом дереве, аналогично тому, как вы просматриваете структуру DOMдевера, во вкладкеElements.
По большей части AOM содержит информацию из ARIA иroleатрибутов, именно с помощью них программы экранного доступа пытаются определить предназначение DOM элемента.
Найти этот и инструмент можно во вкладкеElements, в дополнительной вкладкеAccessibility.
Эмулятор плохого зрения.
С помощьюDevToolsвы можете понять, как видят ваш сайт
пользователи с различными нарушениями зрения.
Для того чтобы включить эмуляцию проблем со зрением
откройтеDevTools, кликните на три точки на верхней панели. В
выпадающем списке выберете менюMoretools, дальшеRendering. В низу
откроется дополнительная панель, прокрутите ее до самого конца, там
будетпукт Emulatevisiondeficiencies.
На момент написания статьиDevToolsэмулирует следующие нарушения:
-
Нечеткое зрение
-
Протанопияищи цветовая слепота (помните такие тесты в ГИБДД где среди кружочков необходимо увидеть цифру?)
-
Дейтеранопия - частичная цветовая слепота, в основном к зеленому цвету.
-
Тританопия- частичная цветовая слепота обычно в синежёлтых, фиолетовокрасных цветов.
-
Ахроматопсия илидальтонизм - полная цветовая слепота
Я думаю, очевидно, что данный список не в полной мере покрываетпроблеммысо зрением, возникающие у отдельных людей, тем не менее размещая текст на каком-то цветном фоне, стоит проверить его читабельность..
Lighthouseумеет находить очевидные проблемы на вашем сайте, в том числе и проблемы с доступностью. Поскольку в данной статье мы рассматриваем только доступность, то отключим все остальное и протестируемХабрна наличие проблем сAccessibility.
Lighthouseпроверяет такие вещи как:
-
ARIA - атрибуты
-
ROLE - атрибуты
-
Контраст
-
Langатрибуты в HTML
-
Tabindexна формах
-
Наличие описания в атрибутахalt
-
И многое другое
Если посмотреть отчет, то основные проблемы в том, что не все ссылки и кнопки подписаны, а на некоторых картинках отсутствует описание в атрибутеalt. Это значит, что незрячий пользователь будет слышать что-то вроде ссылка, кнопка,изображение, без понимания предназначения данного элемента на странице
Контрастность
Когда речь заходит о доступности контраст очень важен. Это можно понять, если применить эмуляцию не четкого зрения.
Чтобы понять, насколько элемент выделяется от фона вDevToolsесть специальный инструмент, который может проанализировать контраст определенного элемента.
Что узнатькоэфициентконтрастности какого-либо элемента необходимо открытьDevTools, затем выберете любой текстовый элемент, и найдите CSS свойствоcolor
Если посмотреть на скриншот, то можно выделить три основных показателя:
-
текущее значение контраста
-
Минимально допустимое значение контраста (АА)
-
Достаточно значение контраста (ААА)
Inspectelementtooltip
Последний инструмент в сегодняшнем списке, в целом дублирует функциивыше описанныхинструментов. И самое главное, если вы открываетеDevToolsс помощью горячих клавиш, то он сразу активен. Так же его можно активировать кликнув по кнопке спинктограммойстрелки в верхней панелиDevTools.
ВInspectelementtooltipвыводится сводная информация о выделенном элементе, в том числе общая информация по доступности.
Заключение
Готовя статью, я наткнулся на цитату, которая отлично передает мое отношение к вопросу доступности сайтов
Доступность не обязана сразу быть идеальной, она просто должна быть немного лучше, чем вчера.Леони Уотсон на FronteersConf
Спасибо за внимание, надеюсь, эти инструменты помогут вам сделать ваши проекты чуть доступнее.
