Вы — не ваши пользователи, или основы доступности веб-дизайна

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

Что такое доступность[]

Доступность (Accessibility) — набор правил и ограничений, которым должен следовать добросовестный администратор для соблюдения норм предоставления контента людям с ограниченными возможностями и находящимся в затруднённых условиях доступа. Следуя этим правилам вы обеспечиваете равные права всем вашим пользователям. Кроме того, работа с доступностью позволяет повысить общее качество сайта и опыт пользователей вне зависимости от их возможностей.

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

Каких пользователей нужно учитывать[]

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

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

Почему это важно[]

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

Вот основные мотивы для работы над доступностью:

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

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

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

Контраст[]

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

Контраст между текстом и фоном должен быть не менее 4.5:1 (в идеале не менее 7:1).
Контраст крупного полужирного текста может быть снижен до 3:1 (в идеале не менее 4.5:1).
Декоративный текст, не являющийся частью пользовательского интерфейса, не требует контрастности.
Контраст ссылок по отношению к тексту должен быть не менее 1.5:1, в противном случае ссылки должны быть выделены нижним подчёркиванием.

Давайте посмотрим на два блока с текстом:

В первом случае контрастность текста по отношению к фону составляет 2,49:1. Это значение ниже рекомендуемого минимального, из-за чего у пользователя возникнут проблемы с чтением подобного текста. На второй картинке контрастность составляет 7.81:1, а значит текст будет удобен для чтения слабовидящим людям.

Теперь взглянем на заглавную Friday Night Funkin Вики:

Мы можем увидеть две ошибки, связанные с контрастом: плохо читаемый текст навигации и недостаточно контрастный цвет ссылок в блоках. Вбив цвета ссылок и фона в инструмент проверки, мы увидим значение 1.54:1, что в целых два раза ниже нормы. Скажите, удобно ли вам читать такой текст? Что уж говорить о людях с проблемным зрением. Давайте исправим ситуацию:

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

Проверить контрастность ссылок, текста и фона можно с помощью инструмента WebAIM Checker.

Взаимодействие через цвет[]

Это правило говорит нам о том, что неправильно взаимодействовать с пользователем только через цвет. Это не позволит людям, которые не различают цвета, правильно понять суть элементов. Используйте цвет как дополнение к тому, что уже видно. Рассмотрим это правило на примере заполнения нашего генератора кода:

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

Фокусировка[]

В CSS существует псевдокласс :focus, который позволяет дополнительно выделять формы и кнопки, когда пользователь взаимодействует с ними. По умолчанию такие элементы выделяются с помощью свойства outline, которое создаёт внешнюю рамку вокруг элемента. Вы можете увидеть подобную фокусировку в текстовых формах на любом сайте.

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

Как вы можете увидеть, здесь убрана стандартная обводка. Однако, вместо неё форма с фокусом меняет цвет своей рамки и всё ещё соответствует стандартам фокусировки. Кстати, контраст кнопки "Создать статью" не соответствует нормам :)

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

Простой пример этой логики вы можете увидеть в обычном таббере.

Привет.

Я съел булочку.

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

Нетекстовый контент[]

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

Логика и простота[]

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

Навигация на всех страницах должна быть организована в одинаковой последовательности и расположении.
Все рабочие процессы и инструменты хорошо проработаны и просты в использовании.
Текст статей максимально прост для понимания и исключает жаргон или сленг.
Ошибки пользователя должны сопровождаться чётким разъяснением и подсказками по исправлению.
Отствуствуют препятствия для исправления ошибок пользователя им самим.
Элементы вики должны работать предсказуемо, чтобы пользователь понимал, что произойдёт в результате взаимодействия.

Производительность[]

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

Ужимайте изображения в галереях, конвертируя их в jpg или webp.
Увеличивайте масштаб браузера, чтобы посмотреть, как страница выглядит на низких разрешениях экрана.
Откажитесь от излишнего дизайна и скриптов которые не несут никакой пользы, а были созданы только ради ваших хотелок.
Не используйте слишком много вызовов функций парсера на одной странице.
Не вставляйте в статью большой объём данных с помощью шаблонов.
Максимально оптимизируйте CSS и JS.
Пробуйте заменять тяжелый код более лёгкими аналогами.

Перед тем как создать что-то, всегда анализируйте, насколько нагрузка на статью стоит того, чтобы добавить этот элемент на страницу.

Тёмная и светлая темы[]

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

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

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

Заключение[]

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

Источники[]

При написании блога использовалась информация из следующих источников: