Accessibility tree v Chrome DevTools

Přístupnost webů je téma, které se poslední roky dostává do popředí – ať už kvůli novým zákonům, nebo prostě proto, že chceme, aby naše weby zvládl používat každý. A právě v tomhle směru ti může pomoct strom přístupnosti (Accessibility Tree), který najdeš přímo ve vývojářských nástrojích v Chromu.

Co je strom přístupnosti?

Strom přístupnosti je vnitřní model webové stránky, který využívají asistivní technologie (třeba čtečky obrazovky), aby zjistily, jaké prvky na stránce jsou a jak s nimi pracovat. Zatímco DOM (Document Object Model) obsahuje všechno, co je na stránce, strom přístupnosti si nechá jen to, co je důležité pro uživatele se znevýhodněním – tedy například názvy tlačítek, role prvků a jejich stavy (třeba jestli je tlačítko deaktivované).

Obsah stromu přístupnosti můžeš ovlivnit hlavně pomocí:

• semantických HTML prvků (např. <button>, <nav>, <header>)
• ARIA atributů (např. aria-label, aria-hidden)
• dalších vlastností DOMu

Bez dobře vytvořeného stromu přístupnosti může být stránka pro uživatele čtečky obrazovky těžko čitelná nebo rovnou nepoužitelná. Proto je super, že strom přesně ukazuje, co asistivní technologie opravdu vidí. Snadno tak odhalíš problémy jako:

• chybějící alternativní texty u obrázků,
• nesprávné role prvků,
• prvky, které nejdou ovládat klávesnicí.

Jak zobrazit strom přístupnosti v Chrome

1. Otevři vývojářské nástroje (DevTools) stiskem klávesy F12.
2. V horní liště nástrojů přejdi na záložku Accessibility vedle záložky Styles
   
3. Zapni volbu „Enable full-page accessibility tree“. Pokud není zaškrtnutá, povol ji a DevTools obnov.
   
4. V záložce Elements se objeví nová ikona „Switch to Accessibility Tree view“.
   
5. Kliknutím na tuto ikonu se přepneš do zobrazení stromu přístupnosti.
   
6. Dalším kliknutím na ikonu se vrátíš zpět do zobrazení DOM Tree.

Jak efektivně využívat strom přístupnosti

Při přepínání mezi DOMem a stromem přístupnosti zůstává označený stejný element, takže se ti problémy hledají a opravují mnohem snáz.

Kromě samotné stromové struktury uvidíš v záložce Accessibility i ARIA atributy aktuálně vybraného prvku. Snadno si tak ověříš, jak „to“ čtečka obrazovky skutečně interpretuje.

Tipy pro praktické využití stromu přístupnosti:

1. Porovnávej s běžným DOM stromem – Pravidelně přepínej mezi oběma pohledy a sleduj, které prvky jsou pro asistivní technologie viditelné a které ne. Často překvapí, co všechno čtečka „vidí“ nebo ignoruje.
2. Hledej chybějící názvy a role – Každý interaktivní prvek by měl mít smysluplný název a správnou roli. Když vidíš jen „tlačítko“ nebo „odkaz“, doplň aria-label nebo aria-labelledby.
3. Kontroluj strukturu nadpisů – Správná hierarchie (h1–h6) je pro čtečky klíčová. Ve stromu by měla odpovídat logice obsahu.
4. Ověřuj skryté prvky – Co má display: none nebo visibility: hidden, zmizí i ze stromu. Co má aria-hidden="true", se ve stromu taky neobjeví, i když je to vizuálně viditelné. To se hodí pro odstranění duplicitních informací.
5. Testuj formuláře – Zkontroluj provázání <label> s odpovídajícími vstupy a to, že chybové zprávy jsou oznámené pomocí aria-invalid a aria-describedby.
6. Kombinuj s Lighthouse – Projeď audit v Lighthouse a inspekci stromu použij k rychlé nápravě běžných problémů.

Ovládání stromu přístupnosti pomocí klávesnice

Hodí se vědět i zkratky, které usnadní práci s inspekcí a stromem přístupnosti:

Jak otevřít nástroj pro inspekci a zobrazit strom přístupnosti:

1. Stiskni Command/Control + Shift + C a aktivuj inspekci prvků.
2. Pomocí Shift + Tab se vrať v panelu, dokud nenajdeš tlačítko „Přepnout na zobrazení stromu přístupnosti“.
3. Stiskni Enter pro zobrazení stromu přístupnosti.
4. Pomocí šipek procházej jednotlivé položky stromu.

Jak zobrazit panel přístupnosti pro konkrétní prvek:

1. Otevři panel Elements pomocí Command/Control + Shift + C.
2. Pomocí Shift + Tab se přesuň zpět k HTML kódu stránky v panelu Elements.
3. Šipkami najdi konkrétní prvek (stačí na něj „najet“ kurzorem).
4. Stiskni Tab pro přechod na záložku Styles, kde je skupina záložek.
5. Pomocí pravé šipky (nebo se čtečkou obrazovky) vstup do skupiny záložek a najdi tlačítko „More Tabs“.
6. V rozbalovacím menu vyber „Accessibility“.
7. V panelu Accessibility uvidíš informace pro vybraný prvek.

Panel přístupnosti zůstane otevřený, takže ho nemusíš pokaždé znovu hledat – stačí se vrátit do Elements, vybrat jiný prvek a znovu přejít do Accessibility.

 

Strom přístupnosti jako pomocník při tvorbě inkluzivního webu

Strom přístupnosti je skvělý pomocník, pokud to s přístupností myslíš vážně. Pomůže ti pochopit, jak tvůj web „vidí“ asistivní technologie, odhalit chyby, které by jinak utekly, a posunout použitelnost pro všechny.

Pravidelné kontroly v Chrome DevTools ti umožní:

• odhalit nedostatky v přístupnosti, které by jinak zůstaly skryté,
• lépe pochopit interpretaci webu asistivními technologiemi,
• vytvářet inkluzivnější digitální prostředí,
• a zároveň splnit rostoucí legislativní požadavky.

Přístupný web není luxus, ale nutnost. Rozšiřuje okruh uživatelů, zlepšuje UX pro všechny a často pomáhá i v SEO. Investice do přístupnosti se vyplatí – lidsky, technicky i obchodně.

Pravidelným využíváním stromu přístupnosti a dobrých postupů můžeš přispět k tomu, aby byl internet opravdu otevřený a přístupný pro každého.