Veebisaidid peaksid olema kõigile kättesaadavad. Siin on, mida peate teadma.

Veebilehe loomine ei ole lihtsalt veebilehe loomine. Esiotsa arendamise oluline aspekt on tagada, et kasutajaliidesed oleksid Internetis kättesaadavad kõigile, sealhulgas nägemis- ja kuulmispuudega inimestele. Peate oma koodi kirjutama neid inimesi silmas pidades. Kuidas anda nägemispuudega inimestele võrdne juurdepääs oma veebisaidile kui nägemispuudeta inimestele? Selle teadasaamiseks lugege seda artiklit.

Miks peaksid arendajad veebi juurdepääsetavuse pärast muretsema?

Veebi juurdepääsetavus keerleb idee ümber, et kõigil peaks olema võrdne juurdepääs veebile, olenemata puudest või puuetest. Ligipääsetava veebisaidi olemasolu muudab suurema vaatajaskonnani jõudmise lihtsamaks (umbes 16% maailmast kannatab ühe või teise puude all).

Digitaalne juurdepääsetavus ei tohiks olla valik arendajatele. See on iga professionaalse kaubamärgi jaoks vajalik. Seda võetakse tõsiselt: nagu teatas Mitmekesisus, kaebas keegi The Pokémon Company 2019. aastal kohtusse juurdepääsematu veebisaidi tõttu.

instagram viewer

Veebi juurdepääsetavus HTML-iga

HTML-is on reeglid, mis tagavad juurdepääsetavate veebisaitide arendamise. Selles jaotises selgitatakse mõnda neist reeglitest.

Kasutage semantilisi elemente

HTML-i semantilised elemendid on elemendid, millel on tähendus. HTML5-s on umbes 100 elementi. Mõned elemendid, nt ja, on mittesemantilised, samas muud HTML-sildid on semantilised. Kuigi nende mittesemantiliste elementide kasutamise lõpetamine võib olla võimatu, on oluline kaasata oma töösse võimalikult palju semantilisi elemente. Siin on populaarsete semantiliste elementide loend:

Mõelge sellele näitele Taasklyst:

Pilk ülaltoodud pildile paljastab järgmised elemendid:

  • Pealkiri
  • Pilt
  • Lõik
  • Kolm nuppu

Lihtne on eeldada, et arendajad kasutasid sildid elementide paigutamiseks ekraanil. Koode lähemalt vaadates näete, et nende asemel kasutati kuut semantilist silti. Lihtsustatud kood näeb välja selline:

<osa>
<imgsrc="/hero.png"alt="kangelane">
<artiklit>
<h1>Leidke õiged tooted ja teenused õigel ajal.h1>
<lk>
 Käsitsi valmistatud jalatsid, juuste uuendamine, sotsiaalmeedia haldur, asjade saatmine, sissetulekuallikasb>— sa nimetad seda, Taaskly sai selle. Leidke kõik tooted või teenused, mida täna vajate, kui registreerute ja kasutate Taasklyt. 
lk>
<ahref="/main/home">Allhanke ülesannea>
<ahref="/main/services"> Leia teenusa>
<ahref="/main/marketplace" >Otsige pooda>
artiklit>
osa>

HTML-lõigu põhjal saate jälgida järgmist.

  1. Pildid, tekst ja nupud asuvad a sees element.
  2. The element jagab võrdselt ja elemendid.
  3. The element hoiab, , ja elemendid.
  4. Nupud on kodeeritud kui elemendid; järelikult on need lingid, mitte nupud. Üldreeglina kasutage alati linke, et suunata kasutaja teisele lehele või vaatele, ja kasutage nuppe, kui soovite, et kasutaja sooritaks toimingu ainult samas vaates. Vaata Nurga nupu leht selle kohta lisateabe saamiseks.

Kasutage selge lehestruktuuri loomiseks maamärke

Maamärgid on semantilised sildid, mis aitavad pimedatel kasutajatel ekraanilugejate abil veebilehel navigeerida. Maamärkide abil on lihtne määratleda veebilehe erinevaid osi. Apple'i veebisait kasutab maamärke.

Ülaltoodud pilt näitab nelja erinevat maamärki. Võite kasutada Juurdepääsetavuse ülevaade laiendus nende maamärkide visualiseerimiseks.

Pildilt saame järeldada a ülaosas, a mis sisaldab a ja a element. Märkimisväärselt näitab pilt "navigeerimine", "piirkond", ja "sisuinfo". Neid nimetatakse rollideks, mida vaatame hiljem.

Kui peate lehe jaoks kasutama mitut maamärki, eristage neid alati sildi järgi. Näiteks kui kasutate mitut elemendid nagu Apple'il, peate need märgistama. Peaksite need märgistama aaria-silt atribuut. Nii et saate kirjutada midagi sellist:

<navaaria-silt = "globaalne">
<navaaria-silt = "kohalik navigeerimine">
<navaaria-silt = "õunakataloog">

Siltide kasutamine võib aidata ekraanilugejatel liikuda mis tahes navigeerimisvaliku juurde.

Kasutage rolli, nime ja väärtuse atribuute

Mõnikord võib olla võimatu kasutada sisseehitatud juurdepääsetavuse funktsioonidega HTML-elemente. Sellised juhtumid võivad olla üks kahest:

  1. Selle jaoks, mida soovite saavutada, pole natiivset HTML-i elementi. Näiteks kui peate kasutama a sest ükski teine ​​element ei näi rolli sobivat.
  2. Te ei saa semantilisi elemente kasutada tehniliste probleemide tõttu. Kui kasutate raamistikku, mis kasutab millal oleks olnud parem kasutada, on teie kohustus määratleda kohandatud juhtelement.

Kohandatud juhtelemendi määratlemiseks vajate oma elemendi jaoks rolli, nime ja väärtust (mõnikord).

Roll

Vaikimisi on a elemendil on navigeerimisroll, samas kui a elemendil on bänneri roll. Kasutage neid elemente ainult ettenähtud otstarbel, et aidata abitehnoloogiatel mõista veebilehe struktuuri. Kui peate teise asemel kasutama ühte, määrake roll järgmiselt:

<päisrolli = "navigeerimine">
<navrolli = "banner">
<divrolli = "navigeerimine">

Nimi

Nimi on kirjeldav tekst või silt, mis on seotud HTML-i elemendiga. Nime lihtsaim vorm on elemendi tekst. Siin on näide:

<divrolli = "nupp">Klõpsake mind!div>

Ülaltoodud lõigus "Klõpsake mind!" on selle nimi element. Seda tuntakse ka juurdepääsetava nimena.

Elementidele, nagu navigeerimine, rippmenüüd jne, on nime määramine keerulisem kui eelmises näites. See on erinev, kuna nendes elementides on alamelemente. Ülaltoodud navigeerimisele nime määramiseks kasutage nuppu aaria-silt atribuut. Vaadake seda näidet:

<navrolli = "navigeerimine"aaria-silt = "globaalne navigatsioon">...nav>

Peaksite märkima, et a nimi atribuut erineb juurdepääsetavast nimest. See koodilõik annab parema ülevaate:

 nime atribuut 
<navrolli = "navigeerimine"nimi = "globaalne navigatsioon">...nav>
 juurdepääsetav nimi 
<navrolli = "navigeerimine"aaria-silt = "globaalne navigatsioon">...nav>

Vaata TGPi artikkel juurdepääsetavate nimede kohta et sellest sügavamalt aru saada.

Väärtus

HTML-is võib väärtuse atribuut anda elemendi kohta lisateavet. Väärtused annavad teavet kohandatud komponentide (nt akordionid) komponendi oleku kohta. Näiteks akordioni saab avada või sulgeda.

Saate oma elementidele väärtust lisada mitmel viisil. See väljavõte näitab mõningaid viise, kuidas saate seda teha.

 aria-valuenow 
väärtus
<sisendtüüp="märkeruut"nimi="toode[]"väärtus="1">

Veebi juurdepääsetavuse eelistamine kaasava veebikogemuse jaoks

Veebi juurdepääsetavus ületab reeglite järgimise; see on ka selle tagamine, et kõigil on teie veebisaidile võrdne juurdepääs. Semantiliste elementide, maamärkide ja atribuutide (nt roll, nimi ja väärtus) lisamine HTML-i võib muuta teie veebisaidi puuetega inimestele juurdepääsetavamaks. Ärge pidage veebi juurdepääsetavust valikuvõimaluseks; pidada seda vajalikuks.