Как создавать доступные веб-приложения для дальтоников с помощью Chrome DevTools

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

По данным сайта colourblindawareness.org примерно у 1 из 12 мужчин (8%) и у 1 из 200 женщин (0,5%) в мире нарушено восприятие цветов.

JavaMentor
JavaMentor

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

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

Дальтонизм

Дальтонизм или нарушение цветового зрения выражается в частичной или полной неспособности человека различать все или некоторые цвета. Люди с нормальным зрением различают более 100 оттенков, тогда как люди, страдающие дальтонизмом, могут видеть только 20.

Текст с низкой контрастностью больше всего осложняет использование интернета людям с такой патологией.

Согласно анализу одного миллиона веб-сайтов, проведенного WebAim, содержание более 86% домашних страниц плохо различимо. В среднем на каждую приходится 36 случаев текста с низкой контрастностью.

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

1. Панель CSS Overview

Эта экспериментальная функция в Chrome DevTools обеспечивает обзор CSS сайта, включая цвета и шрифты, используемые на странице, медиа-запросы и неиспользуемые объявления.

Панель CSS Overview

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

2. Подсказка в режиме проверки

DevTools отображает развернутую всплывающую подсказку, содержащую важную информацию в режиме проверки: сведения о шрифте, коэффициент контрастности и размеры блочной модели.

Подсказка в режиме проверки

Согласно руководству по обеспечению доступности веб-контента (WCAG) 2.0 существует три уровня соответствия для разных ситуаций:

  • уровень A (минимальное соответствие);
  • уровень AA (приемлемое соответствие);
  • уровень AAA (оптимальное соответствие).

Уровень соответствия АА чаще всего указывается во всех нормах. Его достаточно, чтобы сделать сайт доступным для любого человека с ограниченными возможностями или без. Хотя уровень ААА позволяет создать аналогичный опыт работы в интернете почти для всех пользователей, организация W3C заявляет следующее:

«Мы не рекомендуем использовать уровень соответствия ААА в качестве обязательной нормы для всех сайтов, потому что определенный контент невозможно подогнать под все его критерии».

Руководство WCAG 2.0 рекомендует, чтобы для уровня AA коэффициент контрастности был 4,5, а для уровня AAA  —  7.

Всплывающая подсказка в режиме проверки показывает текущий уровень соответствия текста: вы увидите имеет ли он достаточный контраст и легко ли его прочитать.

3. Инструмент Color Picker

Теперь представьте, что конкретный текст не соответствует ни одному из рекомендуемых уровней. Как в таком случае найти идеальный цветовой контраст между ним и фоном? С этим поможет инструмент Color Picker.

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

 Рекомендации для уровня контрастности на главной странице сайта Dribble

Коэффициент контрастности кнопки «Sign-Up» на главной странице сайта Dribble составляет 2,51. Это ниже принятых норм доступности. Об этом предупреждает красный значок.

Чтобы найти подходящий цвет для текста, взгляните на две линии в верху Color Picker. Цвета под верхней разделительной линией соответствуют стандартам уровня AA, а под нижней  —  стандартам уровня AAA. Все, что находится над верхней линией, будет отмечено красным предупреждающим значком. Он сигнализирует о том, что такое сочетание цветов затрудняет восприятие.

4. Emulate Vision Deficiencies (эмулятор дефектов зрения)

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

Но их не всегда достаточно. Чтобы улучшить пользовательский опыт, иногда требуется понять, как люди с проблемами зрения видят ваш сайт.

Теперь в Chrome есть новый инструмент разработчика  —  эмулятор дефектов зрения, в том числе и дальтонизма. Он помогает найти и исправить проблемы с контрастностью.

Чтобы найти эту функцию, откройте DevTools и нажмите на три точки на верхней панели. В выпадающем списке выберете More tools, а затем  —  Rendering. Внизу откроется дополнительная панель. Прокрутите ее до конца  —  там вы увидите пункт Emulate vision deficiencies.

Вы можете выбрать среди следующих опций:

  • No emulation  —  функция отключена.
  • Blurred vision  —  нечёткое зрение (в этом случае помогает увеличение размера текста).
  • Protanopia  —  протанопия, нечувствительность к красному цвету.
  • Deuteranopia  —  дейтеранопия, нечувствительность к красному и зеленому цветам.
  • Tritanopia  —  тританопия, нарушение восприятия синего и желтого цветов.
  • Achromatopsia  —  ахроматопсия, полное отсутствие цветового зрения.
Пример использования функции Emulate Vision Deficiencies

Функция Emulate Vision Deficiency позволяет дизайнерам и разработчикам увидеть, как их веб-сайт выглядит для пользователей с проблемами зрения, и решить, нужно ли корректировать цвета или контрастность.

Заключение

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

Кроме того, вы не только поможете людям, страдающим дальтонизмом, но и получите определенные преимущества для своего сайта:

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

Читайте также:

Читайте нас в Telegram, VK и Яндекс.Дзен


Перевод статьи Nethmi Wijesinghe: Technique for Color Blind Friendly Web Apps using Chrome DevTools

Предыдущая статьяКак с помощью Python создавать математическую мультипликацию типа 3Blue1Brown
Следующая статьяКак стать разработчиком проектов с открытым исходным кодом