Доступность в дизайне: как обеспечить удобство использования для всех

1. Природа доступности: почему ее часто упускают из виду или неправильно понимают

Дизайн по-настоящему полезен лишь в том случае, если он доступен: 

• любому пользователю;
• в любом месте; 
• в любое время.

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

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

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

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

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

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

2. Ключевые моменты, на которые стоит обратить внимание

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

• Визуальные: Дальнозоркость, слепота, дальтонизм — все это формы нарушений зрения, которые вам необходимо учитывать в своем дизайне.
• Двигательные: Эта категория охватывает не только проблемы, касающиеся управления руками (что, скорее всего, затруднит использование интернета), но и другие заболевания костей и мышц. Если, например, ваш веб-дизайн будет представлен внутри выставочного стенда, вы должны подумать, как человек в инвалидном кресле сможет подъехать к этому стенду, развернуться и покинуть его после выполнения задания.
• Слуховые: Нарушения слуха бывают разной степени тяжести, вплоть до полной глухоты.
• Приступы: У некоторых людей свет, движение, мерцание и т.д. на экране могут вызывать припадки. Наиболее распространенная проблема в этой области — светочувствительная эпилепсия.
• Обучение: Также важно помнить, что не все проблемы являются физическими. На доступность могут оказывать влияние такие факторы, как обучаемость и когнитивные нарушения.

Поставьте себя на место пользователя. Вспомните, вы когда-нибудь сталкивались с трудностями, используя свой телефон за рулем автомобиля? Что вы чувствовали, пытаясь выполнить несколько задач одновременно? Есть ли в вашем автомобиле автоматическая коробка передач, чтобы осуществить такое взаимодействие было проще?

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

Пример: У Арнольда назначено интервью в 15:00 в незнакомом городе. Добираться в туда ему пришлось на машине друга-соседа.  Его сосед вернется поздно. К сожалению, началась метель. Ситуацию усугубляет тот факт, что в машине осталось мало бензина, поэтому Арнольду придется заправляться по дороге. Таким образом, следующие факторы мешают Арнольду и ограничивают его возможности как пользователя:

• Незнакомый маршрут;
• Опоздание;
• Метель;
• Мало бензина в баке.

Перед Арнольдом стоит четыре препятствия, которые мешают успешному выполнению задачи. Его посещают мысли позвонить интервьюерам. Однако он решает этого не делать и продолжает сосредоточенно вести машину. Лишь одна вещь помогает Арнольду в его непростой ситуации — GPS. Устройство обладает большим экраном, на котором отображаются лишь самые необходимые элементы. Яркая красная стрелка, резко контрастирующая со светло-зеленым фоном, который он видит и понимает мгновенно,  не отвлекаясь на лишний текст или изображения. Он чувствует себя лучше, когда голос говорит ему, что заправка находится рядом. После заправки он снова выезжает на дорогу и оставляет позади Леголенд, который обозначен на экране GPS большой иконкой. Его интервьюер упомянул Леголенд как ориентир, а это значит, что он уже рядом. Арнольд вздыхает с облегчением. Даже в метель он смог приехать в пункт назначения в 14:50! Дизайнеры и разработчики удобной GPS-системы заслуживают благодарности.

3. Делаем веб-сайт доступным

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

• Если вы используете CMS — выбирайте ту, которая поддерживает стандарты доступности. Например, Drupal или Wordpress. Если вы собираетесь выбрать шаблон сайта и изменить его под свои нужды, а не создавать новую тему, убедитесь, что он был разработан с учетом доступности. Это может сэкономить время, усилия и деньги.
• Используйте специальные теги для заголовков в тексте (h1 — h6). Убедитесь, что их применение единообразно на всем сайте. Старайтесь не пропускать уровни заголовков (например, неверно после h1 использовать h4, а не h2), это может запутать программу чтения с экрана. Пользователи с более серьезными нарушениями зрения могут взаимодействовать с вашим сайтом при помощи обновляемого дисплея Брайля или терминала, работа которого также зависит от программы чтения с экрана.
• Используйте замещающий текст (в атрибуте alt) для изображений. Если они важны для понимания контекста, программа чтения с экрана должна иметь возможность объяснить, что на них изображено — именно для этого и нужен замещающий текст. Однако, если изображение является исключительно декоративным и его ценность заключается лишь в улучшении визуала, вам не следует добавлять альтернативный текст, чтобы не запутать пользователя, который воспринимает содержимое сайта на слух.
• Разработайте ссылочную стратегию. Программы чтения с экрана иногда запинаются при чтении ссылок и останавливаются на первой букве. Поэтому важно, чтобы ссылки “Нажмите сюда” не были разбросаны по всему тексту. Лучший вариант, когда перед ссылкой содержится текстовое описание, а сама ссылка обладает уникальным именем. (Например, “Узнайте больше об Interaction Design Foundation на их веб-сайте”). Вы можете добавить визуальную подсказку (например, иконку PDF), чтобы пользователям было понятно, что они получат, перейдя по ссылке. Обозначьте ссылки с помощью подчеркивания (это помогает дальтоникам отличать их от остального текста). Также выделяйте ссылки при наведении на них курсора, чтобы пользователям было четко видно, куда они его направляют.
• Тщательно подбирайте цвета. Если вы сомневаетесь в своем выборе, попросите человека с дальтонизмом протестировать вашу цветовую схему. Дальтонизм — очень распространенное заболевание, а неправильная палитра цветов может сделать чтение текста на вашем сайте и навигацию по нему довольно затруднительными для людей с подобными нарушениями. Вы также должны обеспечить достаточный уровень контраста между текстом и фоном на вашем сайте, ведь, например, пожилым людям трудно разглядеть текст, если контраст не является достаточно высоким.
• Формулируя инструкции, никогда не ссылайтесь исключительно на цвет объекта: указание “Нажмите красную кнопку” будет абсолютно бесполезным для дальтоника. “Нажмите круглую кнопку” — намного эффективнее. Упомяните форму элемента, а не только его цвет, чтобы помочь пользователям.
• Уделите особое внимание дизайну форм. У программ чтения с экрана могут возникать сложности при работе с формами. Обязательно добавьте полям подписи с помощью тега label, которые будет озвучены программой. Убедитесь, что порядок табуляции (перемещения фокуса с помощью клавиши Tab) в форме соответствует визуальному расположению полей, поскольку программа чтения с экрана может с легкостью пропустить поле, если это не так. Не забудьте также добавить каждому полю атрибут ARIA (Accessible Rich Internet Applications — Доступные многофункциональные интернет-приложения), обозначающий, является оно обязательным для заполнения или нет. Программы чтения с экрана не могут распознать звездочку, которая является общепринятым обозначением обязательных для заполнения полей.
• Не используйте теги таблицы (table) для разметки страницы. Программы чтения с экрана могут распознать таблицу. Однако они начинают объяснять, сколько в ней столбцов и строк, что может раздражать и отвлекать пользователя, если таблица используется просто как метод расположения элементов на странице. Оставьте таблицы только для представления данных. Не забывайте использовать HTML-атрибут scope для обозначения связи между ячейками с заголовком и обычными ячейками.
• Используйте правильные HTML-элементы для списков (ul/ol) и не размещайте их в одной строке с текстом. Такой подход позволит программе чтения с экрана анализировать списки.
• Проверьте, удобно ли взаимодействовать с вашим сайтом с помощью клавиатуры без использования мыши. Люди с нарушениями опорно-двигательного аппарата часто используют тачпад, когда им нужно найти на сайте какой-то объект. Им может потребоваться специальный стилус, управляемый ртом, или устройство ввода с одной кнопкой, или они, возможно, воспользуются клавиатурой. Попытайтесь также упростить возможность пропускать неинтересные разделы контента на сайте, ведь прокрутка без мыши — это настоящее мучение.
• Изучите стандарты ARIA (Accessible Rich Internet Applications — Доступные многофункциональные интернет-приложения) и используйте их при необходимости.
• Подумайте о том, каким образом ведет себя динамический контент на вашем сайте. Не делайте воспроизведение видео автоматическим (это может нарушить работу программы чтения с экрана). Стандарты ARIA помогут вам сделать оверлеи, модальные окна, лайтбоксы (всплывающие окна с затемнением фона) доступными. Если вы используете слайдер, убедитесь, что все изображения в нем имеют замещающий текст, а пользователи могут перемещаться по слайдам с помощью клавиатуры.
• Проверьте свою разметку на сайте стандартов W3. Убедитесь, что HTML и CSS-код не конфликтуют со вспомогательными технологиями. Это также обеспечит правильное прочтение вашего кода всеми браузерами.
• Избегайте использования Flash-технологий. Об этом вряд ли вообще стоит говорить, поскольку в настоящее время эта технология больше не поддерживается. Если на вашем сайте все еще есть Flash-компоненты, удалите их и замените на более доступные (безопасные, легкие и современные).
• Добавьте к аудиофайлам транскрипции. Пользователи с нарушениями слуха не могут использовать программы для чтения с экрана, поэтому, чтобы помочь им, предоставьте расшифровки записей.
• Аналогичным образом добавьте субтитры к видео.
• Контент на вашем сайте должен быть понятным и удобным для чтения. Чем проще язык, тем легче будет прочитать текст пользователям с нарушениями способности к обучению.

4. Технологии, обеспечивающие доступность в сети

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

Распространенные технологии, используемые для повышения доступности сайтов

• Альтернативный веб-браузер
• Дисплей Брайля
• Приложения, отслеживающие движение глаз
• Стилус, закрепляемый на голове
• Стилус, управляемый ртом
• Увеличители экранов
• Программы для чтения с экрана

Веб-сайт Университета Миннесоты в Дулуте содержит большое количество полезной информации о технологиях повышения доступности:

https://www.d.umn.edu/itss/training/online/webdesign/accessibility.html

5. Инструменты для проверки доступности

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

• WAVE — позволяет оценить общий уровень доступности любого веб-сайта.
• Color Oracle — показывает, как пользователи с дальтонизмом видят ваш сайт.
• Image Analyzer — проверяет изображения на сайте на предмет соответствия их стандартам доступности.

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

Вывод

Разработка дизайна сайта с учетом соответствия стандартам доступности предполагает принятие того факта, что все пользователи имеют потребности, требующие внимания. Хотя многие из них страдают от физических или когнитивных нарушений, абсолютно каждый из нас может отвлечься на что-либо при взаимодействии с сайтом. Даже так называемые “полноценные” пользователи, сидящие в тихих комнатах за большими мониторами, столкнутся с затруднениями, если зазвонит телефон и им придется продолжить работу одной рукой.

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

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

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