Moderní značky HTML5 a sémantika: zlepšení přístupnosti

Proč je sémantika v HTML5 důležitá

HTML5 rozšířilo jazyk o sémantické značky, které zpřesňují význam obsahu a zlepšují přístupnost, SEO i udržovatelnost kódu. Správně zvolený element pomáhá čtečkám obrazovky, vyhledávačům, nástrojům pro indexaci a vývojářům porozumět struktuře stránky bez nutnosti používat heuristiky založené na třídách nebo stylech. Tento článek shrnuje moderní sémantické značky, jejich použití, časté anti-patterny a doporučení pro praxi.

Zásady sémantického značkování

Význam před vzhledem: volbu elementu řídí význam obsahu, nikoli jeho vizuální prezentace (tu řeší CSS).
Jeden účel – jeden element: pokud existuje vhodný sémantický element, použijte jej místo obecného <div> nebo <span>.
Správná hierarchie: nadpisy <h1–h6> reprezentují logickou strukturu obsahu; nemají se používat k vizuálnímu formátování.
Landmark role: prvky jako <header>, <nav>, <main> atd. tvoří orientační body pro asistivní technologie.
Postupné vylepšování: sémantika funguje i bez JavaScriptu; interaktivitu přidávejte postupně.

Strukturální a „landmark“ elementy

<header>: úvod části nebo stránky (logo, název, navigační prvky). Může se vyskytovat vícekrát (v rámci <article>/<section>).
<nav>: hlavní navigace, skupiny odkazů mezi sekcemi nebo stránkami. Nepoužívejte jej pro izolované odkazy v rámci stránky typu „zpět na začátek“.
<main>: jedinečný hlavní obsah dokumentu; na stránce má být právě jednou.
<article>: samostatná, nezávislá část obsahu (zpráva, příspěvek na blogu, karta produktu).
<section>: tematická sekce s vlastním nadpisem; nepoužívejte ji jako náhradu za <div> bez nadpisu.
<aside>: doplňkový obsah (postranní panel, poznámky, související odkazy).
<footer>: zápatí stránky nebo sekce (autorská práva, kontakty, související navigace).

Textová sémantika a mikro-značky

<strong> a <em>: sémantické zdůraznění (důležitost vs. intonační důraz); nenahrazujte je pro vyjádření významu značkami <b>/<i>.
<mark>: zvýraznění relevantního textu (např. shody ve výsledcích vyhledávání).
<time>: strojově čitelný čas s atributem datetime (ISO 8601) pro události, datum publikace apod.
<abbr>: zkratky s atributem title obsahujícím plné znění.
<dfn>: první výskyt definovaného termínu.
<cite> a <q>: citace děl a krátké citace v textu; pro delší citace použijte <blockquote>.
<code>, <kbd>, <samp>: úryvky kódu, vstupy z klávesnice a ukázkové výstupy.
<data>: propojení zobrazované hodnoty se strojově čitelným atributem value (např. identifikátorem).

Obrazový a multimediální obsah

<figure> a <figcaption>: samostatné vizuální bloky s popisem (obrázky, diagramy, ukázky kódu). <figcaption> je volitelný, ale doporučený.
<picture>, <source>, <img>: responzivní obrázky a řízení jejich zobrazení; vždy uvádějte smysluplný atribut alt.
<video> a <audio>: nativní přehrávání; používejte controls, více elementů <source> a pro přístupnost <track kind="captions">.

Interaktivní a „disclosure“ prvky

<details> a <summary>: rozbalitelné sekce bez JS (FAQ, technické detaily). Do elementu <summary> přidejte sémantický nadpis.
<dialog>: modální i nemodální dialogy s atributy open a metodami pro skriptování; pro plnou přístupnost řiďte fokus a používejte aria-labelledby.
<template> a <slot>: stavební kameny Web Components; <template> se nevykresluje a slouží jako vzor pro klonování.

Formuláře: sémantika a bohaté ovládací prvky

Typy vstupů: email, url, tel, number, date, datetime-local, range, color atd. zajišťují validaci a specializované uživatelské rozhraní.
<label for> a přidružené názvy: každý ovládací prvek má být kvůli přístupnosti propojen s elementem <label>.
<fieldset> a <legend>: logické skupiny; zlepšují navigaci a čitelnost formulářů.
<datalist>: nápověda pro <input> s možností výběru i volného zadávání textu.
<output>, <meter>, <progress>: výstup výpočtů, měřených hodnot a průběhu; používejte atributy min, max, value, low, high, optimum.
Automatické vyplňování a autocomplete: nastavujte autocomplete s konkrétními hodnotami (např. name, email, address-line1).
Validace: HTML5 poskytuje atributy required, pattern, min/max, step; pro vlastní zprávy použijte setCustomValidity().

Tabulky: data vs. rozvržení

Sémantika: používejte <caption>, <thead>, <tbody>, <tfoot> a pro záhlaví buněk <th scope="col|row">.
Přístupnost: složité tabulky označte atributy headers a id nebo víceúrovňovým atributem scope.
Rozvržení: tabulky nepoužívejte k rozvržení stránky; responzivitu řešte pomocí CSS (např. přetečením obsahu nebo transformací tabulky na karty).

Role ARIA a jejich vztah k HTML

Princip „nejprve nativní prvky“: pokud nativní prvek již odpovídá potřebné roli, nepřidávejte ARIA. Při tvorbě vlastních komponent doplňuje ARIA sémantiku, stavy a vztahy.

Účel	Preferovaný HTML prvek	Alternativa s ARIA	Poznámka
Navigace	`<nav>`	`role="navigation"`	Na stránce jich může být více; označte je názvem (`aria-label`).
Hlavní obsah	`<main>`	`role="main"`	Jeden na stránce.
Tlačítko	`<button>`	`role="button"` + klávesnice	U elementu `<div>` je nutné pomocí JS zajistit podporu kláves `Space/Enter` a nastavit `tabindex`.
Dialog	`<dialog>`	`role="dialog"`	Řiďte fokus a nastavte `aria-modal`.

SEO a strukturovaná data

Sémantické značky usnadňují vyhledávačům porozumění obsahu (správná hierarchie nadpisů, <article>, <section>, <figure>).
Strukturovaná data: pro schémata Article, BreadcrumbList, Product apod. upřednostňujte JSON-LD v elementu <script type="application/ld+json">.
Metadata: <meta name="description">, karty og: a twitter: pro sdílení.

Mezinárodní prostředí a jazyk

Jazyk dokumentu: nastavte <html lang="cs">; u cizojazyčných úseků použijte atribut lang na příslušném elementu.
Směr textu: u jazyků psaných zprava doleva použijte dir="rtl"; vyhýbejte se míchání směrů bez výslovného nastavení.
Formát času a čísel: sémantiku elementu <time> kombinujte s lokalizovaným zobrazením na straně klienta.

Anti-patterny a časté chyby

„Div-soup“: všude používáte <div> a <span>, i když existují sémantické prvky.
Falešné nadpisy: vizuální nadpisy vytvořené pouze pomocí CSS; používejte skutečné elementy <h2>…<h6>.
Nesprávné vnoření: například <header> bez související sekce nebo element <main> vnořený do <article>.
Nadužívání rolí: zbytečné role ARIA u nativních prvků, které už mají vlastní sémantiku.
Obsah bez popisů: chybějící atribut alt u elementu <img> a <figcaption> u složitých obrázků.

Přístupnost: praktické zásady

Orientační body: využívejte <header>, <nav>, <main>, <aside>, <footer> pro rychlou navigaci čteček obrazovky.
Fokus a klávesnice: interaktivní prvky musí být dosažitelné klávesnicí; neodstraňujte obrys fokusu bez náhradního řešení.
Kontrast a význam: rozlišení nesmí být založeno pouze na barvě; používejte také sémantické značky a text.
Stavy a názvy: u vlastních komponent nastavujte atributy aria-* (např. aria-expanded, aria-controls).

Výkonnost a udržovatelnost

Konzistentní struktura: opakovaně používané komponenty (hlavička, zápatí, karty) s jasnou sémantikou usnadňují testování.
Menší závislost na JS: elementy <details> a <dialog> řeší běžné vzory bez knihoven.
Responzivní obrázky: <picture> a srcset/sizes snižují datovou zátěž a zlepšují CLS/LCP.

Testování a validace

Validátor HTML: ověřuje správnost značek, atributů a vnoření.
Lighthouse/axe: kontrola přístupnosti a osvědčených postupů.
Čtečky obrazovky: praktické testy s VoiceOver/JAWS/NVDA odhalí problémy s navigací a popisy.
Kontrola osnovy: zkontrolujte logiku nadpisů a orientačních bodů navigace (jeden <main>, smysluplné <nav aria-label>).

Mapování scénářů na sémantické prvky

Scénář	Doporučené značky	Poznámka
Článek s obrázkem a popiskem	`<article>`, `<header>`, `<figure>`, `<figcaption>`, `<footer>`	`<time datetime>` pro datum publikace
Karta produktu	`<article>`, `<h3>`, `<figure>`, `<data value>`	Pro strojové zpracování ceny použijte `<data>`.
Sekce FAQ	`<section>`, `<details>`, `<summary>`	Každou otázku uveďte v samostatném elementu `<details>`.
Navigace webu	`<nav>`, seznam `<ul>`/`<li>`	Jednotlivé navigace rozlište pomocí `aria-label` (např. „Hlavní“, „Zápatí“).

Verzování a dokumentace sémantiky

Design systém: pro každou komponentu definujte HTML kostru, pravidla ARIA, varianty stavů a příklady použití.
Linting: nástroje pro statickou analýzu (HTMLHint, ESLint s pluginy) zajišťují v CI konzistenci.
Dokumentované kontrakty: popište, které části DOM jsou veřejné (sloty, datové atributy) a které interní.

Budoucí směřování a interoperabilita

Zpřesňování ARIA: nové vzory pro složité komponenty (kombinované seznamy, mřížky) a lepší interoperabilita čteček.
Dialogy a vzory formulářů: dokončování standardů pro modální interakce, validaci a hlášení.
Web Components: šíření nativní sémantiky prostřednictvím shadow DOM a standardizovaných rolí.

Závěr: praktický kontrolní seznam sémantiky

Obsahuje dokument jeden element <main> a smysluplné orientační body?
Je hierarchie nadpisů konzistentní a odpovídá obsahu?
Mají obrázky odpovídající atribut alt a složité vizuální prvky element <figcaption>?
Jsou formulářové prvky propojené s elementem <label> a mají správné typy?
Nepoužíváte ARIA tam, kde stačí nativní HTML?
Provedli jste validaci, audit přístupnosti a testy se čtečkou obrazovky?