Доступность

Встроено

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

• Один ориентир, один h1

  Каждая страница отдаёт один главный ориентир, один заголовок первого уровня и заголовки, которые спускаются, не перескакивая через уровень. Список заголовков в экранной читалке — это оглавление страницы, и здесь оно настоящее.

• Клавиатура — не постскриптум

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

• Фокус, который видно везде

  Фокус нарисован контуром с отступом от элемента, а не крашеной тенью: режимы высокой контрастности тень выбрасывают, и исчезающее там кольцо фокуса — как раз то, которое было важнее всего.

• Цели, в которые попадаешь

  Кнопки, ссылки в шапке и две иконочные кнопки — не ниже сорока четырёх пикселей. WCAG 2.2 ставит нижнюю границу на двадцати четырёх; мы держим сорок четыре, потому что этот сайт читают одной рукой, с телефона, в комнате, где сидит клиент.

• Язык объявлен

  Каждая страница несёт язык, на котором написана, а переключатель помечает все три локали их собственным языком и hreflang. Экранная читалка меняет голос на переключателе, а не читает эстонский по-английски.

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

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

• Видео — украшение

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

• Формы говорят, чего хотят

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

• Контраст — это токен, а не догадка

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

Честно

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

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

• Ссылки «к содержимому» нет

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

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

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

• На узком экране навигации нужны скрипты

  Ниже девятисот пикселей навигация спрятана за кнопку, а кнопке нужен JavaScript. Без скриптов на телефоне подвал несёт те же ссылки обычным HTML — это работает, но это длинная дорога.

• Агенту нужен JavaScript

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

• Повышенную контрастность читаем и не используем

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

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

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

• Со стороны это никто не проверял

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

Метод

Как это проверялось

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