Вкладки или аккордеон — что выбрать и почему Ctrl+F находит только одно из них

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

А теперь неочевидная разница. Нажми Ctrl+F на странице с вкладками и поищи слово из закрытой вкладки — браузер скажет «не найдено». Сделай то же на аккордеоне из тегов <details> — браузер сам раскроет нужную секцию и подсветит слово. Chrome умеет это с 97-й версии, Firefox — с 148-й, Safari — с 26.2.

Разберём остальные различия и решим, что брать.

Что есть что

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

Аккордеон — стопка заголовков. Нажал на заголовок — под ним раскрылась секция и сдвинула всё ниже. Открыть можно одну или несколько, а можно закрыть все.

Nielsen Norman Group разбирала оба паттерна отдельно — и в статье про вкладки (обновлённой в 2024-м) прямо даёт правило выбора между ними. Его и возьмём за основу.

Сравнение по критериям, которые видно сразу

• Телефон. Аккордеон выигрывает. NN/g: на мобильных он работает лучше вкладок, потому что места мало, а ряд вкладок быстро не помещается в ширину и превращается в прокручиваемую карусель.
• Компьютер. Здесь чаще выигрывают вкладки. Закрытый аккордеон на широком экране выглядит пустым, а вкладки держат длинное содержимое и сложную вёрстку.
• Длина подписей. Вкладкам нужны короткие названия — иначе ряд вылезает за экран. У аккордеона заголовок может быть целым вопросом, поэтому все блоки FAQ устроены именно так.
• Сравнить два блока. Во вкладках нельзя увидеть две панели одновременно: человек переключается туда-сюда и держит всё в голове. В аккордеоне можно открыть две секции — если ты не запретил это автозакрытием.
• Поиск по странице. Скрытую панель вкладки обычный поиск браузера не видит. Аккордеон на <details> раскрывается сам при поиске и при переходе по ссылке с якорем.
• Печать. Тут у аккордеона минус: NN/g отмечает, что закрытые секции не печатаются, пока их не раскроешь по одной. Лечится кнопкой «Раскрыть всё».
• Клавиатура. Разные схемы. По руководству W3C для вкладок фокус заходит в ряд, а между вкладками ходят стрелками. Секция аккордеона — это кнопка раскрытия: Enter или пробел.
• Сколько кода. Аккордеон бывает вообще без JavaScript. Вкладкам почти всегда нужен скрипт и набор ARIA-ролей: tablist, tab, tabpanel.

Вот весь аккордеон, где одновременно открыта только одна секция:

<details name="faq">
  <summary>Сколько идёт доставка?</summary>
  <p>Два-три дня по городу.</p>
</details>
<details name="faq">
  <summary>Можно вернуть товар?</summary>
  <p>Да, в течение 14 дней.</p>
</details>

Одинаковый атрибут name связывает секции в группу: откроешь одну — другая закроется. По данным MDN, это поддерживают Chrome с 120-й версии, Firefox с 130-й и Safari с 17.2.

Кому что подойдёт — прямой ответ

• FAQ, условия доставки, характеристики на телефоне → аккордеон. Длинные заголовки, человеку нужен один-два пункта, поиск по странице работает.
• Одни и те же данные в разных разрезах → вкладки. «День / неделя / месяц» над графиком, «Описание / Отзывы / Характеристики» на десктопе. У NN/g это классический случай: на каждой вкладке одинаковая структура, меняются только данные.
• Вкладок столько, что ряд не влезает в ширину → не вкладки. NN/g советует держать их немного: ряд, уехавший в карусель, прячет часть вкладок так же, как гамбургер-меню прячет разделы.
• Человеку нужно почти всё содержимое → ни то, ни другое. Оба паттерна увеличивают число действий. Если читать будут всё подряд или сравнивать секции, NN/g прямо советует показать всё на одной длинной странице.

И одна ловушка на телефоне. В исследовании NN/g люди раскрывали секцию аккордеона, страница прокручивалась так, будто открылась новая, — и они жали «Назад». Браузер уводил их со страницы целиком. Не прокручивай страницу при раскрытии, а если прокручиваешь — сделай так, чтобы «Назад» закрывал секцию.

Если открытая вкладка должна переживать обновление и пересылку ссылки, её стоит хранить в адресе — как это сделать, показали в инструкции как сохранить фильтры в URL. А на узком экране вся эта логика выбора работает вместе с общей адаптивной вёрсткой.

Можно на телефоне превращать вкладки в аккордеон?

Да, это прямое следствие правила NN/g: на широком экране вкладки удобнее, на узком — аккордеон. Главное, чтобы содержимое и порядок секций совпадали, иначе человек потеряется при повороте экрана.

Открывать первую секцию аккордеона по умолчанию?

Чаще нет. NN/g описывала страницу, где раскрытая первая секция заняла весь экран, и люди не увидели, что ниже есть другие разделы. Закрытые заголовки работают как оглавление.

А если скрыть панели вкладок, но оставить их находимыми для поиска?

Для этого есть атрибут hidden="until-found": элемент скрыт, но поиск по странице и якорные ссылки его раскрывают. Это более новая возможность, чем раскрытие <details>, так что проверь поддержку в нужных тебе браузерах.