Доступність сайту на 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 у стандартні блоки, якщо задача розв’язується на місці
• Не чіпаємо дизайн без вашої згоди: порядок шарів міняємо так, щоб вигляд лишився тим самим

Перевірте свій сайт просто зараз

Безкоштовна перевірка читає той самий код сторінки, що бачить перевіряючий: збільшення, імена кнопок, підписи полів, порядок заголовків, заява. Вона не замінює ручний аудит, але показує, з чого починати.