Доступность может быть не первым, о чем вы думаете при планировании нового веб-сайта, но это одна из самых важных вещей, которую нужно сделать правильно. Когда все сделано правильно, доступный дизайн, скорее всего, останется незамеченным, но если все сделано неправильно, он может раздражать пользователей и сделать ваш сайт непригодным для использования!
Ниже я перечислил несколько ключевых областей, о которых следует подумать, прежде чем разрабатывать свой следующий проект.
Выбор цвета
Если вашему выбору цвета не хватает контраста, любой контент станет трудночитаемым, особенно для пользователей с нарушениями зрения.
Удивительным ресурсом здесь является WebAIM Contrast Checker. Этот сайт позволяет вам выбрать комбинацию цветов фона и переднего плана и сообщит вам, достаточен ли контраст.
Важно пробовать различные комбинации цветов, а также учитывать влияние определенных вариантов на пользователей с дальтонизмом.
Размер шрифта
При размещении любого текста на странице он должен отображаться в понятном виде. В конце концов, зачем что-то писать, если никто не в состоянии это прочитать?
Есть ряд параметров, которые вы можете использовать для управления этим: тип шрифта, размер шрифта, межбуквенный интервал, межстрочный интервал и т. д.
Во-первых, вы должны убедиться, что выбранный шрифт адаптируется к разным размерам экрана. Один из способов сделать это — настроить шрифты на использование относительного размера (например, используя 1,5rem в качестве параметра вместо 20px). Оттуда вы можете создать несколько медиа-запросов для оптимизации базового блока и управления масштабом всего сайта.
Хотя может показаться сложным определить, какой интервал или размер использовать, существуют Рекомендации по обеспечению доступности веб-контента (WCAG), в которых указаны стандарты для всего этого, такие как размер шрифта более 18 пикселей и межстрочный интервал 1,5.
Интуитивно понятное взаимодействие
При прокрутке веб-страницы существует множество способов сделать дизайн интуитивно понятным. Если мы видим фрагмент текста, который подчеркнут синим цветом, наш разум связывает его со ссылкой, поэтому он будет знать, что нужно попытаться щелкнуть по нему. Если наш курсор нависает над полем и превращается в указатель, мы понимаем, что это должен быть кликабельный контент. Важно использовать эти интуитивные ответы при разработке сайта, чтобы пользователи не разочаровывались при поиске ссылок.
Другой способ реализовать это — использовать состояние «:: focus», чтобы показать, какое поле в данный момент активно. Это полезно для пользователей, которые перемещаются без мыши. Вы также можете настроить состояния для выдачи ошибки или предупреждения, когда поле ввода заполнено неправильно.
Структура страницы
То, как вы структурируете контент, сильно влияет на то, насколько легко его можно понять. Обеспечение правильной последовательности заголовков (начиная с h1 и двигаясь вниз к h6) позволяет пользователям узнать, когда они входят в новый раздел или является ли следующий абзац подразделом последнего.
Оформление текста также имеет большое значение. Как человек, который раньше любил контент с выравниванием по ширине, на самом деле это метод выравнивания, который вы должны выбирать в последнюю очередь, поскольку неравномерный интервал между словами может затруднить чтение контента.
Стандартно вы должны стремиться иметь 45–85 символов в строке при размещении текста на вашем сайте (продиктовано WCAG — ссылка в разделе выше). Для этого вы можете использовать единицу «ch», чтобы сохранить оптимальный текст в строке, даже если ваш сайт масштабируется.
Альтернативный текст
Альтернативный текст предоставляет контекст изображения пользователям с нарушениями видимости. Всегда важно заполнить что-нибудь в поле «Замещающий текст», чтобы программы чтения с экрана и пользователи с нарушениями видимости могли в полной мере насладиться вашим сайтом. Это делается путем добавления атрибута alt в ваш HTML-код:
<img src="./images/sunflower" alt="Sunflower in Bloom">
Используемый текст должен быть кратким и четко объяснять изображение. Если содержание изображения не важно или не может быть объяснено, используйте пробел (« »), чтобы читатели, использующие замещающий текст, знали, что описание не было забыто.
Настройка языка
Это может показаться мелочью, но важно указать в HTML, какой язык вы используете. Это позволяет браузеру (или любым специальным устройствам, таким как программы чтения с экрана) узнать, на каком языке написан сайт.
<!DOCTYPE HTML> <HTML lang="en">
Это объявление всегда должно находиться в теге HTML, а не в теге Body, чтобы включить анализ любых метаданных в разделе ‹head›.
Настройка печати
Я уверен, что вы сталкивались с веб-страницами, на которых легко ориентироваться на экране, но при попытке распечатать их содержимое становится неразборчивым. Большие боковые панели или заголовки заполняют область печати и скрывают контент, который вы действительно хотите видеть.
Запросы '@media print' могут быть написаны для удаления нежелательных элементов и обеспечения того, чтобы анализировался только печатный контент. Например, вы можете настроить запрос для удаления боковой панели, навигационных ссылок или даже для отображения источника ссылок, на которые есть ссылки на странице.
Я очень надеюсь, что эта статья была вам полезна. Если вы заинтересованы в том, чтобы применить это в своих проектах, я настоятельно рекомендую перейти по приведенной ниже ссылке на страницу A11y Coffee, на которой подробно описаны все различные способы сделать ваш сайт более доступным.
Если вам понравился этот пост и вы хотите прочитать больше, не забудьте проверить мой профиль на наличие похожих постов. Подумайте о том, чтобы стать участником Medium, чтобы получить неограниченный доступ к лучшим идеям и авторам.
Спасибо, что прочитали!
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
