Многие веб-дизайнеры и разработчики только только сейчас начинают понимать важность доступности сайта. Этот важный аспект дизайна веб-сайтов в последние годы вышел на передний план дизайнерского мышления.
Если вы только начинаете изучать особенности доступности веб-сайтов, не расстраивайтесь. Потому что даже крупнейшие мировые бренды часто не обращали на это внимания. Фактически, в 2019 году слабовидящий пользователь подал в суд на Domino’sза несовместимость их веб-сайта с программным обеспечением для чтения с экрана. И победил!
Веб-сайты должны быть доступны каждому. И тому, кто плохо видит или слышит. И ваша работа, как веб-дизайнера — убедиться, что создаваемые вами веб-сайты подходят для любой аудитории.
В наши дни всем веб-дизайнерам и разработчикам важно иметь хотя бы базовое представление о доступности веб-сайтов. И кое-что вы сможете почерпнуть из этой статьи.
Содержание статьи
Что такое доступность веб-сайта?
Делая сайт более доступным, вам нужно уделять пристальное внимание многим аспектам вашего дизайна. Включая код веб-сайта, цвета, которые вы используете в дизайне веб-сайта, размеры шрифтов, совместимость со старыми браузерами и многое другое.
Приведение веб-сайта в соответствие со стандартами доступности в Интернете сейчас имеет решающее значение, независимо от того, являетесь ли вы крупным корпоративным брендом или веб-сайтом для малого бизнеса.
Почему это важно?
Первое судовое дело о доступности Интернета произошло в 2017 году, и дело дошло до федерального суда. Все потому, что веб-сайт был несовместим с программным обеспечением для чтения с экрана.
Представьте, насколько неприятно для слабовидящего человека не иметь возможности заказать нужный продукт на веб-сайте. Особенно во время пандемии, когда онлайн-покупки — единственный способ безопасно купить желаемое.
Сделать ваш веб-сайт доступным для людей с ограниченными возможностями — это не только избежать судебных исков, но и улучшить обслуживание ваших клиентов.
Вот несколько советов по тестированию и улучшению доступности вашего сайта.
1. Протестируйте свой сайт
Первый шаг к тому, чтобы сделать ваш веб-сайт доступным, — это сделать аудит веб-сайта, чтобы увидеть, какие области дизайна необходимо улучшить.
Даже если вы использовали чистый код и следовали стандартным рекомендациям по веб-дизайну, на вашем веб-сайте все равно могут отсутствовать некоторые важные элементы. Например, альтернативные теги мультимедиа, которые помогают описывать изображения и визуальные эффекты при использовании программного обеспечения для чтения с экрана.
Проведение теста на доступность поможет вам найти эти недостающие элементы, чтобы вы могли приступить к улучшению своего сайта.
Для начала вы можете использовать инструмент Google Lighthouse, который позволяет бесплатно проводить аудит веб-сайта. Помимо многих других аспектов, он также проверяет доступность веб-сайта. Вы также можете использовать инструмент WAVEили инструмент доступности aCe,который создан только для тестирования веб-сайтов на доступность.
2. Используйте решения для веб-доступности
Если у вас есть бизнес, ориентированный на широкую аудиторию, лучше не полагаться на бесплатные онлайн-инструменты. Найдите что-то более надежное.
Кроме того, вам нужно идти в ногу со временем, поскольку требования и рекомендации меняются практически каждый год.
Как только вы определили области, которые необходимо улучшить на веб-сайте, вам придется нанять веб-дизайнеров, UX-дизайнеров и разработчиков для внедрения изменений. Более доступный, быстрый и простой способ добиться этого — использовать инструмент веб-доступности, такой как accessiBe.
accessiBe может интегрироваться с вашим веб-сайтом для автоматического сканирования и оптимизации вашего дизайна для веб-доступности. Он использует мощный ИИ (искусственный интеллект) для улучшения содержимого вашего веб-сайта для программ чтения с экрана, оптимизации навигации с помощью клавиатуры и настройки многих других элементов дизайна взаимодействия с пользователем.
Если вы веб-дизайнер на фрилансе, или агентство, использование такой службы, как accessiBe, — отличный способ быстро и легко сделать ваши веб-сайты более доступными.
3. Оптимизируйте UX веб-сайта
Многие бренды и компании часто упускают из виду роль дизайнера пользовательского интерфейса при создании веб-сайтов, пока на них не обрушится волна судебных исков.
Даже веб-дизайнеры должны иметь некоторое представление о дизайне пользовательского опыта(UXD), чтобы быть уверенным, что контент веб-сайта оптимизирован для обеспечения лучшего взаимодействия.
Некоторые из наиболее важных областей, на которых следует сосредоточиться:
- Навигация: четкая навигация — важная часть веб-сайта. Будьте внимательны при использовании новых типов навигации, таких как гамбургер-меню и мегаменю.
- Текст: найдите идеальный шрифт и размер шрифта, которые делают ваш текст читаемым на всех платформах, устройствах и браузерах.
- Формы: не забудьте добавить ярлыки в каждое поле, чтобы сделать формы более доступными.
- Кнопки и ссылки: избегайте использования изображений для кнопок. И делайте ссылки с четким текстом, цветами и URL-адресами.
4. Выберите визуальные эффекты для слабовидящих
Нарушение зрения и дальтонизм — два самых распространенных вида инвалидности в мире. Но дизайнеры часто забывают сделать контент своего сайта доступным для таких людей.
Это то, что вы всегда должны учитывать при выборе визуальных элементов для дизайна вашего сайта. Все, от контраста фона и контента до цветов, используемых в изображениях, должно быть тщательно отобрано, чтобы сделать их доступными для различных типов нарушений зрения.
Например, некоторые веб-сайты используют цвет как способ подчеркнуть важность кнопок и ссылок. Для дальтоника эти кнопки будут означать совершенно разные вещи.
Фильтр Colorblind Веб представляет собой простой бесплатный инструмент, который вы можете использовать для просмотра веб — страниц, чтобы увидеть, как люди с дальтонизмом будут видеть ваш контент. Есть также другие инструменты, которые можно использовать для оптимизации контента для дальтоников.
5. Используйте систему управления контентом
Гибкость вашего веб-сайта также играет роль в доступности. С более гибким веб-сайтом гораздо проще вносить необходимые изменения для улучшения доступности. Использование системы управления контентом (CMS) — отличный способ достичь этой цели.
Например, программное обеспечение CMS, такое как WordPress, позволяет легко настраивать ваш веб-сайт по своему усмотрению. С помощью плагинов для построения страниц, таких как Elementor, вы сможете оптимизировать свой дизайн, даже не написав ни одной строчки кода.
Если возможно, используйте CMS для создания своего сайта. Это сэкономит вам много денег, которые в противном случае потрачены на агентства веб-разработки.
В заключение
Сделав свой веб-сайт доступным для большей аудитории, вы не только сделаете свой продукт или услугу доступными большему количеству людей, но и получите преимущество перед конкурентами. И вы избавите себя от головной боли, избежав потенциальных судебных исков.
Источник