Tinklalapiai turi būti prieinami visiems. Štai ką reikia žinoti.

Tinklalapio kūrimas nėra tik tinklalapio kūrimas. Svarbus priekinės dalies kūrimo aspektas yra užtikrinti, kad vartotojo sąsajos būtų prieinamos visiems internete, įskaitant žmones su regos ir klausos negalia. Turite parašyti savo kodą turėdami omenyje šiuos žmones. Kaip suteikti žmonėms, turintiems regėjimo problemų, vienodą prieigą prie jūsų svetainės kaip ir žmonėms, neturintiems regėjimo problemų? Perskaitykite šį straipsnį, kad sužinotumėte.

Kodėl kūrėjai turėtų susirūpinti žiniatinklio prieinamumu?

Žiniatinklio prieinamumas sukasi aplink idėją, kad visi turėtų turėti vienodą prieigą prie žiniatinklio, nepaisant negalios ar negalios. Turint prieinamą svetainę lengviau pasiekti didesnę auditoriją (apie 16 proc. pasaulio kenčia nuo vienokių ar kitokių negalių).

Skaitmeninis prieinamumas neturėtų būti pasirinkimas kūrėjams. Tai būtina bet kuriam profesionaliam prekės ženklui. Į tai žiūrima rimtai: kaip pranešė Įvairovė2019 m. kažkas padavė į teismą „The Pokémon Company“ dėl neprieinamos svetainės.

instagram viewer

Žiniatinklio prieinamumas naudojant HTML

HTML yra taisyklės, užtikrinančios prieinamų svetainių kūrimą. Šiame skyriuje bus paaiškintos kai kurios iš šių taisyklių.

Naudokite semantinius elementus

Semantiniai elementai HTML yra elementai, kurie turi reikšmes. HTML5 yra apie 100 elementų. Kai kurie elementai, pvz ir, yra ne semantiniai, o kitos HTML žymos yra semantinės. Nors gali būti neįmanoma nustoti naudoti šių ne semantinių elementų, svarbu į savo darbą įtraukti kuo daugiau semantinių elementų. Čia yra populiarių semantinių elementų sąrašas:

Apsvarstykite šį pavyzdį iš Taaskly:

Žvilgsnis į aukščiau esantį paveikslėlį atskleis šiuos elementus:

  • Antraštė
  • Vaizdas
  • Pastraipa
  • Trys mygtukai

Nesunku manyti, kad kūrėjai naudojo žymas elementams tvarkyti ekrane. Atidžiau pažvelgę ​​į kodus pastebėsite, kad vietoj jų buvo naudojamos šešios semantinės žymos. Supaprastintas kodas atrodo taip:

<skyrius>
<imgsrc="/hero.png"alt="herojus">
<straipsnis>
<h1>Raskite tinkamus produktus ir paslaugas tinkamu laiku.h1>
<p>
 Rankų darbo avalynė, plaukų atnaujinimas, socialinių tinklų vadybininkas, siuntų siuntimas, pajamų šaltinisb>— pavadinai, Taaskly suprato. Prisiregistravę ir naudodami „Taaskly“ raskite kiekvieną jums reikalingą produktą ar paslaugą. 
p>
<ahref="/pagrindinis/namai">Užsakyti užduotįa>
<ahref="/pagrindinės/paslaugos"> Raskite paslaugąa>
<ahref="/pagrindinė/prekyvietė" >Raskite parduotuvęa>
straipsnis>
skyrius>

Iš HTML fragmento galite stebėti šiuos dalykus:

  1. Vaizdai, tekstas ir mygtukai yra a viduje elementas.
  2. The elementas vienodai padalija ir elementai.
  3. The elementas turi, , ir elementai.
  4. Mygtukai koduojami kaip elementai; vadinasi, tai nuorodos, o ne mygtukai. Paprastai visada naudokite nuorodas, kad nukreiptumėte vartotoją į kitą puslapį ar rodinį, ir naudokite mygtukus, kai norite, kad vartotojas atliktų veiksmą tik tame pačiame rodinyje. Matyti Kampinio mygtuko puslapis Norėdami gauti daugiau informacijos apie tai.

Naudokite orientyrus, kad sukurtumėte aiškią puslapio struktūrą

Orientyrai yra semantinės žymos, padedančios akliesiems naršyti tinklalapyje naudojant ekrano skaitytuvus. Naudojant orientyrus, lengva apibrėžti skirtingas tinklalapio dalis. Apple svetainė naudoja orientyrus.

Viršuje esančiame paveikslėlyje pavaizduoti keturi skirtingi orientyrai. Galite naudoti Prieinamumo įžvalgos plėtinys, kad būtų galima vizualizuoti šiuos orientyrus.

Nuotraukoje galime daryti išvadą, kad a viršuje, a kuriame yra a, ir a elementas. Pastebėtina, kad vaizdas rodo "navigacija", "regionas", ir „turinio informacija“. Tai žinomi kaip vaidmenys, kuriuos apžvelgsime vėliau.

Kai puslapyje turite naudoti kelis orientyrus, visada atskirkite juos etikete. Pavyzdžiui, jei naudojate kelis elementus, kaip turi Apple, turite juos pažymėti. Turėtumėte juos pažymėti arija-etiketė atributas. Taigi galite parašyti kažką panašaus į bet kurį iš šių:

<navarija-etiketė = "pasaulinis">
<navarija-etiketė = „vietinė navigacija“>
<navarija-etiketė = "Apple" katalogas>

Etikečių naudojimas gali padėti ekrano skaitytuvams pereiti prie bet kokio naršymo.

Naudokite vaidmens, pavadinimo ir vertės atributus

Kartais gali būti neįmanoma naudoti HTML elementų su įtaisytomis pritaikymo neįgaliesiems funkcijomis. Tokie atvejai gali būti vienas iš šių dviejų:

  1. Nėra vietinio HTML elemento tam, ką norite pasiekti. Pavyzdžiui, jei turite naudoti a nes panašu, kad joks kitas elementas netinka vaidmeniui.
  2. Dėl techninių problemų negalite naudoti semantinių elementų. Jei naudojate sistemą, kuri naudoja kada būtų buvę geriau naudoti, jūsų pareiga bus apibrėžti pasirinktinį valdiklį.

Norėdami apibrėžti pasirinktinį valdiklį, jums reikia elemento vaidmens, pavadinimo ir reikšmės (kartais).

Vaidmuo

Pagal numatytuosius nustatymus a elementas atlieka naršymo vaidmenį, o a elementas atlieka reklamjuostės vaidmenį. Šiuos elementus turėtumėte naudoti tik pagal numatytus tikslus, kad pagalbinės technologijos galėtų suprasti tinklalapio struktūrą. Jei turite naudoti vieną vietoj kito, turėtumėte nurodyti vaidmenį taip:

<antraštęvaidmenį = "navigacija">
<navvaidmenį = "baneris">
<divvaidmenį = "navigacija">

vardas

Pavadinimas yra aprašomasis tekstas arba etiketė, susieta su HTML elementu. Lengviausia vardo forma yra elemento tekstas. Štai pavyzdys:

<divvaidmenį = "mygtukas">Paspausk mane!div>

Aukščiau pateiktame fragmente "Paspausk mane!“ yra pavadinimas elementas. Jis taip pat žinomas kaip prieinamas pavadinimas.

Tokiems elementams kaip naršymas, išskleidžiamieji meniu ir kt. pavadinimą priskirti sudėtingiau nei ankstesniame pavyzdyje. Jis skiriasi tuo, kad šiuose elementuose yra vaikų elementų. Norėdami priskirti aukščiau esančiam naršymui pavadinimą, naudokite arija-etiketė atributas. Pažvelkite į šį pavyzdį:

<navvaidmenį = "navigacija"arija-etiketė = „pasaulinė navigacija“>...nav>

Turėtumėte atkreipti dėmesį, kad a vardas atributas skiriasi nuo pasiekiamo pavadinimo. Šis kodo fragmentas leidžia geriau suprasti:

 pavadinimo atributas 
<navvaidmenį = "navigacija"vardas = „pasaulinė navigacija“>...nav>
 prieinamas vardas 
<navvaidmenį = "navigacija"arija-etiketė = „pasaulinė navigacija“>...nav>

Matyti TGPi straipsnis apie prieinamus vardus norėdami tai giliau suprasti.

Vertė

HTML atributas vertė gali suteikti papildomos informacijos apie elementą. Vertės pateikia informaciją apie komponento būseną pasirinktiniuose komponentuose, pvz., akordeonuose. Pavyzdžiui, akordeoną galima atidaryti arba uždaryti.

Galite pridėti vertės savo elementams keliais būdais. Šis fragmentas parodo kai kuriuos būdus, kuriuos galite tai padaryti:

 aria-valuenow 
vertė
<įvestistipo="žymimasis langelis"vardas="produktas[]"vertė="1">

Pirmenybė teikiama žiniatinklio prieinamumui, kad būtų galima mėgautis internetu

Žiniatinklio prieinamumas neapsiriboja taisyklių laikymusi; taip pat svarbu užtikrinti, kad visi turėtų vienodą prieigą prie jūsų svetainės. Į HTML įtraukus semantinius elementus, orientyrus ir atributus, pvz., vaidmenį, pavadinimą ir vertę, jūsų svetainė gali tapti labiau prieinama žmonėms su negalia. Nemanykite, kad žiniatinklio pasiekiamumas yra galimybė; laikyti tai būtinybe.