ZPĚT
V dnešní době je přístupnost (A11y) klíčová ve všech fázích vytváření vlastních softwarových produktů. Počínaje částí návrhu UX/UI, přesahuje do pokročilých úrovní tvorby funkcí v kódu. Poskytuje spoustu výhod pro vývojáře, kteří pracují na zvyšování DX, ale především pro koncové uživatele. Jednou z těchto a11y částí v HTML jsou sémantické značky a právě o nich bych se zde rád zmínil.
Front-end vývojáři musí být dobře obeznámeni s Značky HTML protože to je jejich každodenní přirozené prostředí. Vsadím se, že všichni znáte základní značky, jako např.
Předpokládejme, že pracujete na nějaké webové stránce nebo aplikaci pro německého klienta. Jak víte, německá slova mohou být velmi dlouhá. Máte tedy návrh s nějakým textovým obsahem, který musíte reprodukovat v jazyce kód a tento obsah se musí zlomit ve velmi specifických okamžicích. Zde přichází na řadu
GeburtstagskuchenA je to! S tak jednoduchou značkou můžete manipulovat s obsahem textu podle svých představ.
Jak je to ale s podporou prohlížeče? No, upřímně řečeno, je docela dobrá. Většina prohlížečů této značce rozumí, ale Opera na Androidu a Safari na iOS mohou mít problémy.
Představte si, že vytváříte aplikaci pro správu diskového úložiště. Potřebujete v uživatelském rozhraní nějak zobrazit, kolik úložiště je ještě k dispozici, a opravdu chcete, aby bylo co nejpřístupnější. To je právě ideální případ užití pro aplikaci tag. Pouze vám zobrazí hodnotu v definovaném rozsahu. Další skvělou vlastností tohoto tagu jsou jeho atributy:
Možná znáte i podobnou značku, kterou je progress. Jaký je mezi nimi vlastně rozdíl? Tag progress by se měl používat pro probíhající úkoly. Jinými slovy, značku progress používejte, když se zabýváte konkrétním úkolem. U tagu meter by se měl používat pro zobrazení využití disku nebo paměti. Dalším rozdílem je, že tag meter není podporován prohlížečem IE, a to je vlastně jediná nevýhoda tohoto tagu.
Přemýšleli jste někdy o tom, jak vytvořit dostupný indikátor smazaných a přidaných částí obsahu (rozdíl v GitHubu nebo e-mailové upozornění z Jiry, když byl tiket aktualizován)? Stačí smazaný obsah obalit příkazem<del><p>Právě odstraněný obsah</p></del>. Chcete-li zobrazit pouze přidanou část obsahu, můžete použít příkaz přesně stejným způsobem. Tento tag nabízí také dva atributy:
Existuje samozřejmě mnohem více užitečných značky v jazyce HTML . Vřele doporučuji používat všechny, pokud je to možné a vhodné. Vaši klienti a uživatelé aplikací vám za takový přístup poděkují. Buďte však opatrní, protože některé značky mohou být zastaralé. Vždy se můžete ujistit, že méně běžná značka, kterou chcete použít, je stále platná a má dobrou podporu v systému Dokumentace MDN.
Czech 
English 
German 
Swedish 
Danish 
Norwegian 
Finnish 
French 
Polish 
Arabic 
Italian 
Japanese 
Spanish 
Dutch 
Estonian 
Greek 
Portuguese