Ako sprístupniť vaše webové stránky?

Nie každý pristupuje k webovému obsahu čítaním z obrazovky webového prehliadača. Niektorí používajú na čítanie obsahu čítačky obrazovky. Niektorí ľudia používajú režim čítačky vo svojom prehliadači, pretože potrebujú konzistentný dizajn, ktorý im nespôsobuje problémy. Správne oddelenie obsahu od dizajnu výrazne zlepší používateľský dojem týchto ľudí.

1. 1
   Pridajte alternatívny text pre všetky príslušné obrázky. Výnimkou sú iba obrázky, ktoré sú iba dekoratívne a ktoré nie sú potrebné na pochopenie webovej stránky alebo interakciu s jej obsahom. Alternatívny text je text ako alternatíva k obrázku. Čítačky obrazovky budú čítať alternatívny text namiesto obrázku.

   • Alternatívny text by mal byť funkčný, nie popis obrázka. Symbol by napríklad mal mať alternatívny text „Hľadať“, nie alternatívny text „Lupa“. Ak je obrázok použitý na tlačidle, dajte mu alternatívny text toho, čo dané tlačidlo robí, napr. „Odoslať“.
   • Ak je v obrázku text, napríklad ak je obrázkom logo, text by mal byť zahrnutý do alternatívneho textu.
   • Zahrňte alternatívny text do obrázka pomocou altatribútu. Používa sa takto:

     <img src = "ZXhhbXBsZS5wbmc =" alt = "Alt text sem patrí"> 

   • Ak je obrázok iba dekoratívny, nastavte alternatívny text ako alt="".
2. 2
   Popíšte obrázok inde, ak je veľmi zložitý alebo obsahuje veľa informácií. Napríklad ak ide o graf alebo graf, popíšte jeho obsah nad alebo pod obrázkom. Uveďte odkaz v alternatívnom texte, napríklad „Graf mediánu príjmu domácnosti v Európe od roku 2000 do roku 2017, ako je popísané nižšie“. Môžete tiež vytvoriť odkaz na dokument so všetkými hodnotami ako text alebo tabuľku.
3. 3
   Zvážte použitie CSS iba pre dekoratívne obrázky. Týmto spôsobom tieto obrázky tiež zmiznú, ak používateľ vypne CSS.

   • Obrázky na pozadí je možné zahrnúť pomocou background-imageatribútu CSS. Napríklad:

     html {background-image: url ("example.png"); } 

4. 4
   Používajte sémantické značky html5. HTML5 pridalo mnoho sémantických značiek, tj. Značiek, ktoré sa používajú na opis obsahu. Tieto značky umožňujú technológiám ako čítačka obrazovky alebo režim čítania niektorých prehľadávačov „porozumieť“ obsahu a zmysluplne ho zobraziť.

   • Ak používate zvýraznenie textu kurzívou a kurzívou, nielen na styling, použite <strong>a <em>. Toto je tiež podporované v predchádzajúcich verziách HTML.
   • Používa sa <nav>na navigačné sekcie. Toto umožňuje čítačkám obrazoviek a iným technológiám identifikovať tieto sekcie a rozhodnúť sa, či ich majú alebo nemajú zobrazovať.
   • Použitie <article>pre hlavný obsah webovej stránky, ktorý má zmysel sám osebe, bez ostatných častí stránky. <article>Značka by sa napríklad mala obvykle používať pre položky blogu, spravodajské články a príspevky na fórach.
5. 5
   Ak je to potrebné, použite ARIA. Aj keď je lepšie používať natívne prvky HTML, niekedy nie sú na váš účel k dispozícii žiadne. V takom prípade môžete použiť ARIA (Accessible Rich Internet Applications).

   • Sémantiku prvkov HTML by ste nemali meniť, pokiaľ to nie je úplne nevyhnutné. </ref> Napríklad toto:

     <div role = "banner"> <h1> Toto je banner s hlavičkou prvej úrovne </h1> </div> 

     sa uprednostňuje toto:

     <h1 role = "banner"> Toto je banner s nadpisom prvej úrovne </h1> 

6. 6
   Nastavte jazyk dokumentu a častí, ktoré sú odlišné. To sa deje pomocou langatribútu HTML. Umožňuje programom na čítanie obrazovky správne vyslovovať časti a stránku a bežným prehliadačom vykresliť text presnejšie (napríklad prepínať medzi smerom písania sprava doľava a zľava doprava).
7. 7
   Pre formuláre používajte prvky formulára. Napríklad, aby sa tlačidlo, použitie buttonalebo input, nie aalebo divprvky. Posledné dva menované sa spoliehajú na to, že CSS a JavaScript fungujú ako tlačidlo, ktoré nie sú vždy k dispozícii. Musíte tiež vykonať ďalšiu prácu, aby bolo správne zaostrené, a informovať prehliadač, že ide o tlačidlo. Je teda jednoduchšie a prístupnejšie iba použiť prvok buttonalebo input.
8. 8
   Formuláre štítkov správne. Ak chcete priradiť štítok k ovládaciemu prvku formulára, použite <label>. Čítačka obrazovky bude čítať tento štítok, keď používateľ prejde na ovládací prvok formulára, pričom text bez štítka sa zvyčajne preskočí. Príkladom správneho označovania by bolo:

   <form action = "/example_action.php"> <input type = "checkbox" id = "souhlas"> <label for = "agree"> Súhlasím s podmienkami. </label> <br> <typ vstupu = "submit" value = "Submit"> </form>