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

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

Цвет

Текст

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

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

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

Управление

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

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

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

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

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

Вывод

--

--

--

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. 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

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

More from Medium

Theories Turn to Truth about The Wizard of Oz

Mrs Maisel and Lenny Bruce

THE GREEN CHAIN

“The BITERS” From Beginning to Now