Проблемы, с которыми сталкиваются веб-дизайнеры при обеспечении доступности веб-сайтов

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

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

Другой вопрос, который может возникнуть у многих дизайнеров: когда веб-сайт достаточно доступен ? Другими словами, в какой момент сайт пересекает порог доступности?

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

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

Недостающие части

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

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

Визуальный фокус
Первый пункт в списке Долсона — Visual Focus. Он объясняет это так:

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

Узнайте больше о Visual Focus: http://oregonstate.edu/accessibility/focus

Увеличенный текст
Еще один упущенный элемент дизайна — что происходит, когда пользователь увеличивает текст? Долсон уточняет:

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

Стратегия доступного контента

При добавлении контента на веб-сайт иногда проще написать аннотацию текста и ссылку на вложенный файл, например PDF-файл, который содержит больше информации. Но является ли это лучшей практикой для доступности?

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

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

Узнайте больше о создании PDF-файлов с расширенным доступом: http://webaim.org/techniques/acrobat/

Использование инструментов для поиска потенциальных проблем

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

WAVE (инструмент оценки веб-доступности) — одно из самых известных решений. Вставьте URL-адрес вашего сайта (или, что еще лучше, используйте их расширения для Chrome или Firefox), и WAVE загрузит страницу с своего рода тепловой картой того, что хорошо, а что нет. Он будет обнаруживать такие вещи, как отсутствующие теги alt, формировать метки и даже указывать на проблемы с цветовым контрастом. Затем вы можете щелкнуть определенные ошибки и увидеть их выделенными прямо на странице, которую вы сейчас тестируете.

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

Как только такой инструмент, как WAVE, обнаружит какие-либо проблемы, вы можете вручную применить исправления. Однако Долсон отмечает, что с замещающим текстом может быть небольшая проблема, которую инструменты не обязательно обнаружат. Он говорит: «…автоматический инструмент может только сказать, есть ли на вашем изображении альтернативный текст. Чего он не может сделать, так это определить, действительно ли текст является подходящей альтернативой изображению».

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

Узнайте больше об альтернативном (ALT) тексте: http://oregonstate.edu/accessibility/alttext

Вы в соответствии?

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

«Первой задачей является определение того, что на самом деле диктует закон в отношении доступности вашего веб-сайта. Это зависит от того, кто платит за ваш веб-сайт, в каком сегменте отрасли вы работаете и в какой стране ваш веб-сайт несет ответственность (это отдельный и еще более сложный вопрос!). В Соединенных Штатах доступность в основном регулируется Законом об американцах-инвалидах 1990 года, или ADA.

ADA предписывает, чтобы предприятия предоставляли равные условия для людей с ограниченными возможностями, но, как вы можете догадаться по дате принятия закона, на самом деле он не содержит никакой информации о том, что представляет собой доступный веб-сайт. Существуют специальные правила, касающиеся веб-сайтов федерального правительства США, описанные в разделе 508 Закона о реабилитации 1998 года, но это совершенно отдельный свод законов, и вы не можете сделать вывод, что ADA будет или должно следовать тем же правилам».

Итак, это сложно, мягко говоря. По мнению Долсона, следование Руководству по обеспечению доступности веб-контента (WGAC) 2.0, по крайней мере, даст вам надежную защиту в случае судебного разбирательства.
* Как всегда, обязательно проконсультируйтесь со специалистом по правовым вопросам, чтобы получить совет, относящийся к вашей ситуации.

Советы по тестированию вашего сайта

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

Используйте программу чтения с экрана
Пользователи Mac или iOS могут включить функцию VoiceOver. В Windows 10 есть встроенная функция экранного диктора. Или вы можете установить стороннее приложение, например NVDA.

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

Увеличить шрифты
Увеличьте масштаб своего сайта, чтобы увеличить его текст до 400%, и посмотрите, как это повлияет на макет.

Установите расширения для браузера
NoCoffee — это бесплатное расширение для Chrome, которое имитирует дальтонизм и другие проблемы со зрением. RGBlind выполняет аналогичную задачу для пользователей Firefox.

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

Стоит усилий

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

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