Веб-доступность 101: дизайн для всех

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

И хотя в этом принципе дизайна есть логика, он затмевает несколько более простой и всеобъемлющий принцип: дизайн для всех людей, а не для большинства.

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

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

Проектирование для обеспечения доступности не должно быть сложным. Он просто должен быть простым и внимательным ко всем потенциальным пользователям. Вот как оптимизировать ваш сайт для максимальной доступности.

Поймите своих пользователей

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

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

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

Подумайте об UX

Теперь, когда вы достигли взаимопонимания со своими будущими пользователями, поместите это понимание в структуру пользовательского опыта (UX). Этот шаг поможет вам сопереживать вашим пользователям и учитывать вещи, о которых вы, возможно, не думали раньше. Это также укажет вам направление широкого спектра определений вспомогательных технологий.

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

Простое изменение

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

Визуально между <b> и <strong> нет никакой разницы, и <i> не выглядит иначе, чем <em> . Но для людей с ограниченными возможностями эти теги могут резко изменить их пользовательский опыт.

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

Но это не так просто, как слепая замена всех <b> на <strong> . Например, многие заголовки выделены полужирным шрифтом для контраста, но, возможно, пользователям с ограниченными возможностями не стоит использовать здесь тег <strong> . Подумайте: «Нужно ли произносить этот текст по-другому, чтобы пользователь мог ощутить его полное значение?» Если нет, рассмотрите возможность удаления <strong> или <em> , если они действительно не нужны.

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

Дизайн для слабовидящих

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

Рассмотрим эти элементы:

• Разрешить пользователям увеличивать шрифт. Большинство браузеров сделают это с вашего согласия или без него, но это будет выглядеть лучше, если у вас есть подготовленный для этого CSS.
• Избегайте определенных цветовых комбинаций, таких как красный и зеленый или синий и желтый. Вместо этого, почему бы не использовать цвет для увеличения конверсии при одновременном повышении доступности?
• Код в «альтернативном тексте». Альтернативный текст может быть прочитан вспомогательными технологиями и объяснить любую графику на странице.
• Используйте точки в аббревиатурах, даже общеизвестных. То, как программа для чтения с экрана обрабатывает информацию, часто является фонетической: представьте, что вы слышите «Фибби» против ФБР.

Для получения дополнительной информации о способах включения элементов для слабовидящих пользователей посетите сайт American Foundation for the Blind.

Дизайн для слабослышащих

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

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

Рекомендации Национальной ассоциации глухих можно найти здесь.

Дизайн для светочувствительной эпилепсии

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

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

Дизайн для людей с нарушениями подвижности

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

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

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

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

Создайте «базовый» вариант веб-сайта

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

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

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

Продолжайте понимать своих разных пользователей. Продолжайте думать о них. Чем больше вы понимаете своих пользователей и сопереживаете им, тем проще становится доступный UX-дизайн. Кто знает? Вы можете даже изменить чей-то мир.