Верстка сайтов для людей с ограниченными возможностями

  • Минимальный (A)
  • Средний (АА)
  • Высокий (ААА)

Цвет

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

Текст

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

На картинке изображено, как могут искажаться слова. Люди с дислексией не могут читать тексты с низкой контрастностью, неразборчивым шрифтом, маленькими буквами.
  • Обычный текст и текст на картинках должен иметь контрастность не менее 7:1
  • Должна предоставляться возможность изменения размера шрифта (кроме титров и изображений текста) в пределах до 200% без потери контента и функциональности
  • Цвет текста и фона должны иметь гибкие настройки, которые пользователь может менять сам
  • Строка не должна быть длиннее 80 символов
  • Запрещено выравнивание по ширине
  • Минимальный межстрочный интервал — не менее 1,5 интервалов, а интервал между абзацами — минимум в 1,5 раза больше
  • Текст на изображениях должен использоваться только для оформления
  • Текст кнопок и ключевых элементов должен быть информативным
  • Все поля ввода должны иметь осмысленные текстовые метки
  • Шрифт должен быть разборчивым

Не текстовый контент

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

  • Элементы управления должны иметь описание назначения. Продемонстрируем это на примере сайта МБУ “Лицей № 57” г. о. Тольятти school57.tgl.ru, являющегося победителем Общероссийского рейтинга школьных сайтов. У каждой ссылки на другую страницу есть альтернативное описание “Страница n”
  • Медиаконтент, а также контент для создания специфического восприятия должен иметь краткое описание содержания. Медиаконтент должен сопровождаться синхронизированными титрами. На видео-ресурсе youtube.com к кажому видео прикладывается его краткое описание. Видеозаписи снабжены субтитрами, которые можно перевести на различные языки. Субтитры не только передают прямую речь, но и описывают фоновую музыку и сопутствующие звуки.
  • Контент, созданный в целях оформления, должен игнорироваться скринридерами. На сайте Росбанка в некоторых продуктовых разделах есть картинки, не несущие смысловой нагрузки. У этих картинок есть атрибут alt=’’. Он оставлен пустым, чтобы скринридеры его игнорировали.
  • Для капчи должна описываться ее цель. Кроме того, должны быть предоставлены альтернативные формы капчи, доступные для других типов восприятия, помимо визуального. Одной из самых доступных является CAPTHA от Google. Чаще всего для проверки по слову используются изображения, но есть и аудиоверсия, предназначенная для слабовидящих пользователей (её можно вызвать, кликнув иконку кресла на колесах). Альтернативный текст для изображения: “Послушайте запись и введите числа, которые были названы”. К сожалению, такая CAPTCHA не подходит для слепоглухих людей.
  • Картинки и ссылки должны иметь альтернативное описание (alt=””). На сайте ранее описанного лицея у всех картинок, несущих смысл, есть альтернативное описание.

Управление

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

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

Опасность для психики

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

Семантика разметки

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

  • role=main — блок основного контента
  • role=navigation — блок служит для навигации по сайту
  • role=banner — блок является баннером и т. п.

Инструменты валидации

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

Вывод

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

--

--

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
aic blog

aic blog

1.2K Followers

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/