What is the difference?
Tabs vs Accordion
The difference is how many sections can be open at once, and whether the page height changes. Tabs show one section inside a frame of fixed height; an accordion can hold several open at once and pushes everything below it down.
Ask yourself one question
Does the user ever need two sections visible at the same moment?
Tabs
التبويباتrole="tablist"Use it when
Comparably sized sections the user switches between rather than reads end to end. The fixed frame keeps the page from jumping.
Full entryالتبويبات إطار ثابت الارتفاع؛ القسم يدفع ما تحته.
يعطيك السلوك والوصولية بلا JavaScript، لكن تحريكه متعب.
الأول فقط، أو لا شيء إذا كفت العناوين وحدها.
Accordion
الأقسام المطويةaria-expanded + aria-controlsUse it when
Long, unevenly sized content read selectively, an FAQ being the classic case, or a narrow space such as a phone screen.
Full entryThe classic mistake
Collapsing tabs into an accordion on mobile while keeping the tab ARIA roles. The roles must change with the structure, otherwise what is announced no longer matches what is shown.
Other comparisons