[Google Chrome, Accessibility] 5 accessibility инструментов в Chrome DevTools
Автор
Сообщение
news_bot ®
Стаж: 6 лет 4 месяца
Сообщений: 27286
ВведениеЕсли вы хотите повысить доступность вашего сайта, но думаете, что для этого необходимо что-то устанавливать или разбираться с каким-то сервисом, то вот подборка из 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. 
Accessibility inspector в DevToolsЭмулятор плохого зрения. С помощью DevTools вы можете понять, как видят ваш сайт пользователи с различными нарушениями зрения.
Для того чтобы включить эмуляцию проблем со зрением откройте DevTools, кликните на три точки на верхней панели. В выпадающем списке выберете меню More tools, дальше Rendering. В низу откроется дополнительная панель, прокрутите ее до самого конца, там будет пукт “Emulate vision deficiencies”. 
Результат работы эмулятора плохого зренияНа момент написания статьи DevTools эмулирует следующие нарушения:
- Нечеткое зрение
- Протанопия ищи цветовая слепота (помните такие тесты в ГИБДД где среди кружочков необходимо увидеть цифру?)
- Дейтеранопия - частичная цветовая слепота, в основном к зеленому цвету.
- Тританопия - частичная цветовая слепота обычно в сине–жёлтых, фиолетово–красных цветов.
- Ахроматопсия или дальтонизм - полная цветовая слепота
Я думаю, очевидно, что данный список не в полной мере покрывает проблеммы со зрением, возникающие у отдельных людей, тем не менее размещая текст на каком-то цветном фоне, стоит проверить его читабельность. . Lighthouse умеет находить очевидные проблемы на вашем сайте, в том числе и проблемы с доступностью. Поскольку в данной статье мы рассматриваем только доступность, то отключим все остальное и протестируем Хабр на наличие проблем с Accessibility. 
Настройка и результат работы Lighthouse на сайте habr.comLighthouse проверяет такие вещи как:
- ARIA - атрибуты
- ROLE - атрибуты
- Контраст
- Lang атрибуты в HTML
- Tabindex на формах
- Наличие описания в атрибутах alt
- И многое другое
Если посмотреть отчет, то основные проблемы в том, что не все ссылки и кнопки подписаны, а на некоторых картинках отсутствует описание в атрибуте alt. Это значит, что незрячий пользователь будет слышать что-то вроде “ссылка”, “ кнопка”, “изображение”, без понимания предназначения данного элемента на странице КонтрастностьКогда речь заходит о доступности контраст очень важен. Это можно понять, если применить эмуляцию не четкого зрения. Чтобы понять, насколько элемент выделяется от фона в DevTools есть специальный инструмент, который может проанализировать контраст определенного элемента. Что узнать коэфициент контрастности какого-либо элемента необходимо открыть DevTools, затем выберете любой текстовый элемент, и найдите CSS свойство color
Инструмент измерения контрастности в DevToolsЕсли посмотреть на скриншот, то можно выделить три основных показателя:
- текущее значение контраста
- Минимально допустимое значение контраста (АА)
- Достаточно значение контраста (ААА)
Inspect element tooltip Последний инструмент в сегодняшнем списке, в целом дублирует функции выше описанных инструментов. И самое главное, если вы открываете DevTools с помощью горячих клавиш, то он сразу активен. Так же его можно активировать кликнув по кнопке с пинктограммой стрелки в верхней панели DevTools. 
Inspect element tooltip В Inspect element tooltip выводится сводная информация о выделенном элементе, в том числе общая информация по доступности. ЗаключениеГотовя статью, я наткнулся на цитату, которая отлично передает мое отношение к вопросу доступности сайтов
Доступность не обязана сразу быть идеальной, она просто должна быть немного лучше, чем вчера.– Леони Уотсон на FronteersConf
Спасибо за внимание, надеюсь, эти инструменты помогут вам сделать ваши проекты чуть доступнее.
===========
Источник:
habr.com
===========
Похожие новости:
- [Производство и разработка электроники, Периферия, Звук] В поисках закрытого ящика или почему исчезает целый класс акустических систем
- [JavaScript, Программирование, Node.JS, Rust] Обнаружение лиц в Node.js с использованием Rust и WebAssembly (перевод)
- [JavaScript, Программирование, Учебный процесс в IT, Карьера в IT-индустрии] Веб-тренажёр Яндекс.Практикума. Как всё устроено
- [Промышленное программирование, Разработка робототехники, Программирование микроконтроллеров, Разработка под Arduino, Производство и разработка электроники] Портирование ModBus Slave RTU/ASCII на IAR AVR v3
- [Анализ и проектирование систем, Программирование микроконтроллеров, Управление проектами, Производство и разработка электроники, Транспорт] Опыт разработки системы управления для железнодорожной техники на отечественных микроконтроллерах
- [Разработка веб-сайтов, Разработка под e-commerce, Управление e-commerce, Бизнес-модели, IT-компании] Организация маркетплейса
- [Разработка веб-сайтов, Разработка под e-commerce, Управление e-commerce, Бизнес-модели, IT-компании] Архитектура маркетплейса
- [Python, GitHub, Машинное обучение, Читальный зал, Natural Language Processing] Ваш pet-project будет доволен. Как вдохнуть жизнь в свои наработки
- [Google Chrome] Google продляет поддержку Chrome для Windows 7 на шесть месяцев
- [Разработка под Android, Учебный процесс в IT, Карьера в IT-индустрии] Я месяц провел в MIT и понял — даже софтверным инженерам не стоит забывать про паяльник
Теги для поиска: #_google_chrome, #_accessibility, #_chrome_devtools, #_accessibility, #_web, #_razrabotka (разработка), #_brauzery (браузеры), #_dostupnost (доступность), #_google_chrome, #_accessibility
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 04-Июл 15:23
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 4 месяца |
|
|
ВведениеЕсли вы хотите повысить доступность вашего сайта, но думаете, что для этого необходимо что-то устанавливать или разбираться с каким-то сервисом, то вот подборка из 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.  Accessibility inspector в DevToolsЭмулятор плохого зрения. С помощью DevTools вы можете понять, как видят ваш сайт пользователи с различными нарушениями зрения. Для того чтобы включить эмуляцию проблем со зрением откройте DevTools, кликните на три точки на верхней панели. В выпадающем списке выберете меню More tools, дальше Rendering. В низу откроется дополнительная панель, прокрутите ее до самого конца, там будет пукт “Emulate vision deficiencies”.  Результат работы эмулятора плохого зренияНа момент написания статьи DevTools эмулирует следующие нарушения:
 Настройка и результат работы Lighthouse на сайте habr.comLighthouse проверяет такие вещи как:
 Инструмент измерения контрастности в DevToolsЕсли посмотреть на скриншот, то можно выделить три основных показателя:
 Inspect element tooltip В Inspect element tooltip выводится сводная информация о выделенном элементе, в том числе общая информация по доступности. ЗаключениеГотовя статью, я наткнулся на цитату, которая отлично передает мое отношение к вопросу доступности сайтов Доступность не обязана сразу быть идеальной, она просто должна быть немного лучше, чем вчера.– Леони Уотсон на FronteersConf
=========== Источник: habr.com =========== Похожие новости:
|
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 04-Июл 15:23
Часовой пояс: UTC + 5