Požiadavky na webový design stále viac zahŕňajú zlepšenú prístupnosť webu. Nestačí však optimalizácia stránky pre všetky hlavné prehliadače s kompatibilitou viacerých zariadení? Výkonnosť, prístupnosť, osvedčené postupy a SEO svojich webových stránok môžete ľahko zmerať pomocou majáka Google. Prečo teda záleží na prístupnosti?

Podľa CDC (Centra pre kontrolu a prevenciu chorôb) žije so zdravotným postihnutím viac ako 60 miliónov Američanov. Podľa Pokynov pre prístupnosť webového obsahu môžete uviesť niekoľko predbežných úvah, ktoré prispejú k vytvoreniu prístupnej webovej stránky. Tu je všetko, čo potrebujete na začiatok s prístupnosťou na web pomocou HTML a CSS.

Štruktúrovaný HTML so správnou sémantikou

Napriek tomu, aby boli používatelia pomocných technológií vizuálne príťažliví, nemali by ste sa nechať zmiasť. Aj keď mnoho systémov na správu obsahu, ako je WordPress, používa HTML, je vašou zodpovednosťou znova skontrolovať a potvrdiť, že je správne použitý.

Napríklad a

Čítaj viac: Jednoduché príklady kódu HTML, ktoré sa môžete naučiť za 10 minút

Sémantický HTML sa vyvíja jednoduchšie, pretože s ním získate aj ďalšie funkcie. Na mobile funguje úžasne. Tiež vtedy, keď kladiete dôraz na kľúčové slová zabalené vnútri

alebo tag, pomáha pri SEO.

Štruktúrovaný obsah pre používateľov čítačky obrazovky

Tu je príklad sémantického HTML dobrého vs. zle.

Dobré sémantické HTML
Môj nadpis

Tu je návod, ako môžete vytvoriť prístupný web pomocou HTML a CSS

Môj druhý nadpis

Zlý sémantický HTML
Môj nadpis

Tu je návod, ako môžete vytvoriť prístupný web pomocou HTML a CSS

V prvom prípade je pre čítačky obrazovky veľmi jednoduchá navigácia. Bude čítať hlavičku upozorňujúcu na nadpis a odsek. Po každom prvku sa na sekundu zastaví. Niektoré nadpisy môžete preskočiť alebo sa vrátiť na predchádzajúce pomocou klávesu Enter/Return. Obsah môžete vytvoriť aj pomocou značky hlavičky.

Keď píšete prezentačné HTML namiesto sémantického HTML (v druhom prípade), riadok sa zbytočne láme a má za následok zlú skúsenosť. Je to ako príprava obrovského bloku, ktorý je oveľa ťažšie kaskádovať a manipulovať, pretože neexistujú potenciálni selektori.

Jazyk a rozloženia prístupných webových stránok

Mali by ste používať presný jazyk s rozšírenými skratkami a skratkami. Ak je to možné, pokúste sa vyhnúť čiarkam napísaním 9-5 -> 9 až 5. Na vytvorenie rozloženia stránky boli predtým použité tabuľky HTML. Bývalo to prekážkou správneho zobrazovania kvôli vnoreným tabuľkám, ktoré tvorili pomerne zložité rozloženie. Tu je moderná štruktúra webových stránok:

Toto je hlavička



Obsah hlavnej stránky

obsahujúci článok

Nadpis článku

obsah článku



Päta webovej stránky

Ako teda vidíte, toto rozloženie je priateľské k čítačke obrazovky. Značenie je zrozumiteľné pomocou jasného a stručného kódu. Tiež sa ľahko udržiava a pri sťahovaní vyžaduje menšiu šírku pásma. Uistite sa, že ste zdrojový kód umiestnili logicky; to bude znamenať rozdiel.

Znovu zvážte ovládacie prvky, tabuľky a alternatívny text v používateľskom rozhraní

Ovládacie prvky používateľského rozhrania sú najčastejšie tlačidlá, formulár a prepojenia vášho webového dokumentu. Platí pravidlo, že sa s nimi dá manipulovať pomocou klávesnice. Majú predvolený štýl (môžu sa líšiť v rôznych prehliadačoch), kde môžete pomocou klávesu Tab preskočiť na ďalšie možnosti a stlačením klávesu Enter/Return dospieť k záveru. Textové štítky môžete spravovať tak, že namiesto „kliknite sem“ pridáte výrazné a zmysluplné ukotvovacie texty.

Ak chcete vytvoriť prístupné tabuľky, pridajte hlavičky tabuliek

a zadajte riadky alebo stĺpce pomocou atribútu scope. Okrem toho môžete použiť alebo súhrnný atribút, ktorý čitateľom obrazovky poskytne rýchly prehľad o obsahu tabuľky.

Alternatívny text poskytuje kontextové informácie o obrázku alebo videu webovým prehľadávačom a čítačkám obrazovky. Ak je váš obrázok na dekoračné účely, nechajte značku alt prázdnu. V opačnom prípade veľa pomôže podrobný popis obrázku.

Čítačka obrazovky vo väčšine prípadov prečíta alternatívny text, názov súboru a názov (môžete ho preskočiť). Ak tiež nechcete používať alternatívny text alebo chcete pridať rovnaký štítok k viacerým obrázkom, tu je rýchly tip:

Červený kvet ...

Na odkazovanie na toto ID ste použili atribút aria-labelledby. Umožní čítačkám obrazovky používať alternatívny text vo forme tohto odseku.

Štandardný CSS pre lepšiu prístupnosť

Úprava funkcií prístupnej stránky znamená, že váš návrh by sa mal správať podľa základného obsahu stránky. Napríklad pre a

,

a

prvok, typický CSS by mal byť:

h1 {
veľkosť písma: 4rem;
}
p, li {
veľkosť písma: 1,5rem;
farba: modrá;
}

Pohodlnému čítaniu by mala pomôcť veľkosť písma, medzery medzi písmenami, rodina písem atď. Nadpisy by mali vyčnievať z hlavného textu (dobrý je aj predvolený štýl). Okrem toho by mal mať text kontrastnú farbu od formátu pozadie, ktoré vyberiete pomocou CSS.

Úprava textu, odkazov a štítkov

Mikrointerakcie sú možné s prístupným CSS. Môže to byť také malé, ako zdôraznenie textu a správne zvýraznenie odkazov. Môžete použiť a výrazne označiť. Bodkované podčiarknutie môžete pridať pomocou element.

Štandardný odkaz by mal byť podčiarknutý predvolenou farbou: modrá a predtým navštíveným odkazom predvolenou farbou: fialovou (môžete ju prispôsobiť).

a {
farba: #ff0000;
}
a: aktívny {
farba: #000000;
farba pozadia: #a60000;
}
a: hover, a: visit, a: focus {
farba: #a60000;
textová dekorácia: žiadna;
}

So zmenou ukazovateľa myši by ste teda mali zvýrazniť zameraný text. Kurzor ukazovateľa a obrys hrajú dôležitú úlohu v prístupnosti webu.

Použite CSS na čistý vzhľad prvkov formulára a štítkov. Tiež sa rozhodnite, či budú stavy zaostrenia/vznášania sa konzistentné vo väčšine prehliadačov. Nezabudnite, že tieto malé narážky pomáhajú ľuďom porozumieť vašej webovej stránke.

Farebný kontrast a hodnoty skrývania

Upravte farebnú schému webu tak, aby farba v popredí (text/obrázok) kontrastovala s farbou pozadia predovšetkým preto, že pre osoby so zrakovým postihnutím (napr. farbosleposť) je ťažšie čítať obsah poriadne. Môžeš použiť Kontrola kontrastu farieb aby ste získali slušnú farebnú schému podľa kritérií WCAG. Skúste tiež pridať značky (ako hviezdička) spolu s upozorneniami alebo zmluvnými podmienkami (nielen červeným upozornením).

Čítačky obrazovky sa nemajú čoho obávať, kým nebude poradie zdrojového kódu napísané slušne. Skúste sa vyhnúť používaniu vlastností display: none alebo visibility: hidden, pretože skrývajú obsah pred čítačkami obrazovky.

Uľahčite prepísanie štýlu

Kľúčovým bodom je, že bez ohľadu na to, ako dobre webovú stránku navrhnete, majú používatelia rôzne dôvody na zmenu štýlu. Niektorí napríklad môžu chcieť väčšiu veľkosť textu alebo chcú zmeniť farbu textu a pozadia, aby boli čitateľné. Vaša oblasť obsahu by to teda mala úplne zvládnuť.

Balenie: skombinujte HTML a CSS

Teraz poznáte základy začínania na sémantickom HTML a písaní rozumného zdrojového kódu v správnom poradí pre prístupnú webovú stránku. Zamerajte sa na HTML a po dokončení prejdite na vytvorenie prístupného CSS.

Pomocou vyššie uvedených techník môžete zlepšiť používateľský zážitok a slúžiť krásnemu publiku. Začnite teda vytvárať webové stránky, ktoré budú reagovať a budú prístupné.

Ako vytvoriť webovú stránku: pre začiatočníkov

Dnes vás prevediem procesom vytvorenia kompletnej webovej stránky od začiatku. Ak to znie náročne, nebojte sa. Prevediem vás ním na každom kroku.

Čítajte ďalej

O autorovi

Rozbaliť a prečítať celý príbeh