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

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. Inspektor HTML kódu je v závislosti na zvolené kombinaci webového prohlížeče a odečítače obrazovky více či méně přístupný, jak je blíže popsáno v níže uvedených postupech.

Pro naše potřeby je Inspektor HTML kódu dostatečně přístupný v prohlížeči Mozilla Firefox, v našem případě byl tento prohlížeč testován ve verzi 52 ESR a ve verzi 65. Pokud však nevyžadujeme možnost číst a editovat i CSS styly, tak je možné zvolit i prohlížeč Google Chrome, v našem případě testován ve verzi 72. Co se týče odečítačů, tak je níže předpokládán JAWS ve verzi 2018.1808.10 a NVDA ve verzi 2018.3.2.

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 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 + num. lomeno) a nasimulujeme kliknutí pravým tlačítkem myši (num. hvězdička), čímž na této pozici vyvoláme kontextovou nabídku.
      2. Pokud používáme odečítač JAWS , tak často nemusíme s kurzorem myši manipulovat a stačí na tomto prvku stisknout klávesu kontextové nabídky. V případě, že tento postup nefunguje, musíme stejně jako u NVDA přesunout myš k pozici virtuálního kurzoru (JAWSKey + num. minus) a simulujeme stisk pravého tlačítka myši (num. hvězdička).
2. Z kontextové nabídky zvolíme položku Prozkoumat, čí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 kontextovou nabídku.

1. 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 kontextovou nabídku a zvolíme položku „Upravit jako HTML“ (anglicky „Edit as 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 Ctrl + Enter a tyto změny se ihned projeví na webové stránce. Tento režim editace HTML kódu nicméně není přístupný v případě prohlížeče Mozilla Firefox, jelikož v něm při pohybu po znacích či slovech odečítač NVDA ani JAWS neposkytuje žádnou hlasovou odezvu. V prohlížeči Google Chrome tento režim editace ale přístupný je, a to jak s odečítačem JAWS tak i s NVDA.
   2. Druhý, alternativní a přístupnější, režim editace HTML kódu vybraného elementu aktivujeme stisknutím klávesy Enter na tomto elementu. Další postup a přístupnost 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, které se nachází za všemi atributy. Toto tlačítko bohužel nemá v Mozille Firefox verze 52 popisek. Po provedení požadovaných změn tento režim editace ukončíme klávesou Escape nebo Enter. Tento režim editace HTML kódu je přístupný jak s odečítačem JAWS tak i s  NVDA.
      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ě zdese 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. Tento režim editace HTML kódu je přístupný s odečítačem NVDA, nikoliv však s odečítačem JAWS.

Postup čtení a editace CSS stylů

Čtení a editace CSS stylů bohužel není přístupná v prohlížeči Google Chrome. Nezbývá nám tedy než zvolit prohlížeč Mozilla Firefox.

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,. Tabulátorem se dále postupně přesouváme mezi selektory, názvy a hodnotami CSS vlastností. 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.

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. Toho lze docílit následovně:

1. Jestliže používáme prohlížeč Google Chrome, tak se do otevřeného Inspektoru HTML kódu a zpět do webové stránky můžeme přepínat standardně klávesou F6.
2. Jestliže používáme prohlížeč Mozilla Firefox, tak klávesu F6 bohužel nelze použít, ale je možné podokno Inspektora HTML kódu odepnout od webové stránky do samostatného okna, což uděláme takto:

1. Máme-li fokus v Inspektoru HTML kódu, tak se několikerým stisknutím kláves Shift + tabulátor přesuneme na tlačítko, které odečítač přečte jako „panel nástrojů 
   Zavře nástroje vývojáře tlačítko“.
2. Stiskneme šipku doleva a měli bychom se dostat na tlačítko, které odečítač přečte jako „Zobrazí nástroje v samostatném okně tlačítko“.
3. Na zmíněném tlačítku stiskneme Enter, čímž Inspektor HTML kódu odepneme od webové stránky. Poté už se můžeme přepínat mezi webovou stránkou a >Inspektorem HTML kódu klávesami Alt + tabulátor.

Závěrem ještě dodejme, jak dříve otevřený Inspektor HTML můžeme zavřít – v obou prohlížečích stačí stisknout klávesu F12.

Z výše uvedeného je zřejmé, že přístupnost vývojářských nástrojů v prohlížečích není sice ideální, nicméně po seznámení se s jejich obsluhou je k prohlížení či drobným modifikacím kódu při testování může využívat i nevidomý tester přístupnosti pracující s odečítačem obrazovky.

Autor: Adam Samec