Požadavky na web design stále více zahrnují zlepšenou přístupnost webu. Nestačí však optimalizace webu pro všechny hlavní prohlížeče s kompatibilitou více zařízení? Výkon Google, přístupnost, doporučené postupy a SEO můžete snadno měřit pomocí Google Lighthouse. Proč tedy na přístupnosti záleží?

Podle CDC (Centra pro kontrolu a prevenci nemocí) žije s postižením přes 60 milionů Američanů. Podle pokynů pro přístupnost webového obsahu můžete uvést několik předběžných úvah, které přispějí k vytvoření přístupného webu. Zde je vše, co potřebujete k zahájení webové přístupnosti pomocí HTML a CSS.

Strukturovaný HTML se správnou sémantikou

I když jsou webové stránky vizuálně atraktivní, uživatelé pomocných technologií by se neměli nechat zmást. Ačkoli mnoho systémů pro správu obsahu, jako je WordPress, používá HTML, je vaší odpovědností znovu zkontrolovat a potvrdit, že je správně použit.

Například a

Přečtěte si více: Jednoduché příklady HTML kódu, které se můžete naučit za 10 minut

Sémantický HTML se vyvíjí snáze, protože s ním získáte další funkce. Na mobilu to funguje skvěle. Také, když dáte důraz na klíčová slova zabalená uvnitř

nebo tag, pomáhá to v SEO.

Strukturovaný obsah pro uživatele čteček obrazovky

Zde je příklad sémantického HTML dobrý vs. špatný.

Dobrý sémantický HTML
Můj nadpis

Zde je návod, jak můžete vytvořit přístupný web pomocí HTML a CSS

Můj druhý nadpis

Špatný sémantický HTML
Můj nadpis

Zde je návod, jak můžete vytvořit přístupný web pomocí HTML a CSS

V prvním případě se čtečky obrazovky snadno orientují. Přečte záhlaví upozorňující na nadpis a odstavec. Po každém prvku se na sekundu zastaví. Některé nadpisy můžete přeskočit nebo se vrátit na předchozí pomocí Enter/Return. Pomocí značky záhlaví můžete také vytvořit obsah.

Když píšete prezentační HTML místo sémantického HTML (v druhém případě), řádek se zbytečně láme a má za následek špatnou zkušenost. Je to jako příprava obřího bloku, který je mnohem těžší kaskádovat a manipulovat, protože neexistují žádní potenciální voliči.

Jazyk a rozvržení pro přístupný web

Měli byste používat přesný jazyk s rozšířenými zkratkami a zkratkami. Pokud je to možné, zkuste se vyhnout pomlčkám psaním 9-5 -> 9 až 5. Dříve byly k vytvoření rozložení stránky použity tabulky HTML. Dříve to brzdilo správné odečty kvůli vnořeným tabulkám, které vytvářely poměrně složité rozvržení. Zde je moderní struktura webových stránek:

Toto je záhlaví



Obsah hlavní stránky

obsahující článek

Nadpis článku

obsah článku



Zápatí webu

Jak tedy vidíte, toto rozložení je přátelské pro čtečku obrazovky. Značení je srozumitelné díky jasnému a stručnému kódu. Také se snadno udržuje a při stahování vyžaduje menší šířku pásma. Ujistěte se, že jste zdrojový kód umístili logicky; to bude znamenat rozdíl.

Přehodnoťte ovládací prvky, tabulky a alternativní text uživatelského rozhraní

Ovládací prvky uživatelského rozhraní jsou nejčastěji tlačítka, formuláře a ovládací prvky odkazů vašeho webového dokumentu. Platí pravidlo, že s nimi lze manipulovat pomocí klávesnice. Mají nějaký výchozí styl (může se lišit v různých prohlížečích), kde můžete přeskočit na jiné možnosti pomocí klávesy Tab a stisknutím Enter/Return dosáhnout závěru. Popisky textu můžete spravovat přidáním výrazných a smysluplných kotevních textů místo „klikněte sem“.

Chcete -li vytvořit přístupné tabulky, přidejte záhlaví tabulek

a zadejte řádky nebo sloupce pomocí atributu scope. Kromě toho můžete použít nebo souhrnný atribut, který čtečkám obrazovky poskytne rychlý přehled o obsahu tabulky.

Alternativní text poskytuje kontextové informace o obrázku nebo videu webovým prohledávačům a čtečkám obrazovky. Pokud váš obrázek slouží k dekorativním účelům, je lepší nechat alt tag prázdný. Jinak hodně pomůže podrobný popis obrázku.

Ve většině případů čtečka obrazovky přečte alternativní text, název souboru a atribut titulu (můžete jej přeskočit). Pokud také nechcete používat alternativní text nebo chcete přidat stejný štítek na více obrázků, zde je rychlý tip:

Červený květ ...

K odkazování na toto ID jste použili atribut aria-labelledby. Umožní čtečkám obrazovky používat alternativní text ve formě tohoto odstavce.

Standardní CSS pro lepší přístupnost

Styling přístupných funkcí stránky znamená, že by se váš návrh měl chovat podle základního obsahu stránky. Například pro a

,

, a

prvek, typický CSS by měl být:

h1 {
velikost písma: 4rem;
}
p, li {
velikost písma: 1,5rem;
barva: modrá;
}

K pohodlnému čtení by měla přispět velikost písma, mezery mezi písmeny, rodina písem atd. Nadpisy by měly vyčnívat z textu textu (výchozí styl je také dobrý). Kromě toho by měl mít text kontrastní barvu od pozadí, které vyberete pomocí CSS.

Styling textu, odkazů a štítků

Mikrointerakce jsou možné s přístupným CSS. Může to být tak malé, jako zdůraznění textu a řádné zvýraznění odkazů. Můžete použít a označit výrazně. Tečkované podtržení můžete přidat pomocí živel.

Standardní odkaz by měl být podtržen výchozí barvou: modrá a dříve navštíveným odkazem výchozí barvou: fialovou (můžete ji přizpůsobit).

a {
barva: #ff0000;
}
a: aktivní {
barva: #000000;
barva pozadí: #a60000;
}
a: hover, a: visit, a: focus {
barva: #a60000;
textová dekorace: žádná;
}

Se změnou ukazatele myši byste tedy měli zvýraznit zaměřený text. Kurzor ukazatele a obrys hrají důležitou roli v přístupnosti webu.

Použijte CSS k čistému vzhledu prvků formuláře a popisků. Také rozhodněte o stavech fokusu/vznášení, které jsou konzistentní ve většině prohlížečů. Tyto malé narážky pomáhají lidem porozumět vaší webové stránce.

Barevný kontrast a hodnoty skrývání

Upravte barevné schéma webu tak, aby barva popředí (text/obrázek) kontrastovala s barvou pozadí především proto, že je pro lidi se zrakovým postižením (např. barvoslepost) těžší číst obsah správně. Můžeš použít Kontrola kontrastu barev získat slušné barevné schéma podle kritérií WCAG. Zkuste také přidat značkovací značky (jako hvězdičku) spolu s varováními nebo podmínkami (nejen červené upozornění).

Čtečky obrazovky se nemají čeho obávat, dokud není pořadí zdrojového kódu slušně napsáno. Zkuste se vyhnout použití vlastností display: none nebo visibility: hidden, protože skrývají obsah před čtečkami obrazovky.

Usnadněte přepsání stylu

Klíčovým bodem je, že bez ohledu na to, jak dobře web navrhnete, uživatelé mají různé důvody, proč styl přepsat. Někteří například mohou chtít větší velikost textu nebo chtějí změnit barvu textu a pozadí, aby byla čitelná. Vaše oblast obsahu by to tedy měla zcela zvládnout.

Balení: Kombinujte HTML a CSS

Nyní víte, jak začít s sémantickým HTML a psát rozumný zdrojový kód ve správném pořadí pro přístupný web. Zaměřte se na HTML a po dokončení přejděte k vytvoření přístupného CSS.

Pomocí výše uvedených technik můžete zlepšit uživatelské prostředí a sloužit krásnému publiku. Začněte tedy vytvářet responzivní a dostupné weby.

Jak vytvořit web: pro začátečníky

Dnes vás provedu procesem vytvoření úplné webové stránky od nuly. Nebojte se, pokud to zní obtížně. Provedu vás tím na každém kroku.

Číst dále

O autorovi

Rozbalit a přečíst si celý příběh