Vietnēm jābūt pieejamām ikvienam. Lūk, kas jums jāzina.

Tīmekļa lapas izveide nav tikai tīmekļa lapas izveide. Svarīgs priekšgala izstrādes aspekts ir nodrošināt, ka lietotāja saskarnes ir pieejamas ikvienam interneta lietotājam, tostarp cilvēkiem ar redzes un dzirdes traucējumiem. Jums ir jāraksta savs kods, paturot prātā šos cilvēkus. Kā nodrošināt cilvēkiem ar redzes traucējumiem vienlīdzīgu piekļuvi savai vietnei kā personām ar redzes traucējumiem? Izlasiet šo rakstu, lai uzzinātu.

Kāpēc izstrādātājiem būtu jāuztraucas par tīmekļa pieejamību?

Tīmekļa pieejamība ir saistīta ar ideju, ka ikvienam ir jābūt vienlīdzīgai piekļuvei tīmeklim neatkarīgi no invaliditātes vai invaliditātes. Pieejama tīmekļa vietne ļauj vieglāk sasniegt lielāku auditoriju (apmēram 16% pasaules iedzīvotāju cieš no vienas vai otras invaliditātes).

Digitālajai pieejamībai nevajadzētu būt izvēlei izstrādātājiem. Tā ir nepieciešamība jebkuram profesionālam zīmolam. Tas tiek uztverts nopietni: kā ziņoja Daudzveidība2019. gadā kāds iesūdzēja tiesā The Pokémon Company nepieejamas vietnes dēļ.

instagram viewer

Tīmekļa pieejamība ar HTML

HTML valodā ir noteikumi, kas nodrošina pieejamu vietņu izstrādi. Šajā sadaļā ir izskaidroti daži no šiem noteikumiem.

Izmantojiet semantiskos elementus

Semantiskie elementi HTML ir elementi, kuriem ir nozīme. HTML5 ir aptuveni 100 elementi. Daži elementi, piemēram un, nav semantiskas, kamēr citi HTML tagi ir semantiski. Lai gan varētu būt neiespējami beigt lietot šos nesemantiskos elementus, ir svarīgi savā darbā iekļaut pēc iespējas vairāk semantisko elementu. Šeit ir saraksts ar populāriem semantiskiem elementiem:

Apsveriet šo piemēru no Taaskly:

Apskatot iepriekš redzamo attēlu, tiks parādīti šādi elementi:

  • Virsraksts
  • Attēls
  • A rindkopa
  • Trīs pogas

Ir viegli pieņemt, ka izstrādātāji izmantoja tagus, lai sakārtotu elementus ekrānā. Sīkāk aplūkojot kodus, jūs pamanīsit, ka to vietā tika izmantoti seši semantiskie tagi. Vienkāršotais kods izskatās šādi:

<sadaļā>
<imgsrc="/hero.png"alt="varonis">
<rakstu>
<h1>Atrodiet pareizos produktus un pakalpojumus īstajā laikā.h1>
<lpp>
 Ar rokām darināti apavi, matu atjaunošana, sociālo mediju menedžeris, uzdevumu sūtīšana, ienākumu avotsb>— jūs to nosaucat, Taaskly saprata. Reģistrējoties un izmantojot Taaskly, atrodiet katru šodien nepieciešamo produktu vai pakalpojumu. 
lpp>
<ahref="/galvenais/mājas">Uzdevuma ārpakalpojumsa>
<ahref="/main/services"> Atrodiet pakalpojumua>
<ahref="/galvenais/tirgus laukums" >Atrodi veikalua>
rakstu>
sadaļā>

No HTML fragmenta varat novērot tālāk norādīto.

  1. Attēli, teksts un pogas atrodas a iekšpusē elements.
  2. The elements vienādi sadala un elementi.
  3. The elements satur, , un elementi.
  4. Pogas ir kodētas kā elementi; tātad tās ir saites, nevis pogas. Parasti vienmēr izmantojiet saites, lai novirzītu lietotāju uz citu lapu vai skatu, un izmantojiet pogas, ja vēlaties, lai lietotājs veiktu darbību tikai tajā pašā skatā. Skat Angular's Button lapa lai iegūtu vairāk informācijas par šo.

Izmantojiet orientierus, lai nodrošinātu skaidru lapas struktūru

Orientieri ir semantiskie tagi, kas palīdz neredzīgiem lietotājiem pārvietoties tīmekļa lapā, izmantojot ekrāna lasītājus. Izmantojot orientierus, ir viegli definēt dažādas tīmekļa lapas daļas. Apple vietne izmanto orientierus.

Augšējā attēlā redzami četri dažādi orientieri. Jūs varat izmantot Pieejamības ieskati paplašinājumu, lai vizualizētu šos orientierus.

Attēlā mēs varam secināt a augšpusē, a kas satur a un a elements. Manāmi, attēlā redzams "navigācija", "novads", un "satura informācija". Tās ir zināmas kā lomas, kuras mēs apskatīsim vēlāk.

Ikreiz, kad vienai lapai ir jāizmanto vairāki orientieri, vienmēr atšķiriet tos pēc etiķetes. Piemēram, ja izmantojat vairākus tādi elementi kā Apple, jums tie ir jāmarķē. Jums vajadzētu tos marķēt ar ārijas etiķete atribūts. Tātad jūs varat uzrakstīt kaut ko līdzīgu:

<navārijas etiķete = "globāls">
<navārijas etiķete = "lokālā navigācija">
<navārijas etiķete = "ābolu direktorijs">

Iezīmju izmantošana var palīdzēt ekrāna lasītājiem pāriet uz jebkuru navigāciju.

Izmantojiet lomu, nosaukuma un vērtības atribūtus

Dažreiz var būt neiespējami izmantot HTML elementus ar iebūvētiem pieejamības līdzekļiem. Šādi gadījumi var būt viens no šiem diviem:

  1. Tam, ko vēlaties sasniegt, nav vietējā HTML elementa. Piemēram, ja jums ir jāizmanto a jo šķiet, ka neviens cits elements neatbilst lomai.
  2. Tehnisku problēmu dēļ nevarat izmantot semantiskos elementus. Ja izmantojat ietvaru, kas izmanto kad to būtu bijis labāk izmantot, jūsu pienākums būs definēt pielāgotu vadīklu.

Lai definētu pielāgotu vadīklu, elementam ir nepieciešama loma, nosaukums un vērtība (dažreiz).

Loma

Pēc noklusējuma a elementam ir navigācijas loma, savukārt a elementam ir reklāmkaroga loma. Izmantojiet šos elementus tikai paredzētajam mērķim, lai palīdzētu palīgtehnoloģijām izprast tīmekļa lapas struktūru. Ja jums ir jāizmanto viens otra vietā, norādiet lomu šādi:

<galvenelomu = "navigācija">
<navlomu = "baneris">
<divlomu = "navigācija">

Vārds

Nosaukums ir aprakstošs teksts vai etiķete, kas saistīta ar HTML elementu. Vienkāršākā nosaukuma forma ir elementa teksts. Šeit ir piemērs:

<divlomu = "poga">Noklikšķiniet uz manis!div>

Iepriekš minētajā fragmentā "Noklikšķiniet uz manis!"ir nosaukums elements. Tas ir pazīstams arī kā pieejams nosaukums.

Tādiem elementiem kā navigācija, nolaižamās izvēlnes utt. nosaukuma piešķiršana ir sarežģītāka nekā iepriekšējā piemērā. Tas atšķiras, jo šajos elementos ir bērnu elementi. Lai iepriekš norādītajai navigācijai piešķirtu nosaukumu, izmantojiet ārijas etiķete atribūts. Apskatiet šo piemēru:

<navlomu = "navigācija"ārijas etiķete = "globālā navigācija">...nav>

Jums jāņem vērā, ka a nosaukums atribūts atšķiras no pieejamā nosaukuma. Šis koda fragments sniedz labāku izpratni par:

 nosaukuma atribūts 
<navlomu = "navigācija"nosaukums = "globālā navigācija">...nav>
 pieejams nosaukums 
<navlomu = "navigācija"ārijas etiķete = "globālā navigācija">...nav>

Skat TGPi raksts par pieejamiem nosaukumiem lai iegūtu dziļāku izpratni par to.

Vērtība

HTML valodā vērtības atribūts var sniegt papildu informāciju par elementu. Vērtības sniedz informāciju par komponenta stāvokli pielāgotiem komponentiem, piemēram, akordeoniem. Piemēram, akordeonu var atvērt vai aizvērt.

Varat pievienot vērtību saviem elementiem vairākos veidos. Šis fragments parāda dažus veidus, kā to izdarīt:

 aria-valuenow 
vērtību
<ievadeveids="izvēles rūtiņa"nosaukums="produkts[]"vērtību="1">

Prioritāte tīmekļa pieejamībai iekļaujošai tiešsaistes pieredzei

Tīmekļa pieejamība pārsniedz noteikumu ievērošanu; tas nozīmē arī to, ka ikvienam ir vienlīdzīga piekļuve jūsu vietnei. Iekļaujot HTML kodā semantiskos elementus, orientierus un atribūtus, piemēram, lomu, nosaukumu un vērtību, jūsu vietne var kļūt pieejamāka cilvēkiem ar invaliditāti. Nedomājiet par tīmekļa pieejamību kā iespēju; uzskata to par nepieciešamību.