Что WCAG 2.1 AA на самом деле означает для туров Matterport

WCAG 2.1 AA — это стандарт, к которому отсылают и израильский стандарт SI 5568, и европейский EN 301 549, и американские ADA и Section 508. Но что именно он требует, когда речь идёт о виртуальном туре Matterport? Ниже — практический разбор: критерий за критерием, с пояснением, что каждый из них значит на практике для вашего 3D-тура.

WCAG за 30 секунд

Рекомендации по доступности веб-контента (WCAG) строятся вокруг четырёх принципов. Любой веб-контент должен быть:

1. Воспринимаемым Пользователь должен иметь возможность воспринять контент хотя бы одним из органов чувств.
2. Управляемым Пользователь должен иметь возможность взаимодействовать с интерфейсом.
3. Понятным Пользователь должен понимать и сам контент, и то, как работает интерфейс.
4. Надёжным Контент должен стабильно работать с разными технологиями и вспомогательными средствами.

Уровень AA — золотая середина: это не минимум (уровень A) и не самая высокая планка (уровень AAA). Именно его регуляторы по всему миру выбрали как разумный стандарт соответствия. Все критерии ниже относятся к уровню A или AA.

Воспринимаемость: видят и слышат ли пользователи ваш контент?

1.1.1, Нетекстовый контент (уровень A)

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

Что это значит для Matterport: 3D-пространство передаётся исключительно через изображение. Обычный тур Matterport не сопровождается текстовыми описаниями того, что видит посетитель. Оверлей доступности добавляет к каждой панораме субтитры с описанием пространства: «Вы стоите в главном зале локомотивов, перед вами паровоз 1920-х годов», — и пользователи скринридеров и те, кто полагается на субтитры, понимают, где находятся и что вокруг них.

1.3.1, Информация и взаимосвязи (уровень A)

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

Что это значит для Matterport: кнопкам точек интереса, панели субтитров, переключателю языка и элементам управления доступностью нужна корректная семантическая разметка HTML и роли ARIA. Зрячий человек видит кнопку, парящую в 3D-пространстве; пользователю скринридера нужно услышать «Информационная кнопка: локомотив» — с верной ролью и подписью. Это достигается через role="button", aria-label и продуманную разметку HTML, которая повторяет визуальную иерархию.

1.4.3, Контрастность (минимальная) (уровень AA)

Что требуется: контрастность текста относительно фона должна быть не ниже 4,5:1 — а для крупного текста (18 pt или 14 pt полужирным) достаточно 3:1.

Что это значит для Matterport: элементы оверлея — субтитры, подписи точек интереса, кнопки, элементы управления — лежат поверх живого 3D-фона, который меняется с каждым шагом посетителя. Цвет этого фона вам не подвластен. Решение — полупрозрачные тёмные подложки под всем текстом: они держат нужную контрастность независимо от того, что оказалось позади. А переключатель высокой контрастности даёт посетителю включить режим максимального контраста, когда читать нужно ещё проще.

1.4.11, Контрастность нетекстовых элементов (уровень AA)

Что требуется: компонентам интерфейса и графическим объектам нужна контрастность не ниже 3:1 относительно соседних цветов.

Что это значит для Matterport: кнопки точек интереса, переключатель языка, элементы панели доступности — каждый интерактивный элемент должен чётко отделяться от 3D-сцены за ним. На практике это сплошная заливка кнопок, заметные границы и ясные состояния фокуса, контраст которых не зависит от 3D-сцены позади.

1.4.4, Изменение размера текста (уровень AA)

Что требуется: текст можно увеличить до 200% без потери содержимого и функций.

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

Управляемость: могут ли пользователи перемещаться и взаимодействовать?

2.1.1, Клавиатура (уровень A)

Что требуется: всеми функциями можно управлять с клавиатуры.

Что это значит для Matterport: здесь у обычного тура Matterport самое слабое место. Штатный просмотрщик рассчитан только на мышь и касания. Оверлей доступности добавляет полноценное управление с клавиатуры: Tab переводит между точками интереса, Enter открывает их, Escape закрывает панели, а стрелки или горячие клавиши перемещают между панорамами. С клавиатуры должен работать каждый интерактивный элемент оверлея — переключатель языка, настройки шрифта, режим высокой контрастности, аудиоплеер.

2.1.2, Отсутствие клавиатурной ловушки (уровень A)

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

Что это значит для Matterport: когда посетитель открыл панель точки интереса или настройки доступности, Escape или Tab обязаны надёжно вернуть фокус в основной интерфейс. Ни один компонент не вправе запереть фокус клавиатуры в петле. Поэтому фокусом нужно управлять аккуратно: запомнить, где он был до открытия панели, и вернуть туда же после закрытия.

2.4.2, Заголовок страницы (уровень A)

Что требуется: у страниц должны быть содержательные заголовки.

Что это значит для Matterport: элемент <title> страницы должен описывать сам тур — «Парк Вольфсон, доступный виртуальный тур», а не «Matterport Showcase» или безликий заголовок. А когда посетитель переходит к новой панораме, заголовок должен обновляться на лету и отражать, где он сейчас.

2.4.3, Порядок фокуса (уровень A)

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

Что это значит для Matterport: порядок перехода по Tab должен подчиняться логике пространства: сначала элементы управления доступностью, потом переключатель языка, затем кнопки точек интереса в осмысленной последовательности и, наконец, навигация. Открылась панель точки интереса — фокус уходит в неё. Закрылась — фокус возвращается к кнопке, которая её открыла.

2.4.7, Видимость фокуса (уровень AA)

Что требуется: фокус клавиатуры должен быть виден.

Что это значит для Matterport: у каждого фокусируемого элемента должна быть чёткая, заметная рамка фокуса. Для кнопок точек интереса, парящих в 3D-пространстве, это означает контрастную обводку, видную на любом фоне. Стандартной обводки браузера в условиях 3D обычно мало — нужны собственные стили фокуса с достаточным контрастом и толщиной.

Понятность: могут ли пользователи следить за происходящим?

3.1.1, Язык страницы (уровень A)

Что требуется: язык страницы по умолчанию должен определяться программно.

Что это значит для Matterport: атрибут lang в HTML должен быть задан верно: lang="en" для английского, lang="he" для иврита и так далее. Когда посетитель переключает язык в оверлее, атрибут lang должен меняться вместе с ним, а для языков с письмом справа налево — иврита и арабского — атрибут dir должен переключаться на rtl.

3.1.2, Язык фрагментов (уровень AA)

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

Что это значит для Matterport: если в туре на иврите встречается название экспоната на английском, ему нужен атрибут lang="en". В многоязычном туре у каждого блока субтитров и каждой области контента точки интереса должен стоять верный признак языка — тогда программы чтения с экрана вовремя переключают движок произношения.

3.2.1, При получении фокуса (уровень A)

Что требуется: перевод фокуса на компонент не должен сам по себе менять контекст.

Что это значит для Matterport: переход по Tab к кнопке точки интереса не должен сам открывать её панель. Фокус на переключателе языка не должен сам менять язык. Изменение запускает только явное действие пользователя — Enter или Space. Звучит как очевидность, но в интерактивных 3D-интерфейсах это распространённая ошибка.

Надёжность: работает ли это со вспомогательными технологиями?

4.1.2, Имя, роль, значение (уровень A)

Что требуется: у всех компонентов интерфейса имя, роль и состояние должны определяться программно.

Что это значит для Matterport: каждому самописному виджету в оверлее — кнопкам точек интереса, аудиоплееру, ползунку размера шрифта, переключателю контрастности — нужны подходящие атрибуты ARIA. Кнопке точки интереса нужны role="button" и aria-label="Информация: локомотив". Аудиоплееру — role="region" и aria-label="Аудиосопровождение". Переключателю контрастности — aria-pressed="true/false". Без них вспомогательные технологии не смогут сказать, что это за элементы и в каком они состоянии.

4.1.3, Сообщения о статусе (уровень AA)

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

Что это значит для Matterport: когда посетитель переходит к новой панораме и субтитры меняются, об этом нужно сообщить программам чтения с экрана, не перехватывая фокус. Делается это через область aria-live="polite", в которую обёрнут текст субтитров. Меняется текст — скринридер сам зачитывает описание новой панорамы. То же и с сообщениями о статусе: «Язык изменён на арабский» или «Высокая контрастность включена».

Что стандартный тур Matterport не проходит

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

Стандартный тур Matterport не проходит или проходит лишь частично 14 из 14 применимых критериев WCAG 2.1 AA. Это уже не пробел в соответствии, а полное его отсутствие.

Стандарты, которые ссылаются на WCAG

WCAG 2.1 AA — это не просто рекомендация, а технический стандарт, на который опираются ключевые нормы:

• Израильский стандарт SI 5568 Согласован с WCAG 2.0 AA и дополнен положениями о поддержке иврита и арабского языка. Действует в рамках Положений о равных правах людей с инвалидностью (доступность услуги).
• EN 301 549 (Европа) Гармонизированный европейский стандарт доступности ИКТ прямо включает требования WCAG 2.1 AA.
• ADA (США) Суды берут WCAG 2.1 AA за ориентир цифровой доступности в рамках Закона об американцах с инвалидностью.
• Section 508 (федеральный уровень США) Обновлённые стандарты опираются на WCAG 2.0 AA, а ведомства всё чаще применяют к новому контенту версию 2.1 AA.

Выполнить WCAG 2.1 AA — значит сразу соответствовать (или почти соответствовать) всем четырём этим регуляторным рамкам.

Вам не обязательно создавать это самостоятельно

Чтобы реализовать все эти требования поверх тура Matterport, нужно досконально знать SDK Matterport, разбираться в WCAG, паттернах ARIA, многоязычной вёрстке (в том числе RTL) и проектировании 3D-взаимодействия. Это узкий стык навыков, которого у большинства команд разработки просто нет в штате.

Именно этим и занимается Geemaps Accessibility. Мы уже закрыли каждое из этих требований в боевом проекте — 4 языка, полное соответствие WCAG 2.1 AA — для «Белой площади» в парке Вольфсон по заказу муниципалитета Тель-Авив-Яффо. Тот же проверенный оверлей мы ставим и на ваш тур.