Доступность

Сделано

Что уже работает

• Понятная структура страницы

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

• Работает с клавиатуры

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

• Видимый клавиатурный фокус

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

• Кнопки, в которые легко попасть

  Кнопки, ссылки в шапке и две кнопки-иконки высотой не меньше 44 пикселей. WCAG 2.2 требует не меньше 24. Мы держим 44, потому что сайт часто читают с телефона одной рукой, когда рядом сидит клиент.

• У каждой страницы указан язык

  Каждая страница сообщает браузеру, на каком языке она написана. Переключатель языков помечает каждую из трёх ссылок кодом её языка (lang и hreflang). Поэтому экранная читалка переключается на нужный голос и не читает эстонский текст с английским произношением.

• Ничего не появляется только при прокрутке

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

• Видео здесь только для красоты

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

• Понятные формы

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

• Контраст заложен в палитру

  На сайте намеренно два цвета линий: тонкая светлая для краёв карточек и более тёмная для краёв всего, на что можно нажать или куда можно что-то ввести. Край такого элемента должен давать контраст 3:1, а для декоративного края такого требования нет. Таблица ниже проверяет по этим правилам всю палитру сайта.

Известные пробелы

Чего пока не хватает

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

• Нет ссылки «Перейти к содержимому»

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

• Кнопки остановки движения пока нет

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

• На узком экране меню нужен JavaScript

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

• Чат-ассистенту нужен JavaScript

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

• Повышенная контрастность пока не поддерживается

  Ваш браузер может сообщить сайту, что вам нужно больше контраста, но сайт пока ничего с этим не делает. Обе темы и так сделаны под AA; более контрастной версии пока нет ни у одной.

• В шрифте заголовков нет кириллицы

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

• Независимой проверки не было

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

Метод

Как мы это проверяли

• Коэффициенты в таблице мы вычислили по кодам цветов из таблицы стилей, для обеих тем. Со скриншотов мы их не снимали.
• Мы прошли по каждой анимации по отдельности и нашли, что её останавливает: правило уменьшенного движения в таблице стилей или, для немногих анимаций на холсте, такая же проверка в JavaScript. Мы не делали выводов просто по тому, как ведёт себя сайт.
• Мы читали страницы в том виде, в каком их присылает сервер, с выключенным JavaScript, чтобы убедиться, что текст на месте ещё до запуска любого скрипта.
• Чего мы не делали: независимого аудита, проверки человеком, который каждый день пользуется экранной читалкой, и никакого официального заявления о соответствии. Эта страница не утверждает, что что-то из этого сделано.