Аккордеон — как работают раскрывающиеся разделы
Что такое аккордеон
Аккордеон — это несколько блоков с заголовками, которые можно раскрывать и сворачивать. Посетитель нажимает на нужный заголовок и видит ответ прямо под ним.
Например, на странице магазина есть вопросы «Как оплатить заказ?», «Когда привезут товар?» и «Как вернуть покупку?». В закрытом аккордеоне видны все три вопроса. Человек нажимает на второй и читает условия доставки. Остальные ответы занимают меньше места, а нужный ответ остаётся рядом со своим вопросом.
У аккордеона может быть два режима.
- Несколько блоков открываются одновременно. Посетитель может сопоставить условия оплаты и доставки.
- Открыт только один блок. Когда человек раскрывает следующий вопрос, предыдущий ответ сворачивается.
Выбирайте режим по задаче. Если человек часто сравнивает соседние ответы, возможность держать их открытыми облегчает чтение.
Чем аккордеон отличается от вкладок
Аккордеон раскрывает текст под заголовком. Вкладки переключают содержимое в общей области. Сравним оба варианта на странице товара с описанием, характеристиками и отзывами.
| Аккордеон | Вкладки |
|---|---|
| Где находятся названия. Заголовки идут один под другим. | Где находятся названия. Названия собраны в отдельной полосе или списке. |
| Где появляется текст. Характеристики раскрываются под своим заголовком. | Где появляется текст. Характеристики заменяют описание в общей области. |
| Что видно одновременно. В подходящем режиме можно открыть несколько блоков. | Что видно одновременно. Показывается содержимое выбранной вкладки. |
На узкой странице аккордеон удобен, когда длинные названия помещаются в отдельных строках. На широком экране вкладки могут быть удобны, если человек переключается между самостоятельными частями. В обоих случаях по названию должно быть понятно, что откроется после нажатия.
Что оставлять открытым на странице
В аккордеон удобно помещать справочные подробности, которые нужны части посетителей. Сведения, без которых трудно принять решение, стоит показать сразу. Если человек выбирает услугу, ему полезно быстро увидеть цену или условия её расчёта.
- Оставьте на виду название услуги, основное предложение и способ заказать.
- Сверните подробности об оплате, вариантах доставки или возврате, если у каждого вопроса есть собственный короткий ответ.
- Подпишите точно. Заголовок «Можно ли вернуть товар без упаковки?» полезнее общего «Дополнительно». Он помогает найти ответ ещё до открытия аккордеона.
Для поиска имеет значение, присутствует ли ответ в загруженной странице. Если текст уже загружен и аккордеон лишь скрывает его, нажатие меняет видимость. Если ответ загружается отдельным запросом только после нажатия, Google может его не получить. Попросите разработчика проверить, есть ли нужный текст на странице до взаимодействия с блоком.
Как проверить аккордеон
Проверьте, понятно ли посетителю, где нажать, что открылось и как закрыть ответ. Начните с телефона, затем пройдите тот же сценарий с клавиатуры.
- Нажмите на заголовок. Ответ должен появиться под ним. Значок или другой видимый признак должен показать, что блок открыт.
- Перейдите к заголовку клавишей Tab. Проверьте, что видно выделение. Нажмите Enter или пробел и убедитесь, что аккордеон раскрывается.
- Откройте соседний вопрос. Проверьте, соответствует ли поведение выбранному режиму. Если предусмотрено одновременное раскрытие, предыдущий ответ должен оставаться видимым.
- Проверьте длинный ответ. Ссылка или кнопка внутри открытого блока должна быть доступна, а текст должен помещаться по ширине телефона.
Для простого раскрывающегося блока можно использовать HTML-элементы details и summary. Первый содержит весь блок, второй задаёт его видимый заголовок. Если разработчик делает аккордеон самостоятельно, попросите проверить, что программа чтения с экрана сообщает, открыт блок или закрыт.
После замены текста повторите проверку на длинном вопросе. Если подпись переносится на две строки, аккордеон должен оставаться удобным для нажатия. Проверьте, что весь заголовок читается и значок раскрытия остаётся виден.