Аккордеон для вопросов и ответов в Тильде собирается из готового блока библиотеки. Как сделать аккордеон в Тильде: найдите текстовый блок с аккордеоном, заполните пары «вопрос — ответ» через «Контент», опубликуйте страницу и проверьте раскрытие мышью, касанием и клавиатурой. Zero Block, код и сторонние модификации не нужны.
Выберите стандартный блок аккордеона
В таблице доступности Справочного центра Тильды блоки вида «Аккордеон» — это текстовые блоки TX16N и TX16N2, а также блок услуг SV501. Пункты в них озвучиваются считывающим устройством, а перемещаться между ними можно с клавиатуры ([1]).
Для FAQ выберите один из двух текстовых блоков: TX16N или TX16N2.
Что проверить до сборки:
- В библиотеке блоков найдите текстовый блок с аккордеоном по номеру TX16N или TX16N2.
- Убедитесь, что страница, на которой будет FAQ, уже создана: блоки добавляются на страницу в редакторе ([2]).
- Заранее решите, сколько пар «вопрос — ответ» нужно. Это влияет на длину блока и на то, как он смотрится на телефоне.
Откройте меню «Контент» выбранного блока и посмотрите, какие тексты нужно заменить своими вопросами и ответами.
Добавьте вопросы и ответы
Контент блока правится двумя способами: прямо на странице — кликом по тексту, или через меню «Контент» ([2]). Для заполнения FAQ используйте меню «Контент».
Порядок:
- Добавьте блок TX16N или TX16N2 на страницу в нужном месте.
- Откройте «Контент» блока.
- Впишите вопрос в элемент заголовка пункта, ответ — в текст, который раскрывается.
- Повторите для каждой пары. Формулировки вопросов держите короткими, ответы — самодостаточными: человек читает ответ уже после раскрытия и не должен возвращаться к вопросу за контекстом.
- Сохраните. Изменения сохраняются автоматически ([2]).
Про доступность: у блока с заголовком можно задать SEO-тег, чтобы структура страницы читалась скринридером ([1]). Для FAQ это полезно: заголовок раздела получает осмысленный уровень, а не просто крупный шрифт.
При проверке раскройте вопросы по очереди и посмотрите, что происходит с предыдущими ответами. Не рассчитывайте, что при раскрытии следующего вопроса предыдущий автоматически закроется.
Опубликуйте и проверьте раскрытие
Перед публикацией нажмите «Предпросмотр» — он показывает, как будет выглядеть опубликованная страница ([2]). Затем «Опубликовать» и настройте адрес страницы.
Проверка на опубликованной странице, а не в редакторе:
| Что проверяем | Действие | Признак, что всё в порядке |
|---|---|---|
Мышь |
Клик по вопросу |
Ответ раскрывается, повторный клик сворачивает |
Касание |
Открыть страницу на телефоне, тап по вопросу |
Ответ раскрывается, текст не обрезан |
Клавиатура |
Tab до пункта, затем Enter или пробел |
Видна цветная рамка фокуса, пункт раскрывается |
Скринридер |
Включить считывающее устройство, пройти по пунктам |
Вопросы и ответы озвучиваются |
Цветная рамка фокуса при навигации с клавиатуры — штатное поведение блоков Тильды ([1]). Если рамки не видно, проверьте контраст: для нетекстовых элементов ориентир — больше 3:1 ([1]).
Если аккордеон не раскрывается, проверьте адрес открытой страницы и сверьте вопросы и ответы в меню «Контент». После исправлений опубликуйте страницу заново и повторите проверку мышью, касанием и клавиатурой. Если пункт по-прежнему не раскрывается, сохраните адрес страницы и описание действия, при котором возникает проблема, для обращения в поддержку Тильды.
Учебный пример блока FAQ
Учебный пример
Собираем FAQ услуги аудита: три пары вопросов и ответов, без обещаний сроков и цены. Входные данные целиком:
| Вопрос | Готовый ответ | Проверка раскрытия |
|---|---|---|
Что подготовить? |
Ссылку на сайт и описание задачи |
Клик, тап, Tab + Enter — ответ виден |
В каком виде результат? |
Список замечаний и рекомендаций |
Клик, тап, Tab + Enter — ответ виден |
Куда отправить вводные? |
Через форму на сайте |
Клик, тап, Tab + Enter — ответ виден |
Как заполнить: найдите в библиотеке TX16N или TX16N2, откройте «Контент» и перенесите три пары из таблицы в текстовые элементы блока. Сверьте введённые вопросы и ответы с таблицей.
Ожидаемый результат: на опубликованной странице три пункта, каждый раскрывается по клику, по тапу на телефоне и с клавиатуры, ответы совпадают с таблицей дословно.
Проверка по тем же условиям:
- Откройте опубликованную страницу, а не предпросмотр.
- Пройдите все три пункта мышью: каждый раскрывается и сворачивается.
- Откройте на телефоне: тап по каждому вопросу раскрывает ответ, текст не обрезан.
- С клавиатуры: Tab доходит до пунктов, рамка фокуса видна, Enter раскрывает.
- Сверьте текст ответов с таблицей — расхождений быть не должно.
Если какой-то пункт не раскрывается с клавиатуры, вернитесь к разделу проверки и пройдите порядок поиска причины. После исправления повторите проверку всех трёх пунктов.
Готовые формулировки вопросов и ответов для другого сайта можно собрать заранее — см. FAQ для сайта с нейросетью. Если рядом с аккордеоном нужна кнопка действия, пригодится разбор как добавить кнопку в Тильде.
Источники
- Цифровая доступность Tildahelp-ru.tilda.cc
- Как устроена Тильдаhelp-ru.tilda.cc
Автор метода «Машиночитаемый маркетинг»