Spletne strani morajo biti dostopne vsem. Tukaj je tisto, kar morate vedeti.

Ustvarjanje spletne strani ni samo ustvarjanje spletne strani. Pomemben vidik razvoja sprednjega dela je zagotavljanje, da so uporabniški vmesniki dostopni vsem na internetu, vključno z osebami z motnjami vida in sluha. Svojo kodo morate napisati z mislijo na te ljudi. Kako osebam z motnjami vida omogočite enak dostop do vašega spletnega mesta kot ljudem brez težav s vidom? Preberite ta članek, če želite izvedeti.

Zakaj bi morali biti razvijalci zaskrbljeni zaradi spletne dostopnosti?

Spletna dostopnost se vrti okoli ideje, da bi morali imeti vsi enak dostop do spleta, ne glede na invalidnost ali invalidnosti. Z dostopno spletno stranjo lažje dosežete večje občinstvo (približno 16 % ljudi na svetu trpi za eno ali drugo invalidnostjo).

Digitalna dostopnost ne bi smela biti možnost za razvijalce. To je nujno za vsako profesionalno znamko. To jemlje resno: kot poroča Raznolikost, leta 2019 je nekdo tožil podjetje The Pokémon Company zaradi nedostopnega spletnega mesta.

instagram viewer

Spletna dostopnost s HTML

V HTML obstajajo pravila, ki zagotavljajo razvoj dostopnih spletnih mest. V tem razdelku bodo razložena nekatera od teh pravil.

Uporabite pomenske elemente

Semantični elementi v HTML so elementi, ki imajo pomene. V HTML5 je približno 100 elementov. Nekateri elementi, kot npr in, niso semantični, medtem ko druge oznake HTML so semantične. Čeprav je morda nemogoče prenehati uporabljati te nesemantične elemente, je pomembno, da v svoje delo vključite čim več semantičnih elementov. Tukaj je seznam priljubljenih semantičnih elementov:

Razmislite o tem primeru od Taaskly:

Pogled na zgornjo sliko bo razkril naslednje elemente:

  • Naslov
  • Slika
  • Odstavek
  • Trije gumbi

Preprosto je domnevati, da so razvijalci uporabili oznake za razporeditev elementov na zaslonu. Če si podrobneje ogledate kode, boste opazili, da so namesto tega uporabili šest semantičnih oznak. Poenostavljena koda izgleda takole:

<razdelek>
<imgsrc="/heroj.png"alt="junak">
<Članek>
<h1>Poiščite prave izdelke in storitve ob pravem času.h1>
<str>
 Ročno izdelana obutev, prenova frizure, social media manager, pošiljanje po opravkih, vir zaslužkab>— kar hočeš, Taaskly ga je dobil. Poiščite vsak izdelek ali storitev, ki jo potrebujete danes, ko se prijavite in uporabite Taaskly. 
str>
<ahref="/main/home">Zunanje izvajanje nalogea>
<ahref="/glavne/storitve"> Poiščite storiteva>
<ahref="/glavna/tržnica" >Poiščite trgovinoa>
Članek>
razdelek>

Iz delčka HTML lahko opazite naslednje:

  1. Slike, besedilo in gumbi so znotraj a element.
  2. The element enakomerno deli in elementi.
  3. The element drži, , in elementi.
  4. Gumbi so kodirani kot elementi; torej so povezave in ne gumbi. Splošno pravilo je, da vedno uporabite povezave, da uporabnika usmerite na drugo stran ali pogled, in uporabite gumbe, ko želite, da uporabnik izvede dejanje v istem pogledu. glej Stran z gumbi Angular za več informacij o tem.

Uporabite orientacijske točke, da zagotovite jasno strukturo strani

Točke so semantične oznake, ki slepim uporabnikom pomagajo krmariti po spletni strani z bralniki zaslona. Z orientacijskimi točkami je enostavno določiti različne dele spletne strani. Applovo spletno mesto uporablja Landmarks.

Zgornja slika prikazuje štiri različne znamenitosti. Lahko uporabite Vpogled v dostopnost razširitev za vizualizacijo teh mejnikov.

Na sliki lahko razberemo a na vrhu, a ki vsebuje a in a element. Opazno, slika kaže “navigacija”, “regija”, in “contentinfo”. Te so znane kot vloge, ki si jih bomo ogledali kasneje.

Kadarkoli morate uporabiti več orientacijskih točk za stran, jih vedno ločite z oznako. Na primer, če uporabljate več elemente, kot jih ima Apple, jih morate označiti. Označiti jih morate z arija-oznaka atribut. Torej lahko napišete nekaj takega kot kar koli od tega:

<navarija-oznaka = "globalno">
<navarija-oznaka = "lokalna navigacija">
<navarija-oznaka = "apple imenik">

Uporaba oznak lahko pomaga bralnikom zaslona preskočiti na katero koli navigacijo.

Uporabite atribute vloge, imena in vrednosti

Včasih je morda nemogoče uporabiti elemente HTML z vgrajenimi funkcijami za ljudi s posebnimi potrebami. Takšna primera sta lahko eden od teh dveh:

  1. Za to, kar želite doseči, ni izvornega elementa HTML. Na primer, če morate uporabiti a ker se zdi, da noben drug element ne ustreza tej vlogi.
  2. Pomenskih elementov ne morete uporabljati zaradi tehničnih težav. Če uporabljate okvir, ki uporablja kdaj bi bilo bolje uporabiti, bo vaša dolžnost določiti nadzor po meri.

Če želite definirati kontrolnik po meri, potrebujete vlogo, ime in vrednost (včasih) za vaš element.

Vloga

Privzeto je a element ima navigacijsko vlogo, a element ima vlogo pasice. Te elemente uporabljajte samo za predvidene namene, da podpornim tehnologijam pomagate razumeti strukturo spletne strani. Če morate uporabiti enega namesto drugega, morate vlogo določiti takole:

<glavavlogo = "navigacija">
<navvlogo = "pasica">
<divvlogo = "navigacija">

Ime

Ime je opisno besedilo ali oznaka, povezana z elementom HTML. Najlažja oblika imena je besedilo elementa. Tukaj je primer:

<divvlogo = "gumb">Kliknite me!div>

V zgornjem delčku, "Kliknite me!« je ime element. Znano je tudi kot dostopno ime.

Za elemente, kot so navigacija, spustni meniji itd., je dodeljevanje imena bolj zapleteno kot v prejšnjem primeru. Drugače je, ker imajo ti elementi v sebi otroške elemente. Če želite zgornji navigaciji dodeliti ime, uporabite arija-oznaka atribut. Poglej ta primer:

<navvlogo = "navigacija"arija-oznaka = "globalna-navigacija">...nav>

Upoštevati morate, da a ime se razlikuje od dostopnega imena. Ta delček kode omogoča boljše razumevanje:

 atribut imena 
<navvlogo = "navigacija"ime = "globalna-navigacija">...nav>
 dostopno ime 
<navvlogo = "navigacija"arija-oznaka = "globalna-navigacija">...nav>

glej Članek TGPi o dostopnih imenih da bi to globlje razumeli.

Vrednost

V HTML-ju lahko atribut vrednosti zagotovi dodatne informacije o elementu. Vrednosti zagotavljajo informacije o stanju komponente za komponente po meri, kot so harmonike. Na primer, harmoniko je mogoče odpreti ali zapreti.

Svojim elementom lahko dodate vrednost na več načinov. Ta delček prikazuje nekaj načinov, kako lahko to storite:

 arija-valuenow 
vrednost
<vnosvrsta="potrditveno polje"ime="izdelek []"vrednost="1">

Dajanje prednosti spletni dostopnosti za vključujočo spletno izkušnjo

Spletna dostopnost presega upoštevanje pravil; gre tudi za zagotavljanje, da imajo vsi enak dostop do vaše spletne strani. Če v svoj HTML vključite semantične elemente, mejnike in atribute, kot so vloga, ime in vrednost, lahko naredite vaše spletno mesto bolj dostopno osebam s posebnimi potrebami. Ne razmišljajte o spletni dostopnosti kot o možnosti; menijo, da je to nujno.