Webový vývoj se v roce 2025 stále více vrací k základům – a to je dobrá zpráva. Moderní HTML dnes nabízí řešení, která jsme ještě před pár lety museli nahrazovat JavaScriptem. Jedním z nejlepších příkladů je accordion (rozbalovací sekce), který lze dnes vytvořit bez jediného řádku JavaScriptu.
Tento článek je primárně určený vývojářům, ale i pro laika by mělo být zřejmé, jaké výhody takové řešení přináší: rychlejší web, lepší přístupnost a vyšší spolehlivost.
Proč jsme dříve accordion řešili pomocí JavaScriptu
Accordion je na první pohled jednoduchá interakce – kliknutím na nadpis se zobrazí obsah. Historicky ale HTML nenabízelo nativní prvek, který by:
- správně řešil stav otevřeno / zavřeno,
- byl přístupný pro klávesnici a čtečky obrazovky,
- fungoval bez dodatečné logiky.
Výsledkem byla JavaScriptová řešení s množstvím kódu, ARIA atributů a často i externích knihoven – kvůli poměrně jednoduchému chování.
Řešení v roce 2025: <details> a <summary>
Moderní HTML přináší nativní řešení v podobě elementů
<details> a <summary>.
Tyto prvky řeší většinu problémů automaticky.
<details>
<summary>Co je nového v HTML?</summary>
<p>Akordeon bez JavaScriptu</p>
</details>
Prohlížeč sám zajišťuje ovládání, správu stavu i základní přístupnost. Vývojář se může soustředit na obsah a strukturu.
Hlavní výhody accordionu bez JavaScriptu
Lepší přístupnost (WCAG a EAA)
Nativní HTML prvky mají výraznou výhodu z hlediska přístupnosti.
<summary> je automaticky fokusovatelný,
ovladatelný klávesnicí a správně interpretovaný asistivními technologiemi.
To znamená, že není nutné ručně nastavovat ARIA atributy a snižuje se riziko chyb, které by mohly vést k nevyhovění standardům WCAG 2.2 nebo European Accessibility Act.
Méně kódu a nižší technický dluh
Odstranění JavaScriptu znamená méně kódu, méně chyb a jednodušší údržbu. Zároveň odpadá závislost na konkrétním frameworku nebo knihovně.
Lepší výkon
Každý odstraněný JavaScriptový soubor zlepšuje rychlost načítání stránky a pozitivně ovlivňuje metriky jako Core Web Vitals. Accordion bez JavaScriptu funguje okamžitě.
Accordion bez JavaScriptu funguje i při selhání skriptů
Pokud JavaScript selže, nenačte se nebo je záměrně vypnutý, nativní accordion zůstává plně funkční. To je základní princip robustního a odolného webu.
Existují nějaká omezení nebo nevýhody?
Historický kontext
V minulosti neuměl element <details> zajistit,
aby byl otevřený pouze jeden panel. Pro klasické chování accordionu
bylo nutné použít JavaScript.
Toto omezení dnes už neplatí.
Moderní řešení v roce 2025: atribut name
Pokud více elementů <details> sdílí stejnou hodnotu
atributu name, chovají se jako vzájemně se vylučující skupina.
V jeden okamžik je otevřený vždy jen jeden panel.
<section>
<h3>FAQ – HTML 2025</h3>
<details name="faq">
<summary>Co je nového v HTML?</summary>
<p>Akordeon bez JavaScriptu</p>
</details>
<details name="faq">
<summary>Je potřeba JS?</summary>
<p>Ne, stačí HTML!</p>
</details>
<details name="faq">
<summary>K čemu se to hodí?</summary>
<p>FAQ, dokumentace, weby</p>
</details>
</section>
Toto chování funguje bez JavaScriptu a je plně přístupné.
Reálná omezení
- složitější animační sekvence vyžadují opatrnost,
- komplexní business logika může stále vyžadovat JavaScript,
- stylování se může mírně lišit mezi prohlížeči.
Kdy je nativní accordion ideální volba
Nativní accordion bez JavaScriptu je ideální pro:
- FAQ sekce,
- blogové články,
- dokumentaci,
- produktové popisy.
V těchto případech přináší maximální přínos s minimální složitostí.
Shrnutí
To, co dříve vyžadovalo JavaScript a desítky řádků kódu, dnes HTML zvládá nativně.
Accordion postavený na <details> a <summary>
se sdíleným atributem name představuje v roce 2025
moderní, přístupné a výkonné řešení.
Nativní accordion bez JavaScriptu už dnes není kompromis. Je to osvědčený a doporučený postup.