Доступность сайта на Tilda Стандартные блоки почти готовы — ломается обычно Zero Block

Что Tilda делает за вас

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

• Блоки с меню, формами, плитками, видео, вкладками и слайдерами размечены для управления с клавиатуры
• У того, кто идёт с клавиатуры, видна цветная рамка активного элемента
• Шапка и подвал помечаются автоматически — экранный диктор понимает, где что
• Всплывающие окна озвучиваются и проходятся с клавиатуры
• Поля форм, сообщения об успехе и об ошибке доступны диктору

Что остаётся в ваших настройках

1. 01

   Заголовки

   Уровень задаётся в «SEO: Title Tag» в настройках блока. Один H1 на страницу, без пропусков уровней. Самая частая ошибка — H1 в каждом экране или заголовок, выбранный по размеру шрифта.

2. 02

   Описания картинок

   Alt заполняется в настройках изображения, в галереях — в отдельном поле «Image alt for SEO». Декоративным картинкам описание не нужно, смысловым — обязательно.

3. 03

   Шапка и подвал

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

4. 04

   Формы

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

5. 05

   Контраст и язык

   Контраст текста к фону — от 4,5:1, крупного текста и кнопок — от 3:1. Язык сайта задаётся в настройках и попадает в код страницы: без него диктор читает текст с чужим произношением.

Zero Block — главная ловушка

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

• Порядок перехода фокуса нужно проверять вручную и перестраивать слои под него
• Пустые элементы со смысловой ролью диктор объявляет как пустоту — их убирают
• Текст, вставленный картинкой, для диктора не существует; в Zero Block так делают часто
• Заголовкам внутри Zero Block тоже нужен SEO-тег, иначе это просто крупный текст

Чего Tilda не закрывает вовсе

• Поведение страницы при увеличении на телефоне — проверяется только руками
• Заявление о доступности: ни текста, ни напоминания о нём платформа не даёт
• Субтитры и расшифровки к видео
• Смысл, переданный одним цветом: «красные поля обязательны»
• Текст ссылок: «подробнее» и «читать далее» диктор зачитывает без смысла
• Сторонний код в блоке T123 и внешние виджеты — это ваша ответственность, не платформы

Что делаем мы

1. 01

   Проверяем руками

   Проходим сайт только с клавиатуры, слушаем экранным диктором, увеличиваем страницу до 200 %. Именно так находится обратный порядок фокуса в Zero Block — автоматическая проверка его не покажет.

2. 02

   Наводим порядок в настройках

   Заголовки, alt, подписи полей, язык сайта, контраст, шапка и подвал на своих страницах. Это работа в интерфейсе Tilda, без кода — и она закрывает большую часть находок.

3. 03

   Перебираем Zero Block

   Выстраиваем порядок слоёв под порядок чтения, убираем пустые элементы, заменяем текст-картинку на текст. Где без кода не обойтись — правим в блоке со своим кодом.

4. 04

   Готовим заявление

   Пишем текст заявления о доступности и ставим отдельной страницей со ссылкой в подвале. То, что осталось неисправленным, перечисляем прямо в нём.

Чего мы не делаем

• Не ставим виджет доступности вместо работы
• Не обещаем «полного соответствия»: часть требований зависит от вашего содержимого и проверяется человеком
• Не пересобираем весь сайт из Zero Block в стандартные блоки, если задача решается на месте
• Не трогаем дизайн без вашего согласия: порядок слоёв меняем так, чтобы вид остался прежним

Проверьте свой сайт прямо сейчас

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