4 dažniausiai pasitaikančios žiniatinklio prieinamumo problemos, kurias reikia žinoti

Kontrasto santykio problema

Dažniausiai pasitaikanti prieinamumo problema, su kuria susidūriau per daugelį metų, yra kontrasto ir spalvų prieinamumo problema, dėl blogo kontrasto santykio bus sunku įžiūrėti puslapio turinį, o tai labai pakenks jūsų naudotojams, įskaitant regos negalią turinčius asmenis.

Kontrastas - tai dviejų spalvų suvokiamo "ryškumo" arba ryškumo skirtumo matas, pavyzdžiui, tai yra skirtumas tarp jūsų puslapio turinio fono spalvos ir pirmojo plano spalvos. Pažvelkime į šią naršymo juostą.

Tarkime, jūsų klientui labai patinka ši žalsva spalva ir jis mano, kad ji nuostabi, tačiau kyla kontrasto problema. Turime #FFFFFF fonas su #83A94C teksto spalva, todėl kontrasto santykis yra 2,71:1, t. y. gerokai mažesnis nei minimalus 4.5:1 reikia. Šiai problemai aptikti turime keletą sprendimų:

1. Naudokite internetinę kontrasto tikrinimo programą, pvz. "Webaim" kontrasto tikrintuvas, kuri apskaičiuos kontrasto santykį ir pateiks Perduoti arba Nepavyksta klasė.
2. Naudokite vieną iš daugelio naršyklės kontrasto tikrinimo plėtinių, pvz: WCAG spalvų kontrasto tikrintuvas.
3. Išbandykite naršyklėse integruotą kontrasto tikrintuvą. Norėdami jį naudoti "Google Chrome", atidarykite "Dev Tools", patikrinkite tikslinį elementą (pvz., mūsų naršyklės nuorodą Home), eikite į CSS spalvos savybę ir spustelėkite spalvos stačiakampį, kad atsidarytų spalvų rinkiklis, apačioje bus pateikta kontrasto santykio reikšmė, išskleiskite ją, kad gautumėte daugiau informacijos. Procesas lygiai toks pat ir "Firefox", tik nedidelis santykio skirtumas rodomas spalvų rinkiklio apačioje kairėje pusėje.

Jei norite gauti daugiau informacijos apie kontrastą, patikrinkite šį Kontrastas ir spalvų prieinamumas Straipsnis.

Nuorodos teksto problema

Nuorodos yra svarbi žiniatinklio svetainė šiais laikais, todėl labai svarbu, kad jie būtų prieinami. Nuoroda turi būti prasminga ir informuoti naudotoją apie jos kontekstą, todėl neinformatyvi nuoroda su tekstu, pavyzdžiui, skaitykite daugiau, spustelėkite čia, patikrinkite informaciją, nėra labai naudinga, todėl užuot pridėję "patikrinkite informaciją" produktas pavyzdžiui, geriau ir informatyviau naudoti gaminio pavadinimą, pavyzdžiui, "Mandalorian šalmas". Žodžiai, pvz. Spauskite čia arba daugiau apie galima praleisti, nes nuoroda pagal nutylėjimą yra paspaudžiama, o pavyzdžiui, "daugiau apie šiandienos naujienas" galima sutrumpinti iki "šiandienos naujienos". Specialių taisyklių ar apribojimų dėl nuorodos ilgio nėra. nuoroda turi būti įskaitoma ir pakankamai ilgas, kad būtų galima gerai apibūdinti jo paskirtį.

Vaizdai kaip nuorodos yra plačiai naudojamas modelis, todėl jis turi atitikti tas pačias taisykles, apie kurias kalbėjome pirmiau. Paveikslėlio atributas alt atliks nuorodos teksto vaidmenį ir bus skelbiamas ekrano skaitytuvų. Yra keli scenarijai, kai vaizdai traktuojami kaip nuorodos, jei vaizdas yra vienintelis nuorodos turinys, jis turi turėti atributą alt, jei nuorodoje yra tam tikras tekstas ir vaizdas, tuomet atributo alt galime nepateikti, štai keletas pavyzdžių:

<a href="/notifications">
  <img src="/img/notification.png" alt="Pranešimai">
</a>

Čia rasite keletą nuorodų apie nuorodų prieinamumą:Nuorodos tekstas ir išvaizda, Funkciniai vaizdai.

Formos įvestis, kurioje trūksta etiketės

Visi jau esame matę tokias formos įvestis be etiketės ir tik su įvesties paskirtį apibūdinančiu pavadinimu. Pirmiausia atkreipkite dėmesį į tai, kad kai tik naudotojas užpildys visas įvestis ir nebeliks vietos žymeklių, nebeturėsime jokio vaizdinio konteksto apie įvesties paskirtį, bet tegul mus daugiausia dėmesio skirkite prieinamumui.

Susiejimas su etiketė prie įvesties suteikia du pagrindinius privalumus: ekrano skaitytuvas perskaitys etiketę, kai naudotojas sutelks dėmesį į formos įvestį, o spustelėjus etiketę arba ją palietus ar palietus, naršyklė perduoda dėmesį susijusiai įvesties įvestiai. Tokią situaciją lengva išspręsti tiesiog pridedant etiketes taip:

    Vardas ir pavardė

    
  

    Pavardė

    
  

    El. paštas

    
  

    Pateikti
  

```

Štai ir viskas, visi įvesties duomenys turi susijusias etiketes, kad būtų prieinami visiems. Galime netgi pašalinti įvesties žymeklius, kad išvengtume įvesties paskirties dubliavimo, tačiau visi žinome, kad realaus pasaulio scenarijus nėra toks paprastas - ką tik gavote projektą, kuriame šios formos įvestys yra be etikečių, o klientas nenori keisti šios dalies. Pirmas sprendimas, kuris ateina į galvą, yra taikyti rodyti: nėra; arba matomumas: paslėptas; prie mūsų etikečių, tai jas paslėps, bet jos vis tiek bus, tiesa? Šios savybės paslepia elementus ne tik ekrane, bet ir ekrano skaitytuvų naudotojams, todėl tai neišspręs mūsų problemos.

Galime naudoti klipo modelis tai išspręsti. Tokiu būdu vizualiai paslėpsime turinį, tačiau jį pateiksime ekrano skaitytojams. Sukursime tokį CSS tik sr klasę ir pritaikykite ją visoms etiketėms:

 .sr-only:not(:focus):not(:active) {
   clip: rect(0 0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   pozicija: absoliuti;
   white-space: nowrap;
   plotis: 1px;
 }

Taip bus paslėptos mūsų etiketės, jos taps prieinamos ekrano skaitytuvams ir atitiks mūsų dizainą. Svetainė :not(:focus):not(:active) pseudoklasė neleidžia fokusuojamiems elementams, pvz. a, Mygtukas, įvestis nuo paslėpimo, kai gaunamas dėmesys.

Nėra fokusavimo indikatoriaus

Kadaise tai dariau savo visuotiniame CSS stilių sąraše:

* {
outline: none; /* siaubinga klaida */
}

Apie 2020 m. pastebėjau, kad "Google Chrome" formos įvesties juodas ribas, rodomas "Google Chrome" įvesties įvesties, kai sutelkta arba mygtukų, kai skirtukas į - tai buvo tikrai keista, nes aš nesupratau, kad tuo metu, po kai kurių tyrimų aš sužinojau, kad tai yra dėl kontūro CSS savybė, todėl pašalinant išspręsti šią "Problema" man.

Tuo metu neturėjau supratimo, kaip teisingai tai daryti. Atlikęs tam tikrą tyrimą apie tai, kodėl ir kaip tai daroma pagal nutylėjimą, sužinojau, kad kontūras yra elemento fokusavimo indikatorius, o jį pašalinus turi būti pateiktas akivaizdus fokusavimo stilius, iš esmės tai, ką dariau, laikoma bloga praktika. Fokusavimo rodiklius galite pritaikyti savo nuožiūra, tačiau jų visiškas pašalinimas iš svetainės yra didelė prieinamumo problema. Pavyzdžiui, pritaikyti elemento fokusavimo stilių yra gana paprasta:

 a:focus {
   outline: 4px solid #ee7834;
   outline-offset: 4px;
 }

Prieinamumo įrankiai

Patikrinti visus klausimus, apie kuriuos kalbėjome, gali būti daug darbo, ypač žinant, kad yra dar daug dalykų, kuriuos reikia aptarti, todėl, norėdami padėti spręsti prieinamumo klausimus, turime 2 puikius naršyklės plėtinius.

WAVE vertinimo priemonė yra vertinimo įrankių rinkinys, padedantis mums padaryti žiniatinklio turinį prieinamesnį. Jį galima naudoti "Google Chrome" ir "Firefox" naršyklėse.

Išbandykime jį nedideliame tinklalapyje, kuriame yra navbaras ir įvestis be etiketės, ir pažiūrėkime, ką jis grąžina, Įdiegus plėtinį, mums tereikia spustelėti plėtinio piktogramą, kad jį naudotume.

Suvestinės skirtuke rodoma 1 klaida (formos elementui trūksta etiketės), 2 kontrasto klaidos ir 1 įspėjimas (trūksta antraštės struktūros); kaip matote, rezultatas yra labai aiškus ir išsamus. Skirtuke Details (Išsami informacija) pateikiamas visų klaidų, įspėjimų ir funkcijų sąrašas. Taip pat galime tiesiogiai sąveikauti puslapyje spustelėdami tuos raudonus stačiakampius ir patikrinti klaidos aprašymą bei tipą.

"Axe DevTools yra galingas ir tikslus prieinamumo įrankių rinkinys. Jį galima naudoti ir "Google Chrome", ir "Firefox" naršyklėse. Įdiegę plėtinį, turėsime atidaryti naršyklės plėtros įrankius, pereiti į skirtuką axe DevTools ir spustelėti Scan all of my pages (nuskaityti visus mano puslapius).

Galite matyti, kad "Axe DevTools" pranešė apie tas pačias problemas, susijusias su "WAVE" vertinimo priemone, t. y. kontrasto problemas, formos elemento etiketės nebuvimą ir antraštės elemento nebuvimą, ir netgi pateikė keletą geriausios praktikos pavyzdžių, kurių reikėtų laikytis.

Papildomas būdas patikrinti prieinamumą - naudoti ekrano skaitytuvą ir su juo išbandyti svetainę; yra daugybė ekrano skaitytuvų ir tik keletas iš jų:

• NVDA
• VoiceOver galima naudoti "macOs" įrenginiuose.
• Orkos yra nemokama atvirojo kodo ekrano skaitymo programa, skirta "Linux".

Santrauka

Šiame straipsnyje apžvelgėme keletą dažniausiai pasitaikančių žiniatinklio prieinamumo problemų, jų sprendimo būdų ir puikių įrankių žiniatinklio prieinamumui tikrinti. Dar daug ką reikia pasakyti apie tokių elementų kaip dialogų, akordeonų ir karuselių prieinamumą, tačiau, kaip matėte šiame straipsnyje, yra daug dokumentų ir įrankių, padedančių spręsti prieinamumo problemas.

Keletas svarbiausių dalykų, kuriuos reikia prisiminti:

• Visada patikrinkite kontrasto santykį.
• Visada pateikite informatyvų nuorodų turinį.
• Su formos elementu turi būti susieta etiketė.
• Turi būti pateiktas akivaizdus dėmesio stilius.