Webové stránky by mali byť dostupné pre každého. Tu je to, čo potrebujete vedieť.

Vytvorenie webovej stránky nie je len vytvorenie webovej stránky. Dôležitým aspektom vývoja front-endu je zabezpečiť, aby používateľské rozhrania boli prístupné každému na internete, vrátane ľudí so zrakovým a sluchovým postihnutím. Svoj kód musíte napísať s ohľadom na týchto ľudí. Ako poskytujete zrakovo postihnutým ľuďom rovnaký prístup na vašu webovú stránku ako ľuďom bez zraku? Prečítajte si tento článok a dozviete sa to.

Prečo by sa vývojári mali zaujímať o dostupnosť webu?

Prístupnosť webu sa točí okolo myšlienky, že každý by mal mať rovnaký prístup k webu bez ohľadu na akékoľvek postihnutie alebo postihnutie. Prístupná webová stránka uľahčuje oslovenie väčšieho publika (asi 16 % ľudí na svete trpí jedným alebo druhým postihnutím).

Digitálna dostupnosť by nemala byť alternatívou pre vývojárov. Je nevyhnutnosťou pre každú profesionálnu značku. Toto sa berie vážne: ako uvádza Rozmanitosť, niekto zažaloval The Pokémon Company v roku 2019 kvôli neprístupnej webovej stránke.

instagram viewer

Webová dostupnosť s HTML

V HTML existujú pravidlá na zabezpečenie vývoja prístupných webových stránok. Táto časť vysvetlí niektoré z týchto pravidiel.

Použite sémantické prvky

Sémantické prvky v HTML sú prvky, ktoré majú význam. V HTML5 je okolo 100 prvkov. Niektoré prvky, ako napr a, sú nesémantické, pričom ostatné značky HTML sú sémantické. Aj keď môže byť nemožné prestať používať tieto nesémantické prvky, je dôležité začleniť do svojej práce čo najviac sémantických prvkov. Tu je zoznam populárnych sémantických prvkov:

Zvážte tento príklad od Taaskly:

Pohľad na obrázok vyššie odhalí nasledujúce prvky:

  • Nadpis
  • Obrázok
  • Odsek
  • Tri gombíky

Je ľahké predpokladať, že vývojári použili tagy na usporiadanie prvkov na obrazovke. Pri bližšom pohľade na kódy zistíte, že namiesto toho použili šesť sémantických značiek. Zjednodušený kód vyzerá takto:

<oddiele>
<imgsrc="/hero.png"alt="hrdina">
<článok>
<h1>Nájdite správne produkty a služby v správnom čase.h1>
<p>
 Ručne vyrábaná obuv, úprava vlasov, manažér sociálnych sietí, posielanie pochôdzok, zdroj príjmub>— čo si len spomeniete, Taaskly to pochopil. Nájdite každý produkt alebo službu, ktorú dnes potrebujete, keď sa zaregistrujete a používate Taaskly. 
p>
<ahref="/main/home">Zadávate úlohua>
<ahref="/main/services"> Nájdite službua>
<ahref="/hlavne/trhovisko" >Nájdite obchoda>
článok>
oddiele>

Z útržku kódu HTML môžete vidieť nasledovné:

  1. Obrázky, text a tlačidlá sú vo vnútri a element.
  2. The prvok rovnako rozdeľuje a prvkov.
  3. The prvok drží, , a prvkov.
  4. Tlačidlá sú kódované ako prvky; sú to teda odkazy, nie tlačidlá. Vo všeobecnosti vždy používajte odkazy na nasmerovanie používateľa na inú stránku alebo zobrazenie a tlačidlá používajte iba vtedy, keď chcete, aby používateľ vykonal akciu v rovnakom zobrazení. Pozri Stránka Angular's Button pre viac informácií o tomto.

Použite orientačné body na poskytnutie jasnej štruktúry stránky

Orientačné body sú sémantické značky, ktoré pomáhajú nevidomým používateľom navigovať na webovej stránke pomocou čítačiek obrazovky. Pomocou orientačných bodov je ľahké definovať rôzne časti webovej stránky. Web spoločnosti Apple používa orientačné body.

Na obrázku vyššie sú štyri rôzne orientačné body. Môžete použiť Štatistiky dostupnosti rozšírenie na vizualizáciu týchto orientačných bodov.

Na obrázku môžeme odvodiť a na vrchu, a obsahujúce a a a element. Viditeľne to ukazuje obrázok "navigácia", "región", a "informácie o obsahu". Tieto sú známe ako role, na ktoré sa pozrieme neskôr.

Vždy, keď musíte pre stránku použiť viacero orientačných bodov, vždy ich odlíšte štítkom. Napríklad, ak používate viacero prvky ako má Apple, musíte ich označiť. Mali by ste ich označiť značkou árie-štítok atribút. Takže môžete napísať niečo z tohto:

<navárie-štítok = "globálny">
<navárie-štítok = "miestna navigácia">
<navárie-štítok = "adresár jablka">

Používanie štítkov môže pomôcť čítačkám obrazovky preskočiť na ľubovoľnú navigáciu.

Využite atribúty roly, názvu a hodnoty

Niekedy môže byť nemožné použiť prvky HTML so vstavanými funkciami prístupnosti. Takéto prípady môžu byť jeden z týchto dvoch:

  1. Neexistuje žiadny natívny prvok HTML pre to, čo chcete dosiahnuť. Napríklad, ak musíte použiť a pretože sa nezdá, že by sa do úlohy hodil žiadny iný prvok.
  2. Kvôli technickým problémom nemôžete použiť sémantické prvky. Ak používate rámec, ktorý používa kedy by bolo lepšie použiť, bude vašou povinnosťou definovať vlastný ovládací prvok.

Na definovanie vlastného ovládacieho prvku potrebujete rolu, názov a hodnotu (niekedy) pre váš prvok.

Role

Štandardne a prvok má navigačnú úlohu, zatiaľ čo a prvok má úlohu bannera. Tieto prvky by ste mali používať iba na určené účely, aby ste pomohli asistenčným technológiám pochopiť štruktúru webovej stránky. Ak musíte použiť jeden namiesto druhého, mali by ste určiť rolu takto:

<hlavičkaúlohu = "navigácia">
<navúlohu = "banner">
<divúlohu = "navigácia">

názov

Názov je popisný text alebo štítok spojený s prvkom HTML. Najjednoduchšia forma názvu je text prvku. Tu je príklad:

<divúlohu = "tlačidlo">Klikni na mňa!div>

Vo vyššie uvedenom úryvku „Klikni na mňa!“ je názov element. Je tiež známy ako prístupný názov.

Pre prvky, ako je navigácia, rozbaľovacie zoznamy atď., je priradenie názvu zložitejšie ako v predchádzajúcom príklade. Je to iné, pretože tieto prvky majú v sebe podradené prvky. Ak chcete navigácii vyššie priradiť názov, použite árie-štítok atribút. Pozrite si tento príklad:

<navúlohu = "navigácia"árie-štítok = "globálna navigácia">...nav>

Mali by ste si uvedomiť, že a názov atribút sa líši od prístupného názvu. Tento útržok kódu poskytuje lepšie pochopenie:

 atribút názvu 
<navúlohu = "navigácia"názov = "globálna navigácia">...nav>
 prístupný názov 
<navúlohu = "navigácia"árie-štítok = "globálna navigácia">...nav>

Pozri Článok TGPi o prístupných menách aby ste tomu hlbšie porozumeli.

Hodnota

V HTML môže atribút value poskytnúť ďalšie informácie o prvku. Hodnoty poskytujú informácie o stave komponentu pre vlastné komponenty, ako sú akordeóny. Napríklad akordeón môže byť otvorený alebo zatvorený.

Svojim prvkom môžete pridať hodnotu niekoľkými spôsobmi. Tento úryvok ukazuje niektoré zo spôsobov, ako to môžete urobiť:

 aria-valuenow 
hodnotu
<vstuptypu="zaškrtávacie políčko"názov="produkt[]"hodnotu="1">

Uprednostňovanie dostupnosti webu pre inkluzívny online zážitok

Prístupnosť webu presahuje dodržiavanie pravidiel; ide tiež o zabezpečenie toho, aby mal každý rovnaký prístup k vašej webovej lokalite. Začlenením sémantických prvkov, orientačných bodov a atribútov, ako sú rola, názov a hodnota, do kódu HTML môže byť vaša webová lokalita prístupnejšia pre ľudí so zdravotným postihnutím. Nepremýšľajte o dostupnosti webu ako o možnosti; považovať to za nevyhnutnosť.