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

Адаптация с помощью JavaScript + CSS

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

Контрастная версия сайта. Все цвета на странице должны быть контрастными между собой, чтобы люди, которые не различают оттенки или близкие тона могли спокойно воспринимать информацию. Это может быть белый фон и черные буквы или, наоборот, черный фон и белые буквы.
Изменение размера шрифта. У всех людей с нарушением зрения разные возможности, потому на адаптированной версии необходимо оставить элементы для изменения размера текста. Шрифты изменяются от 16, 18, 20 px.

За стандарты разработки сайтов отвечает W3C (Консорциум всемирной паутины). В рамках этой компании были выпущены WCAG (рекомендации по доступности содержание интернет-ресурсов). Согласно этим документам, доступность определена четырьмя принципами: понятность, воспринимаемость, управляемость и надежность. Чтобы сайт стал читаемым, стоит обратить внимание на семантическую верстку.

Семантическая верстка

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

Теги структуры документа: <html>, <head>, <body>.
Текстовые теги: <p>, <h1>, <blockquote>.
Медиа теги: <img>, <video>.
Корреляционные теги: <ul>, <ol>.

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

Медиа теги <img> с описанием alt

Не всегда на сайтах необходимо удалять изображения. Многие незрячие или слабовидящие люди используют программы экранного доступа. Например, Jaws, NVDA, Orca. Именно поэтому к каждой картинке, файлу, полю форм, ссылке или любому другому дополнению нужно текстовое сопровождение. То есть, суть любого медиа-файла должна быть передана в текстовом формате.

ТСР для сёрфинга в интернете.

Помимо программ экранного доступа, слабовидящие могут использовать Брайлевский дисплей, программы увеличения экрана, принтер для печати рельефно-точечным шрифтом. Работают эти дополнения следующим образом:

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

Пример работы программы экранного доступа

Специальный ГОСТ Р 52872-2019

Все правила создания адаптированных сайтов для слабовидящих, дополнения и объяснения есть в ГОСТ Р 52872-2019. Например, в соответствии с документом, выделено три уровня доступности сайтов, к каждому из которых свои требования.

Уровень А

«Критерий успешного применения 1.1.1

Нетекстовый контент (Уровень А) .

Весь нетекстовый контент, представленный пользователю, имеет эквивалентную текстовую версию, кроме описанных ниже случаев:

элементы управления, ввод информации;
тест;
сенсорное восприятие;
капча;
оформление, форматирование, невидимый контент.

Критерий успешного применения 1.2.1

Только аудио- и только видео (запись) (Уровень А).

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

запись только аудио: предоставляется альтернативная текстовая версия медиаконтента;
запись только видео: предоставляются либо альтернативная текстовая версия медиаконтента, либо отдельная звуковая дорожка.

Критерий успешного применения 1.2.2

Титры (запись) (Уровень А).

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

Критерий успешного применения 1.2.3

Тифлокомментарий или альтернативная версия (запись) (Уровень А).

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

Критерий успешного применения 1.3.1

Информация и смысловые связи (Уровень А).

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

Критерий успешного применения 1.3.2

Значимая последовательность представления контента (Уровень А).

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

Критерий успешного применения 1.3.3

Характеристики, воспринимаемые органами чувств (Уровень А).

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

Критерий успешного применения 2.1.1

Клавиатура (Уровень А).

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

Критерий успешного применения 2.1.2

Отсутствие «клавиатурных ловушек» (Уровень А).

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

Критерий успешного применения 2.1.4

Клавиши быстрого доступа (Уровень А).

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

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

Уровень АА

Критерий успешного применения 1.2.4

Титры (прямой эфир) (Уровень АА).

Титры предоставляются для всего аудио в синхронизированном медиаконтенте, транслируемом в прямом эфире.

Критерий успешного применения 1.2.5

Тифлокомментарий (запись) (Уровень АА).

Тифлокомментарий предоставляется для всего заранее записанного видео в синхронизированном медиаконтенте.

Критерий успешного применения 1.3.4

Ориентация (Уровень АА).

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

Критерий успешного применения 1.3.5

Указание назначения полей ввода информации (Уровень АА).

Назначение каждого поля для сбора информации о пользователе должно быть программно определено в следующих случаях:

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

Уровень ААА

Критерий успешного применения 1.2.6

Жестовый язык (запись) (Уровень ААА).

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

Критерий успешного применения 1.2.7

Расширенный тифлокомментарий (запись) (Уровень ААА).

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

Критерий успешного применения 1.2.8

Альтернативная версия (запись) (Уровень ААА).

Альтернативная версия медиаконтента, ограниченного по времени, предоставляется для всего заранее записанного синхронизированного медиаконтента и для всего заранее записанного только видео.

Критерий успешного применения 1.2.9

Только аудио (прямой эфир) (Уровень ААА).

Предоставляется альтернативная версия медиаконтента, ограниченного по времени, содержащая полностью эквивалентную информацию транслируемому в прямом эфире только аудио.

Критерий успешного применения 1.3.6

Указание назначения (Уровень ААА).

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

Критерий успешного применения 2.1.3

Клавиатура (без исключений) (Уровень ААА).

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

Это основные вырезки ГОСТа. Для более подробного изучения можно перейти к полной версии документа (ГОСТ Р 52872-2019 скачать).

Чтобы выяснить, соответствует ли ваш сайт требованиям, удобен ли он для целевой аудитории, есть несколько способов:

• Самостоятельно. Стоит подробно изучить все законы и рекомендации, связанные с этим вопросом, чтобы при адаптации соблюсти максимальное количество норм.

• С помощью технологий. Если самостоятельно возможности проверить сайт нет, стоит воспользоваться услугами специализированных программ: автопроверка или вспомогательные технологии.

• Обратиться к аудитории. Также один из вариантов – использовать помощь людей, которые в дальнейшем будут пользоваться сервисом. Затем, опираясь на комментарии со стороны бета-тестеров, можно дорабатывать веб-страницу.

Распространенные ошибки при создании сайта.

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

1. Использование фреймов (тег <frame>). Использование фреймов значительно усложняет структуру сайта, в дальнейшем людям с нарушением зрения будет сложно найти и разобрать нужную информацию.

2. Страницы без структурированных заголовков. Структура веб-страницы помогает быстро и просто найти необходимые блоки информации. Без использования заголовков, текст сливается в одно труднодоступное полотно.

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

4. Контент сложный для восприятия. Несоответствие ГОСТу, излишние украшения сайта, неудобный текст – все это приводит к не читаемости страницы, что противоречит одному из главных принципов адаптации сайтов.

5. Немаркированные списки. Структура веб-страницы помогает быстро и просто найти необходимые блоки информации. Без использования маркировки, текст сливается в одно труднодоступное полотно.

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

Ошибка - текстовая информация на картинке

Ошибка - излишние украшение сайта различными символами

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

Это важный момент работы с людьми с ограниченными возможностями.