Позаботьтесь о своих пользователях

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

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

Как объясняется здесь, WCAG означает Руководство по доступности веб-контента. WCAG, разработанный Рабочей группой W3C по рекомендациям по обеспечению доступности в рамках инициативы по обеспечению доступности Интернета, предоставляет документацию по стандартам, чтобы сделать веб-контент более доступным для людей с ограниченными возможностями. Эти руководящие принципы подразделяются на четыре принципа:

  • Ощутимый
  • Работоспособен
  • Понятный
  • Крепкий

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

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

Цветовой контраст

Поддержание надлежащего цветового контраста в вашем дизайне довольно просто, и им можно управлять с помощью инструментов разработчика Chrome или с помощью ряда различных расширений, если хотите. Согласно WCAG, идеальный коэффициент контрастности для поддержания высокой читаемости составляет 4,5: 1. Это делает контент более доступным для людей, которые не слепы, но живут с нарушениями зрения, которые могут затруднить различение цветов. Это может применяться к любому элементу веб-страницы, например шрифтам, кнопкам, изображениям и т. Д.

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

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

Читаемость шрифта

Обеспечение удобочитаемости текста на вашем сайте - еще один простой способ сделать ваш контент доступным для всех пользователей. Уже есть несколько отличных статей и видео, посвященных размеру шрифта, например, this article Matej Latin, и я настоятельно рекомендую прочитать ее. Со своей стороны, я просто кратко изложу некоторые ключевые аспекты предмета. Некоторые из них являются прямыми цитатами из WCAG:

  • Соблюдайте те же правила контраста, что и выше.
  • Использование простых читаемых шрифтов.
  • Использование масштабируемых размеров шрифта, таких как именованные размеры, проценты или em / rem.
  • Высота строки (межстрочный интервал) должна быть как минимум в 1,5 раза больше размера шрифта.
  • Интервал между абзацами должен быть как минимум в 2 раза больше размера шрифта.
  • Расстояние между буквами (отслеживание) должно быть как минимум в 0,12 раза больше размера шрифта.
  • Расстояние между словами должно быть не менее 0,16 раза больше размера шрифта.

Вот пример составленного мной текста, который, на мой взгляд, соответствует этим правилам:

Программы для чтения с экрана: HTML и JavaScript

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

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

По тем же причинам, по которым важно использовать семантический HTML, также важно не лениться и не пропускать атрибуты alt-text на изображениях и других нетекстовых носителях. Этого можно добиться с помощью встроенных атрибутов alt, если они доступны, а также с помощью меток ARIA.

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

Движение вперед

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

Спасибо за чтение! Если у вас есть предложения по дополнительным инструментам или ресурсам, поделитесь ими в комментариях.

Дополнительные ресурсы

Инструменты