Web stranice trebaju biti dostupne svima. Evo što trebate znati.

Stvaranje web stranice nije samo stvaranje web stranice. Važan aspekt front-end razvoja osigurava da su korisnička sučelja dostupna svima na internetu, uključujući osobe s oštećenjima vida i sluha. Morate napisati svoj kod imajući na umu te ljude. Kako osobama s poteškoćama s vidom omogućiti jednak pristup vašoj web stranici kao i osobama s poteškoćama s vidom? Pročitajte ovaj članak kako biste saznali.

Zašto bi programeri trebali biti zabrinuti za web pristupačnost?

Web pristupačnost vrti se oko ideje da svatko treba imati jednak pristup webu, bez obzira na invaliditet ili invaliditet. Dostupna web stranica olakšava dopiranje do šire publike (oko 16% svijeta pati od jednog ili drugog invaliditeta).

Digitalna pristupačnost ne bi trebala biti opcija za programere. To je nužnost za svaki profesionalni brend. Ovo se shvaća ozbiljno: kako izvještava Raznolikost, netko je tužio The Pokémon Company 2019. godine zbog nedostupne web stranice.

instagram viewer

Web pristupačnost s HTML-om

U HTML-u postoje pravila koja osiguravaju razvoj pristupačnih web stranica. Ovaj odjeljak objasnit će neka od tih pravila.

Koristite semantičke elemente

Semantički elementi u HTML-u su elementi koji imaju značenja. U HTML5 postoji oko 100 elemenata. Neki elementi, kao npr i, nisu semantički, dok druge HTML oznake su semantičke. Iako bi moglo biti nemoguće prestati koristiti ove nesemantičke elemente, važno je uključiti što više semantičkih elemenata u svoj rad. Evo popisa popularnih semantičkih elemenata:

Razmotrite ovaj primjer iz Taasklyja:

Pogled na gornju sliku otkrit će sljedeće elemente:

  • Naslov
  • Slika
  • Paragraf
  • Tri gumba

Lako je pretpostaviti da su programeri koristili oznake za raspored elemenata na ekranu. Ako bolje pogledate kodove, primijetit ćete da su umjesto toga koristili šest semantičkih oznaka. Pojednostavljeni kôd izgleda ovako:

<odjeljak>
<imgsrc="/heroj.png"alt="junak">
<članak>
<h1>Pronađite prave proizvode i usluge u pravo vrijeme.h1>
<str>
 Ručna izrada obuće, regeneracija frizure, social media manager, slanje porudžbina, izvor prihodab>— kako god, Taaskly je shvatio. Pronađite sve proizvode ili usluge koje trebate danas kada se prijavite i koristite Taaskly. 
str>
<ahref="/glavni/dom">Outsourcajte zadataka>
<ahref="/glavne/usluge"> Pronađite uslugua>
<ahref="/glavno/tržište" >Pronađite dućana>
članak>
odjeljak>

Iz HTML isječka možete vidjeti sljedeće:

  1. Slike, tekst i gumbi nalaze se unutar a element.
  2. The element jednako dijeli i elementi.
  3. The element drži, , i elementi.
  4. Gumbi su kodirani kao elementi; dakle, oni su poveznice, a ne gumbi. Kao opće pravilo, uvijek koristite poveznice za usmjeravanje korisnika na drugu stranicu ili prikaz, a koristite gumbe samo kada želite da korisnik izvede radnju u istom prikazu. Vidjeti Angularova stranica gumba za više informacija o ovome.

Koristite orijentire za pružanje jasne strukture stranice

Orijentiri su semantičke oznake koje pomažu slijepim korisnicima da se kreću web stranicom pomoću čitača zaslona. Pomoću orijentira lako je definirati različite dijelove web stranice. Appleova web stranica koristi Orijentire.

Gornja slika prikazuje četiri različite znamenitosti. Možete koristiti Uvid u pristupačnost proširenje za vizualizaciju ovih orijentira.

Na slici možemo zaključiti a na vrhu, a koji sadrži a, i a element. Primjetno, slika pokazuje “navigacija”, "regija", i “contentinfo”. One su poznate kao uloge, koje ćemo pogledati kasnije.

Kad god morate koristiti više orijentira za stranicu, uvijek ih odvojite oznakom. Na primjer, ako koristite višestruke elemente kao što ima Apple, morate ih označiti. Trebali biste ih označiti s arija-oznaka atribut. Dakle, možete napisati nešto poput bilo čega od ovoga:

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

Korištenje oznaka može pomoći čitačima zaslona da preskoče na bilo koju navigaciju.

Koristite atribute uloge, imena i vrijednosti

Ponekad može biti nemoguće koristiti HTML elemente s ugrađenim značajkama pristupačnosti. Takvi slučajevi mogu biti bilo koji od ova dva:

  1. Ne postoji izvorni HTML element za ono što želite postići. Na primjer, ako morate koristiti a jer se čini da nijedan drugi element ne odgovara toj ulozi.
  2. Ne možete koristiti semantičke elemente zbog tehničkih problema. Ako koristite okvir koji koristi kada bi bilo bolje koristiti, bit će vaša dužnost definirati prilagođenu kontrolu.

Da biste definirali prilagođenu kontrolu, potrebna vam je uloga, naziv i vrijednost (ponekad) za vaš element.

Uloga

Prema zadanim postavkama, a element ima navigacijsku ulogu, dok a element ima ulogu natpisa. Ove elemente biste trebali koristiti samo u svrhu za koju su namijenjeni kako biste pomogli pomoćnim tehnologijama da razumiju strukturu web stranice. Ako morate koristiti jednu umjesto druge, trebali biste navesti ulogu ovako:

<Zaglavljeuloga = "navigacija">
<navuloga = "banner">
<divuloga = "navigacija">

Ime

Naziv je opisni tekst ili oznaka povezana s HTML elementom. Najlakši oblik imena je tekst elementa. Evo primjera:

<divuloga = "dugme">Klikni me!div>

U gornjem isječku, "Klikni me!" ime je element. Također je poznato kao pristupačno ime.

Za elemente kao što su navigacija, padajući izbornici itd., dodjeljivanje imena je složenije nego u prethodnom primjeru. Drugačije je jer ti elementi u sebi imaju elemente djeteta. Da biste dodijelili naziv za gornju navigaciju, koristite arija-oznaka atribut. Pogledajte ovaj primjer:

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

Trebate imati na umu da a Ime atribut se razlikuje od pristupačnog imena. Ovaj isječak koda daje bolje razumijevanje:

 atribut imena 
<navuloga = "navigacija"Ime = "globalna navigacija">...nav>
 dostupno ime 
<navuloga = "navigacija"arija-oznaka = "globalna navigacija">...nav>

Vidjeti TGPijev članak o dostupnim imenima da biste ovo dublje razumjeli.

Vrijednost

U HTML-u, atribut vrijednosti može pružiti dodatne informacije o elementu. Vrijednosti pružaju informacije o stanju komponente za prilagođene komponente kao što su harmonike. Na primjer, harmonika se može otvoriti ili zatvoriti.

Svojim elementima možete dodati vrijednost na nekoliko načina. Ovaj isječak prikazuje neke od načina na koje to možete učiniti:

 arija-valuenow 
vrijednost
<ulaznitip="potvrdni okvir"Ime="proizvod[]"vrijednost="1">

Prioritet web pristupačnosti za inkluzivno internetsko iskustvo

Dostupnost weba je izvan pravila; također se radi o osiguravanju da svi imaju jednak pristup vašoj web stranici. Uključivanje semantičkih elemenata, orijentira i atributa poput uloge, imena i vrijednosti u vaš HTML može vašu web stranicu učiniti pristupačnijom osobama s invaliditetom. Ne razmišljajte o web pristupačnosti kao o opciji; smatrajte to nužnošću.