Přístupnost HTML
Přístupnost HTML
Vždy pište HTML kód s ohledem na přístupnost!
Poskytněte uživateli dobrý způsob navigace a interakce s vaším webem. Udělejte svůj HTML kód co nejvíce sémantický .
Sémantické HTML
Sémantické HTML znamená co nejvíce používat správné prvky HTML pro jejich správný účel. Sémantické prvky jsou prvky s významem; pokud potřebujete tlačítko, použijte <button>prvek (a ne
<div>prvek).
Sémantický
<button>Report an Error</button>
Nesémantické
<div>Report an Error</div>
Sémantické HTML poskytuje kontext čtečkám obrazovky, které nahlas čtou obsah stránky.
S ohledem na příklad tlačítka:
- tlačítka mají ve výchozím nastavení vhodnější styl
- čtečka obrazovky jej identifikuje jako tlačítko
- zaostřitelné
- klikací
Tlačítko je také dostupné pro lidi, kteří se spoléhají na navigaci pouze pomocí klávesnice; lze na něj klikat myší i klávesami a lze mezi nimi přepínat (pomocí klávesy tab na klávesnici).
Příklady nesémantických prvků: <div>a <span>- Nevypovídá nic o svém obsahu.
Příklady sémantických prvků: <form>, <table>, a <article>- Jasně definuje jeho obsah.
Nadpisy jsou důležité
Nadpisy jsou definovány pomocí <h1>značek to <h6>:
Příklad
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Vyhledávače používají nadpisy k indexování struktury a obsahu vašich webových stránek.
Uživatelé procházejí vaše stránky podle nadpisů. Je důležité používat nadpisy k zobrazení struktury dokumentu a vztahů mezi různými sekcemi.
Čtečky obrazovky také používají nadpisy jako navigační nástroj. Různé typy nadpisů určují obrys stránky.
<h1>nadpisy by měly být použity pro hlavní nadpisy, následované <h2>nadpisy, pak méně důležité
<h3>a tak dále.
Poznámka: HTML nadpisy používejte pouze pro nadpisy. Nepoužívejte nadpisy k tomu, aby byl text VELKÝ nebo tučný .
Alternativní text
Atribut altposkytuje alternativní text pro obrázek, pokud jej uživatel z nějakého důvodu nemůže zobrazit (z důvodu pomalého připojení, chyby v
src
atributu nebo pokud uživatel používá čtečku obrazovky).
Hodnota altatributu by měla popisovat obrázek:
Příklad
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
Pokud prohlížeč nemůže najít obrázek, zobrazí hodnotu alt
atributu:
Příklad
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
Deklarujte jazyk
lang
Atribut byste měli vždy zahrnout do <html>značky, abyste deklarovali jazyk webové stránky. To má pomoci vyhledávačům a prohlížečům.
Následující příklad specifikuje angličtinu jako jazyk:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Použijte Clear Language
Vždy používejte jasný jazyk, který je snadno srozumitelný. Snažte se také vyhnout znakům, které čtečka obrazovky nedokáže jasně přečíst. Například:
- Udržujte věty co nejkratší
- Vyhněte se pomlčkám. Místo psaní 1-3 pište 1 až 3
- Vyhněte se zkratkám. Místo únor pište únor
- Vyhněte se slangovým slovům
Vytvořte dobrý text odkazu
Text odkazu by měl jasně vysvětlovat, jaké informace čtenář kliknutím na tento odkaz získá.
Příklady dobrých a špatných odkazů:
Dobrý
Špatný
Poznámka: Tato stránka je úvodem do přístupnosti webu. Další podrobnosti naleznete v našem výukovém programu pro usnadnění .