Модули аккордеона и табов: производительность и доступность на сайте

Аккордеон и табы: как не провалить Core Web Vitals и доступность

Мы часто сталкиваемся с проектами, где аккордеоны и табы реализованы без учёта производительности и доступности. Типичные проблемы: анимация высоты на height: auto вызывает Layout Shift, контент скрытых панелей не индексируется, а отсутствие ARIA-атрибутов делает компоненты недоступными для скринридеров. Результат — низкий LCP, проваленный аудит Lighthouse, потеря до 30% трафика с мобильных устройств. Наш опыт показывает, что правильная реализация этих компонентов «под ключ» занимает от 2 до 3 дней и включает: серверный рендер, URL-синхронизацию, Schema.org разметку и полную поддержку WCAG 2.1 AA. Ниже — конкретные решения, которые мы применяем в продакшене.

Проблемы, которые решаем

Как избежать CLS при анимации аккордеона?

Использование height: auto в CSS transitions приводит к перерасчёту layout. Решение — JavaScript с измерением scrollHeight и установкой фиксированного значения. Мы применяем этот подход уже в 30+ проектах. Альтернатива — CSS grid-template-rows: 0fr / 1fr с overflow: hidden. Но JS-версия обеспечивает плавную анимацию во всех браузерах, включая старые Safari.

Почему контент в табах может не индексироваться?

Google индексирует содержимое с display: none, но придаёт ему меньший вес. Для SEO-критичного контента используем visibility: hidden + position: absolute и серверный рендер всех панелей. Сравните: при клиентском скрытии контент получает вес 0.3 от открытого, а при SSR — полный вес. В одном из проектов это увеличило видимость страницы на 25% по данным Яндекс.Вебмастера.

Как сделать табы доступными для клавиатуры?

Реализуем паттерн role="tablist" с ArrowLeft/Right, Home/End. Управление фокусом происходит через tabIndex. Без этого компонент не проходит WCAG 2.1 AA.

Как мы это делаем: стек и кейс

Используем React 18, Next.js 14, TypeScript, Tailwind. Для анимации — CSS transitions с JS-управлением высотой. Пример аккордеона (сокращённый):

import { useState, useRef, useEffect } from 'react' interface AccordionItem { id: string title: string content: React.ReactNode } function AccordionItem({ item, isOpen, onToggle }: { item: AccordionItem isOpen: boolean onToggle: () => void }) { const contentRef = useRef<HTMLDivElement>(null) const [height, setHeight] = useState(0) useEffect(() => { if (contentRef.current) { setHeight(isOpen ? contentRef.current.scrollHeight : 0) } }, [isOpen]) return ( <div className="accordion-item"> <button className="accordion-item__trigger" onClick={onToggle} aria-expanded={isOpen} aria-controls={`accordion-content-${item.id}`} id={`accordion-btn-${item.id}`} > {item.title} </button> <div id={`accordion-content-${item.id}`} role="region" aria-labelledby={`accordion-btn-${item.id}`} style={{ height, overflow: 'hidden', transition: 'height 0.3s ease' }} > <div ref={contentRef} className="accordion-item__body"> {item.content} </div> </div> </div> ) } 

Для табов обязательно добавляем URL-синхронизацию через useSearchParams и Schema.org разметку для FAQ. Пример табов с keyboard navigation:

import { useState, useRef } from 'react' interface Tab { id: string label: string content: React.ReactNode } export function Tabs({ tabs, defaultTab }: { tabs: Tab[]; defaultTab?: string }) { const [activeId, setActiveId] = useState(defaultTab ?? tabs[0]?.id) const tablistRef = useRef<HTMLDivElement>(null) function handleKeyDown(e: React.KeyboardEvent, currentIndex: number) { let newIndex = currentIndex if (e.key === 'ArrowRight') newIndex = (currentIndex + 1) % tabs.length else if (e.key === 'ArrowLeft') newIndex = (currentIndex - 1 + tabs.length) % tabs.length else if (e.key === 'Home') newIndex = 0 else if (e.key === 'End') newIndex = tabs.length - 1 else return e.preventDefault() setActiveId(tabs[newIndex].id) const tabEls = tablistRef.current?.querySelectorAll('[role="tab"]') ;(tabEls?.[newIndex] as HTMLElement)?.focus() } return ( <div className="tabs"> <div role="tablist" ref={tablistRef} className="tabs__list"> {tabs.map((tab, i) => ( <button key={tab.id} role="tab" id={`tab-${tab.id}`} aria-selected={activeId === tab.id} aria-controls={`tabpanel-${tab.id}`} tabIndex={activeId === tab.id ? 0 : -1} onClick={() => setActiveId(tab.id)} onKeyDown={e => handleKeyDown(e, i)} className={`tabs__tab ${activeId === tab.id ? 'tabs__tab--active' : ''}`} > {tab.label} </button> ))} </div> {tabs.map(tab => ( <div key={tab.id} role="tabpanel" id={`tabpanel-${tab.id}`} aria-labelledby={`tab-${tab.id}`} hidden={activeId !== tab.id} tabIndex={0} className="tabs__panel" > {tab.content} </div> ))} </div> ) } 

Серверный рендер всех панелей решает проблему SEO. Для этого в Next.js используем force-dynamic на странице с табами или рендерим все панели в HTML, скрывая их через CSS (не через display:none, а через position:absolute; visibility:hidden; height:0; overflow:hidden).

.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; } .accordion__panel--open { grid-template-rows: 1fr; }