Připravíte AI agentům bezbariérový vchod a nebo je pošlete ke konkurenci?

Možná si říkáte, že přístupnost je noblesa pro nevidomé a do marketingové KPIs se nevejde.

Jenže právě teď, po 28. červnu 2025, v Česku platí zákon č. 424/2023 Sb. (implementace European Accessibility Act), který rozšiřuje povinnosti i na komerční digitální produkty a služby. Zákony pro lidi , Davis Wright Tremaine
Ale zákon je jen trigger. Skutečný důvod, proč se vyplatí dělat přístupnost hned, má jméno umělá inteligence.

Audio verze článku

Délka záznamu: 16 minut

Proč „AI-first“ přístupnost není buzzword, ale přežití

• AI mění způsob vyhledávání a nákupu. Gartner varuje, že do roku 2026 klesne objem tradičního vyhledávání o 25 %, protože lidé se ptají chat-botů místo Googlu. technewsworld.com
• AI agenti dělají rozhodnutí za nás. Do 2027 budou podle Gartneru automatizovat nebo spolurozhodovat o polovině businessových rozhodnutí. Technology Magazine
• Web, který nedává smysl strojům, prostě zmizí z dialogu. Když váš kód postrádá semantiku a popisy, AI ho přeskočí a spolu s ním i vaši zákazníci.

Jednoduché? Ani náhodou. Ale povede to k tomu, že až hlasový asistent bude doporučovat e-shop s běžeckými botami, ocitnete se ve výběru místo na blacklistu.

Jak AI „čte“ web a proč jí přístupnost chutná

Přístupnost a AI tak sdílejí stejný „jazyk“: sémantiku, strukturu a kontext.

Bacha, tady se chybuje nejčastěji: Nasadit moderní UI framework a zapomenout na role a aria-labely. Pro člověka „jen“ otravné, pro AI neviditelné.

Studie o dopadech zlepšení přístupnosti.

Trochu čísel, aby jste měli to jak vysvětlit šéfům 🙂 , v překladu neděláte to ani pro lidi, ani pro roboty, ale by vám rostli zisk 😀 .

Sedm AI boosterů, které vychází z WCAG

1. Alt texty – Superfood pro LLM

Google oficiálně doporučuje přidávat popisné alt texty, aby vyhledávač (a tedy i generativní AI) pochopil, co na obrázku je.

V praxi:

U klienta s tapetami stačilo doplnit k obrázkům kontextové alt texty a návštěvnost z Google search obrázků šla nahoru. Samozřejmě to už dneska nemusíte dělat ručně, popisek si můžete vygenerovat přes AI, u obrázku to velmi často stačí.

Ukázka:

<!-- tapeta s pivoňkami -->
<img src="wallpaper-pivonky.jpg"
alt="Detail tapety s růžovými pivoněmi na smetanově bílém pozadí, styl vintage"
loading="lazy" width="800" height="600">

Tipy :

• Začni vždy klíčovým motivem („tapeta s pivoňkami“), pak barvy, styl, účel.
• Udržuj alt ≤ 125 znaků – většina screen-readerů delší text krátí.
• Google guide pro obrázky

2. Sémantické HTML – GPS pro agenty

Headings (<h1>–<h6>), landmarky (<nav>, <main>, <footer>), article, section.
Pro screen-readery jasná cesta; pro AI detailní mapa obsahu, která zrychluje crawl a zlepšuje pochopení relevance.

Ukázka:

<header>
<h1>Inspirace pro interiéry</h1>
<nav aria-label="Hlavní menu">
<ul><li><a href="/tapety/">Tapety</a></li> … </ul>
</nav>
</header>

<main>
<article>
<h2 id="kvety">Květinové motivy</h2>
<section aria-labelledby="kvety">
<!-- obsah -->
</section>
</article>
</main>

<footer>© 2025 Tapety.cz</footer>

Zdroj :

• Návod HTML: A good basis for accessibility

3. ARIA role & stavy – Metadata 2.0

role="button", aria-expanded, aria-live.
Bez nich AI nepozná, že rozbalovací filtr právě odhalil 42 dalších produktů. S nimi umí agent simulovat klik, vyhodnotit stav a doporučit správnou variantu.

Ukázka:

<button class="filter-toggle"
aria-expanded="false"
aria-controls="filter-panel">
Filtry
</button>

<div id="filter-panel" hidden>
<!-- 42 produktů -->
</div>

<script>
const btn = document.querySelector('.filter-toggle');
btn.addEventListener('click', () => {
const expanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', !expanded);
document.getElementById('filter-panel').hidden = expanded;
});
</script>

Zdroj :

• W3C – Using the WAI-ARIA aria-expanded state to mark expandable and collapsible regions

4. Konzistentní navigace – Síť vztahů

Logická struktura odkazů zvyšuje autoritu stránek a umožňuje AI sestavit přesný knowledge graph vaší značky.

5. Transkripty videí a audia – Text je král

Titulky nejsou jen pro neslyšící. Jsou to tunel pro LLM, jak „vidět“ do videa, citovat ho a odpovídat uživateli jediným promptem.

Tip z praxe: U audia jde si daný soubor dát do Google notebookLM a tam si vygenerovat transkript, limit je 200Mb, takže do toho se vleze i 10hod audia a pak stačí daný text přidat vedle na rozbalení. Kromě pomoci lidem tim pomůže i hodně SEO a robotům.

Ukázka:

<video controls poster="preview.jpg">
<source src="interview.mp4" type="video/mp4">
<track kind="subtitles" src="interview.cs.vtt" srclang="cs" label="Čeština" default>
</video>

<details>
<summary>Přepis rozhovoru</summary>
<p>[00:00] …</p>
</details>

6. Validní, rychlý kód – Vitamín Core Web Vitals

Čistý HTML/CSS znamená méně parser chyb, rychlejší načítání a tím pádem lepší prioritu pro crawling i ranking.

7. Smysluplné popisky formulářů – Future-proof konverze

<label for="email">E-mail</label> nezní sexy, ale AI ho potřebuje, aby vyplnila košík místo uživatele. Jakmile se nákupní agenti stanou normou, špatně označené pole = ztracený prodej.

Tip z praxe webového analytika: Správně popsané formuláře samozřejmě jdou jednoduše trackovat, ale třeba UX nástroje pak poznají, že v dané poli je osobní údaj a ten pak neposílají k sobě na server.

Ukázka:

<form class="checkout">
<label for="email">E-mail</label>
<input type="email" id="email" name="email" autocomplete="email" required>

<label for="phone">Telefon</label>
<input type="tel" id="phone" name="phone" autocomplete="tel" pattern="\+?\d{9,15}" required>

<button type="submit">Objednat</button>
</form>

Zdroje :

• <label>: The Label element

ROI, které potěší CFO (aneb čísla místo emocí)

• Viditelnost + SEO
  Přístupné, strukturované stránky získávají výrazně vyšší šanci na featured snippet a „zero-click“ odpovědi. Google for Developers
• Připravenost na voice & chat commerce
  Odborníci odhadují, že do roku 2028 bude 30 % velkých korporací obsluhovat zákazníky jediným AI kanálem. CX Today
• Snížení budoucích nákladů
  Refaktoring nevalidního kódu pod tlakem AI integrací vychází dráž než průběžné zapracování WCAG.
• Větší trh
  1,3 mil. lidí s postižením v ČR + AI chat-boty = publikum, které si nechcete znepřístupnit.

5 kroků, jak začít ještě tento měsíc

1. Bleskový AI-audit
   Spusťte Lighthouse > Accessibility a zkuste stránku „přečíst“ přes ChatGPT Browse. Kde tápe, tam chybí sémantika.
2. Rychlé wins
   • přidejte alt texty top 100 obrázkům, zaměřte se na hlavní obrázku produktů a služeb.
   • opravte hierarchii <h1-h3> na homepage.
3. Style guide
   Zapište si kontrasty, klávesovou navigaci a pojmenování ARIA rolí do interního Design Systemu.
4. Upskill týmu
   UX, copy, dev a SEO si udělejte společný workshop: AI potřebuje konzistentní semantiku napříč oborem.
5. CI/CD guardrails
   Přidejte do pipeline automatický aXe test + HTML validator; pull request bez zelené nezmergeujete.

Začněte hned, budoucí já (a vaši AI-agenty) vám poděkují.

FAQ na tělo

„Musím splnit celou WCAG 2.2?“
Ne. Začněte s kritickými A/AA kritérii, která přímo krmí AI: alt texty, klávesnice, headingy, aria-labels.

„Co když máme headless SPA?“
Renderujte klíčové části server-side nebo použijte prerendering, ať crawler i agent dostanou plně sémantický HTML.

„AI si přece poradí s nepořádkem…“
Ano, ale proč by měla? Na weby konkurence, které jí servírují data čistě, sáhne raději.

Shrnutí: Přístupnost = AI fuel

• Lidé dostanou inkluzivní zážitek.
• AI dostane strukturovaná data, aby vás mohla doporučit.
• Vy získáte SEO, konverze a legální klid.

Otázka na závěr: Až se zítra zákazník zeptá chat-bota „kde koupím běžecké boty s širší špičkou?“, objeví se váš e-shop v jeho odpovědi?