Привет!

Руководство по веб-доступности [digital note #21]

Валерия СластенниковаВалерия Сластенникова

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

Дизайнеры

  • Убедитесь, что есть контраст между текстом и фоновым цветом

Согласно WCAG (Руководству по обеспечению доступности веб-контента), соотношение текста и фона должно быть не менее 4,5:1. Если шрифт 24px или 19px, минимум снижается до 3:1. Особенно осторожно нужно относится к тексту, расположенному поверх изображения.

  • Не ограничивайтесь только цветом для выделения информации

Должен быть еще какой-нибудь индикатор (например, подчеркивание текста с ссылкой), который подскажет пользователям, которые не могут различать цвета, как пользоваться контентом.

  • Соединяйте цвета (не только оттенки) для увеличения контрастности

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

  • При восприятии контента не полагайтесь только на органы чувств

Не нужно ориентироваться только на изображение, форму, размер, визуальное расположение, ориентацию или звук для расставления акцентов в контенте (например, “посмотрите на изображение вверху”). Применяйте комбинацию позиционирования, цвета и маркировки.

  • Разработайте дизайн focus state, чтобы помочь пользователям ориентироваться

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

  • Помогите пользователям определить входные данные, избежать и исправить ошибки

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

  • Составьте правильный текст для изображений

Пользователи с плохим зрением часто используют функцию браузера, которая “проговаривает” страницу. При этом текст конвертируется в речь. Когда дело доходит до изображения, браузер ищет alt-текст. Если же он не будет найден, программа озвучит “изображение”. Пользователь останется в неведении относительно содержания изображения и того, какое отношение оно имеет к тексту.

Полноценно опишите, что происходит на картинке, вместо скупого “изображение”.

При использовании изображения текста, на уровне с содержимым, уточните при необходимости дизайн (например, на доске для рисования написано “Это цитата”).

  • Если элемент невозможно сделать доступным, создайте для получения  пользователями информации другой путь

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

  • Придерживайтесь последовательности и четкости при прототипировании и написании текста

Будьте последовательны в функционале и размещении. Компоненты с одинаковым функционалом должны работать и определятся последовательно. Используйте заголовки разделов для организации контента. Излагайте мысли просто и доступно, избегая жаргона и идиом.

Разработчики

  • Используйте правильный HTML элемент для контента

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

  • Обеспечьте поддержку навигации при помощи клавиатуры

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

  • Понимание и использование HTML разметки

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

  • Хороший alt-текст для изображений
  • Разработайте дизайн focus state, чтобы помочь пользователям ориентироваться
  • Помогите пользователям определить входные данные, избежать и исправить ошибки
  • Используйте ARIA-аттрибуты, где это возможно

ARIA - Accessible Rich Internet Applications. Это дополнительная, но полезная функция, для определения способов разметки HTML с динамическими элементами (как правило, контролируется при помощи Javascript).

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

  • Дайте возможность пользователям пропустить верхний уровень навигации для доступа к основным материалам

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

  • Сделайте ссылки наглядными

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

  • Избегайте изображений и иконок в псевдо-элементах

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

  • Сделайте SVG доступным вспомогательным технологиям

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

  • Спрячьте некоторые элементы от пользователей

Разделительные линии, иконки, не несущие информационной нагрузки, могут быть скрыты от пользователей с целью обеспечения получения ими только релевантной информации. Это осуществляется путем добавления aria-hidden=”true” элемента.

  • Создайте дополнительный путь доступа пользователей к информации
  • Ссылки должны быть визуально легко определимы

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

Проект-менеджеры

  • Ознакомьтесь с работой, связанной с обеспечением веб-досупности

Выделите важные пункты обеспечения доступности благодаря работе дизайнеров и разработчиков.

  • Выделите время на обеспечение доступности во время планирования

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

  • Оцените усилия по повышению доступности при обсуждении выполненной работы

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

  • Инструменты и продукты, которые вы создаете должны обеспечить легкость достижения доступности

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

  • Пропагандируйте доступность

Поясните важность доступности и почему она должна быть в приоритете при работе над каждым проектом.

Контроль качества

  • Проверьте каждую страницу с помощью WAVE Chrome Extension.

Этот инструмент не идеален, но даст общее представление о наличии ошибкок.

  • Пользователи должны иметь возможность использовать клавиатуру для навигации
  • Пользователи должны иметь возможность использовать screen reader для навигации
  • Общая структура и иерархия контента должна иметь смысл

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

  • Таблицы и изображения должны содержать alt-текст, чтобы пользователи со screen reader или слабым интернет-соединением могли “прочитать” изображения
  • Художественные изображения должны быть невидимы screen reader

Редакторам

  • Пишите хороший alt-текст для изображений
  • Подумайте, как пользовательский опыт можно сделать доступным
  • Будьте последовательны

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

  • Ссылки должны быть информативными
  • Важная информация не должна передаваться только через образы, цвет, сенсорные характеристики

Accessibility Guidelines