Дизайнеры по своей природе очень визуальные люди, поэтому легко забыть, что существуют основополагающие, менее визуальные аспекты веб-дизайна, которые могут оказать существенное влияние на пользовательский опыт для части посетителей вашего сайта.
К сожалению, подавляющее большинство веб-сайтов не учитывают доступность на этапе проектирования и, как следствие, могут упустить важную возможность задействовать важный сегмент клиентов.
Давайте посмотрим на статистику:
- В США больше слабослышащих пользователей, чем в Испании, и больше слепых и слабовидящих пользователей, чем в Канаде.
- 7,6 миллиона (3,1%) людей имеют нарушения слуха и поэтому могут полагаться на расшифровки и/или субтитры для аудио- и видеоносителей.
- 8,1 миллиона (3,3%) имеют нарушения зрения и могут полагаться на экранную лупу или программу чтения с экрана или могут иметь форму дальтонизма.
- Исследования показали, что 70% веб-сайтов, проверенных на предмет доступности, получили «красную» оценку – другими словами, «существенный потенциальный коммерческий, пиар- или юридический риск». Э
Неспособность обеспечить доступность в дизайне вашего веб-сайта - это не только упущенная возможность получения дохода, но и может подвергнуть вашу компанию ответственности в соответствии с Законом об американцах с ограниченными возможностями (ADA).
Решение проблем со зрением
Типичный посетитель веб-сайта склонен судить о веб-сайте по цветам, дизайну и функциональности. Для посетителей с нарушениями зрения впечатления будут иными.
Существует множество типов и степеней нарушений зрения, в том числе:
- Состояния зрения
- Слабое зрение
- Катаракта
- Дальтонизм
- И еще
Список нарушений зрения длинный, и, учитывая большое количество сайтов, которые не разработаны с учетом доступности, людям с нарушениями зрения часто приходится выбирать из нескольких сайтов, которые отвечают их потребностям.
Хорошая новость заключается в том, что есть несколько простых вещей, которые вы можете сделать, чтобы немедленно улучшить доступность вашего сайта.
1. Проверьте правильность цветового контраста
Правильный цветовой контраст очень важен для людей с нарушениями зрения.
Если текст написан более светлым цветом (серым, синим и т. д.) на белом фоне (очень распространенная комбинация), посетителям с ослабленным зрением может быть трудно читать текст из-за низкого уровня контраста..
Те же правила применяются к цвету цветного текста. Часто дизайнеры добавляют более светлый синий цвет, например, поверх темно-синего фона. Эти типы комбинаций обычно не обеспечивают достаточного контраста для посетителей с нарушениями зрения.
(Изображение из журнала Smashing)
Как убедиться, что цветовой контраст достаточен? Эта веб-программа проверки цветового контраста – это простой способ проверить дизайн как для Интернета, так и для печатных материалов.
2. Ограничить использование цвета для идентификации контента
Правильный цветовой контраст важен не только для текста. Многие веб-сайты используют цвет для направления пользователей по сайту или для идентификации контента. Например, вы можете связать все страницы или контент, связанные с определенным продуктом или услугой, с определенным цветом.
Используйте средство проверки цветового контраста, чтобы проверить цветовой контраст во всем дизайне, особенно для графики, которая используется для иллюстрации основной темы вашего контента. Вы также можете использовать средство проверки контрастности для проверки графики при разработке новой веб-графики и печатных материалов.
Ваша графика и цвета не должны быть основным содержанием вашего контента - вместо этого они должны поддерживать текст на странице. Это особенно важно при использовании цветных элементов и текста в полях формы и/или кнопках на вашем сайте.
3. Используйте больше текста
Информационная архитектура (по сути, то, как организован ваш контент) - важная вещь, которую следует учитывать, когда дело доходит до веб-дизайна, поскольку она напрямую влияет на то, как посетитель перемещается по вашим страницам и сможет ли/как он идентифицировать наиболее важные элементы страницы.
Информационная архитектура особенно важна для пользователей с нарушениями зрения, поскольку они часто полагаются на технологию чтения с экрана при навигации по веб-сайтам.
Начните с использования чистого форматирования H1, H2 и т. д. для заголовков, поскольку это позволит программам чтения и чтения с экрана легко определить иерархию и основные темы вашей страницы. У него также есть дополнительное преимущество: он отлично подходит для поисковой оптимизации.
Также важно использовать правильный замещающий текст на изображениях и видео. Альтернативный текст действует как шпаргалка для посетителей с нарушениями зрения, предоставляя им (и читателям, которых они используют) дополнительную информацию, объясняющую, о чем изображение или видео. И, как и правильное форматирование заголовка, альтернативный текст отлично подходит для SEO.
Наконец, рассмотрите возможность добавления подписей к видео и изображениям. С ростом использования видео на веб-сайтах добавление подписей позволяет пользователям с нарушениями зрения понимать контент, одновременно делая видео более привлекательным, когда оно распространяется по различным каналам социальных сетей.
Чтобы определить изображения и видео, в которых может отсутствовать замещающий текст, запустите свой веб-сайт с помощью такого сервиса, как Screaming Frog. Бесплатная версия сообщит вам, где именно вам не хватает замещающего текста и, следовательно, что вам нужно обновить.
Готовы ли вы серьезно отнестись к доступности?
Выше приведены несколько простых способов сделать ваш сайт более доступным. Если ваш веб-сайт нуждается в обновлении или вы думаете о решении проблемы доступности веб-сайта, приведенная ниже инфографика содержит четкие советы «что делать» и «не делать», которые помогут вам начать работу.