Jak při testování přístupnosti webových stránek s odečítačem obrazovky pracovat s HTML kódem stránky

Aktualizace 16. 2. 2026: Toto je aktualizovaná verze článku, jenž původně vyšel 10. 4. 2019. Tento nový článek reflektuje zásadní zlepšení v přístupnosti vývojářských nástrojů jak v odečítači Google Chrome, tak Mozilla Firefox.

Abychom při testování webových stránek mohli popsat příčiny špatné přístupnosti a případně i navrhnout možné řešení, musíme mít možnost i s odečítačem obrazovky nahlédnout do HTML kódu a CSS stylů vybraného webového prvku a editovat je. K tomuto účelu se používá nástroj nazvaný inspektor HTML kódu, který je v rámci dalších nástrojů pro vývojáře zabudovanou součástí webového prohlížeče.

Verze použitých technologií

V článku popsané poznatky vycházejí z používání následujících verzí webových prohlížečů a odečítačů obrazovky a jsou platné k datu 6. 2. 2026:

• Mozilla Firefox 147;
• Google Chrome 144;
• NVDA 2025.3.2;
• JAWS 2026.2512.50.

Postup čtení a editace HTML kódu

1. HTML kód pro určitý webový prvek si v inspektoru zobrazíme přes kontextové menu k danému prvku. Jak z klávesnice za pomoci odečítače správně vyvolat kontextové menu k prvku webové stránky závisí na tom, zda je prvek fokusovatelný, či nikoli.

   1. Je-li prvek fokusovatelný (nejčastěji v případě formulářového prvku či odkazu), přejdeme na prvek tabulátorem, aby měl fokus, a stiskneme klávesu kontextového menu.

   2. Jestliže prvek fokusovatelný není, například jde o odstavec běžného textu, liší se postup mírně v závislosti na odečítači.

      1. Používáme-li odečítač NVDA, tak pravděpodobně budeme muset využít dovednosti odečítače manipulovat s myší. V prohlížecím režimu přejdeme na požadovaný prvek. K prvku přivoláme kurzor myši (klávesa NVDA + numerické lomeno) a nasimulujeme kliknutí pravým tlačítkem myši (numerická hvězdička), čímž na této pozici vyvoláme kontextové menu.

      2. Pokud používáme odečítač JAWS, tak někdy nemusíme s kurzorem myši manipulovat a stačí na tomto prvku stisknout klávesu kontextového menu. V případě, že tento postup nevyvolává kontextové menu na správném HTML elementu, tak musíme stejně jako u NVDA přesunout myš k pozici virtuálního kurzoru (JAWSKey + numerické minus) a simulujeme stisk pravého tlačítka myši (numerická hvězdička).

2. Z kontextového menu zvolíme položku „Prozkoumat prvek“ v případě prohlížeče Mozilla Firefox, případně „Prozkoumat“ v případě Google Chrome, čímž se fokus přesune do podokna nástrojů pro vývojáře, konkrétně do nástroje inspektor HTML kódu. Tento nástroj je v podstatě stromové zobrazení HTML elementů, ve kterém se lze po uzlech pohybovat šipkou nahoru a dolů a rozbalovat a sbalovat vybrané uzly šipkou doprava respektive doleva. Po přesunutí do inspektoru HTML kódu by kurzor měl být na elementu odpovídajícím místu na stránce, na němž jsme před tím vyvolali kontextové menu.

3. Nyní existují dva režimy, jak HTML kód vybraného elementu editovat.

   1. Jestliže chceme editovat najednou celý řádek HTML kódu vybraného elementu, tak na tomto elementu vyvoláme kontextové menu a zvolíme položku „Upravit jako HTML“. Případně je možné tento režim editace aktivovat také stisknutím klávesy F2 . Po editaci HTML kódu uložíme provedené změny stisknutím kláves Control + Enter nebo F2 a tyto změny se ihned projeví na webové stránce. V námi testované verzi prohlížeče Mozilla Firefox je však chyba, kdy je poté nutné ještě stisknout tabulátor, abyste se dostali zpět do stromového seznamu HTML elementů.

   2. Druhý (alternativní) režim editace HTML kódu vybraného elementu aktivujeme stisknutím klávesy Enter na tomto elementu. Další postup tohoto režimu s odečítačem JAWS či NVDA závisí na tom, jestli používáme prohlížeč Mozilla Firefox nebo Google Chrome.

      1. V případě prohlížeče Mozilla Firefox se ocitneme ve stavu, v němž se lze tabulátorem cyklicky pohybovat mezi názvem elementu a jeho atributy. Když pak chceme nějaký atribut nebo název elementu editovat, tak na něm stiskneme mezerník nebo Enter. Případně lze přidat atribut nový pomocí tlačítka „Nový atribut“, které se nachází za všemi atributy. Po provedení požadovaných změn tento režim editace ukončíme klávesou Escape.

      2. V případě prohlížeče Google Chrome se rovněž ocitneme ve stavu, v němž se lze tabulátorem cyklicky pohybovat mezi názvem elementu a jeho atributy, nicméně zde se rovnou dostaneme do editace názvu daného elementu nebo jeho atributu, takže není nutný ještě další stisk mezerníku či Enteru jako v případě prohlížeče Mozilla Firefox. Podobně i zde se za atributy nachází prázdné editační pole, kam lze vepsat nový atribut. Po provedení požadovaných změn tento režim ukončíme klávesou Escape nebo Enter.

Postup čtení a editace CSS stylů

Máme-li otevřený inspektor HTML kódu a v něm umístěný fokus, tak se do oblasti, kde lze CSS číst a editovat, přesuneme několikerým stisknutím tabulátoru. Název položky, kterou tabulátorem hledáme, záleží na použitém prohlížeči.

Mozilla Firefox

Pokud chceme přidat jednu nebo více CSS vlastností inline jen pro právě zaměřený element, tak tabulátorem najedeme na tlačítko, které odečítač přečte jako „}“ (pravá složená závorka). Stisknutím Enteru na tomto tlačítku se dostaneme do editačního pole pro zadání názvu nově přidávané CSS vlastnosti, po zadání názvu další stisk tabulátoru přesune fokus do editačního pole pro zadání její hodnoty. Po zadání hodnoty následovný stisk tabulátoru přesune fokus do editačního pole pro zadání názvu další nové CSS vlastnosti a takto pořád dokola. Klávesou Escape editační režim ukončíme.

Přes tabulátor a Shift + tabulátor pak můžeme postupně procházet všechny selektory vztahující se k aktuálnímu elementu dle jejich priority, názvy CSS vlastností a jejich hodnoty. Chceme-li vybraný selektor nebo název či hodnotu CSS vlastnosti editovat, tak na ní stiskneme klávesu Enter, provedeme úpravy a editaci ukončíme klávesou Escape.

Google Chrome

Před prací s CSS styly nejprve v případě odečítače NVDA vypneme prohlížecí režim přes NVDA + mezerník, v případě odečítače JAWS vypneme virtuální režim přes JAWSKey + Y.

Pokud chceme přidat jednu nebo více CSS vlastností inline jen pro právě zaměřený element, tak tabulátorem najedeme na položku, kterou odečítač přečte jako „element.style, css selector“. Stisknutím Enteru na této položce se dostaneme do editačního pole pro zadání názvu nově přidávané CSS vlastnosti, po zadání názvu další stisk tabulátoru přesune fokus do editačního pole pro zadání její hodnoty. Po zadání hodnoty následovný stisk tabulátoru přesune fokus do editačního pole pro zadání názvu další nové CSS vlastnosti a takto pořád dokola. Klávesou Escape editační režim ukončíme.

Jestliže chceme upravit existující CSS selektory vztahující se k právě zaměřenému elementu nebo jim příslušné CSS vlastnosti, tak nejprve dle předchozího postupu najedeme na položku čtenou jako „element.style, css selector“, a poté šipkou dolů nebo nahoru vybereme požadovaný selektor, přičemž tato položka „element.style, css selector“ představuje inline styly pro právě zaměřený element. Tyto selektory takto můžeme procházet v pořadí dle jejich priority. Až najdeme požadovaný selektor, tak přejdeme do režimu editace tohoto selektoru pomocí klávesy Enter, tím se dostaneme do editačního pole pro přepsání tohoto selektoru. Přes tabulátor a Shift + tabulátor pak můžeme postupně procházet jednotlivá editační pole názvů všech CSS vlastností a jejich hodnot pro aktuální selektor. Po provedení úprav režim editace ukončíme klávesou Escape.

Přepínání fokusu mezi inspektorem HTML kódu a webovou stránkou

Při čtení a editaci HTML kódu nebo CSS stylů a sledování provedených změn na webové stránce se hodí možnost rychle přepínat fokus mezi otevřeným inspektorem HTML kódu a webovou stránkou. To můžeme provést standardně pomocí klávesy F6, případně Shift + F6, praktičtější však může být odepnout nástroje pro vývojáře do samostatného okna, do kterého se pak můžeme přepínat jednoduše přes Alt + tabulátor.

Mezi odepnutím nástrojů pro vývojáře do samostatného okna a jejich připnutím do hlavního okna je možné se kdykoliv přepínat klávesovou zkratkou Control + Shift + D, jestliže je fokus klávesnice v nástrojích pro vývojáře. Tato klávesová zkratka funguje jak pro prohlížeč Mozilla Firefox, tak Google Chrome, avšak při prvním použití v Mozilla Firefox nám tato zkratka nefungovala.

Pro jistotu si ještě uveďme, jak odepnout nástroje pro vývojáře do samostatného okna bez použití klávesové zkratky.

Mozilla Firefox

1. Přes Shift + tabulátor se přesuňte až do panelu nástrojů pojmenovaného jako „Nástroje pro vývojáře“.

2. Pomocí šipky doprava se přesuňte na tlačítko nazvané „Přizpůsobení nástrojů a získání pomoci“ a aktivujte jej.

3. Šipkou dolů zvolte položku „Samostatné okno“ a aktivujte ji.

Google Chrome

1. Přes Shift + tabulátor se přesuňte až na tlačítko nazvané „Přizpůsobení a ovládání nástrojů DevTools“ a aktivujte jej.

2. Mělo by se otevřít menu a zaměřena by měla být první položka, kterou odečítač přečte anglicky jako „Dock side, Use left and right arrow keys to navigate the options“. Stiskněte jednou šipku doprava, čímž byste měli zaměřit přepínací tlačítko „nazvané „Otevřít v samostatném neukotveném okně“ a toto tlačítko aktivujte.

Otevření a zavření nástrojů pro vývojáře

Ještě dodejme, že jak v prohlížeči Mozilla Firefox, tak Google Chrome můžeme nástroje pro vývojáře kdykoliv rychle otevřít nebo zavřít klávesou F12, avšak mějte na paměti, že nástroje pro vývojáře se takto neotevřou přímo v inspektoru kódu na právě zaměřeném elementu, k tomu musíme následovat postup uvedený na začátku tohoto článku.

Závěr

Na závěr lze konstatovat, že se přístupnost nástrojů pro vývojáře za poslední roky poměrně zlepšila. Z výše uvedeného vyplývá, že v prohlížečích Mozilla Firefox i Google Chrome je i pro testery pracující s odečítačem obrazovky natolik dostačující, že mohou samostatně zvládnout jak prohlížení, tak dynamickou úpravu HTML i CSS kódu přímo na stránce.