Pořadí prvků v kódu a vizuálně

Čtečka obrazovky (ve výchozím prohlížecím režimu) čte prvky v pořadí, v jakém jsou zapsané v HTML/DOM — ne v pořadí, v jakém je vidí oko na obrazovce po použití CSS. Když se něco vizuálně přesune jinam, aniž se přesune i v kódu, uživatel čtečky to slyší v jiném pořadí, než v jakém to vidí vidící uživatel.

1. CSS — flexbox order

<article class="card">
    <h2 class="card__title"><a href="…">Název položky</a></h2>
    <p class="card__meta">18. 8. 2026</p>
</article>

.card {
    display: flex;
    flex-direction: column;
}
.card__meta {
    order: -1; /* vizuálně nad nadpis, v kódu za ním */
}

V kódu je nejdřív nadpis, až pak datum — čtečka tedy nejdřív řekne název položky. Vizuálně order: -1 na .card__meta přesune datum nad nadpis, přesně jak to má být vidět. Rodič (.card) musí být display: flex (nebo grid), jinak order nic nedělá.

2. Kde se to na tomto webu používá

• Karty aktualit a článků — datum vydání je v kódu až za nadpisem položky, vizuálně se vrací nad něj stejným trikem.
• Výpis podle štítku (aktualita/článek/znalostní báze dohromady) — typ obsahu je v kódu až za nadpisem položky, vizuálně zůstává nad ním.

Proč to takhle je

• Nadpis je to hlavní, co položku identifikuje — u seznamu více položek za sebou (aktuality, výsledky vyhledávání…) by uživatel čtečky jinak musel nejdřív poslouchat datum nebo typ obsahu u každé položky, než se dozví, o čem vůbec je.
• Vizuální podoba (datum/typ nad nadpisem) přitom zůstává úplně stejná jako předtím — je to čistě otázka pořadí v HTML, ne designu. Nic se opticky nemění, mění se jen to, v jakém pořadí to najde čtečka.
• Funguje to jen s display: flex nebo display: grid na rodiči — order je vlastnost flex/grid layoutu, na běžném blokovém toku (display: block) nemá žádný efekt.

Pravidla

• WCAG 1.3.2 (Smysluplné pořadí) — pořadí čtení/procházení odpovídá logickému pořadí obsahu, i když se vizuálně liší pomocí CSS.
• WCAG 2.4.6 (Nadpisy a popisky) — nadpis položky by měl být první věc, kterou se o dané položce uživatel čtečky dozví, ne až poslední.

To je celé — o to, jak to vypadá, se stará CSS (order), o to, co je pro čtečku „první", se stará pořadí v HTML.