4 biežāk sastopamie tīmekļa pieejamības jautājumi, kas jāzina

Kontrasta attiecības problēma

Visbiežāk sastopamā pieejamības problēma, ko esmu novērojis vairāku gadu laikā, ir. kontrasta un krāsu pieejamības problēma, slikta kontrasta attiecība apgrūtinās jūsu lapas satura redzamību, un tas ļoti kaitēs jūsu lietotājiem, tostarp lietotājiem ar redzes traucējumiem.

Kontrasts ir divu krāsu uztveramās "spilgtuma" jeb spilgtuma atšķirības mērvienība, piemēram, tā ir atšķirība starp jūsu lapas satura fona krāsu un priekšplāna krāsu. Aplūkosim šo navigācijas joslu.

Pieņemsim, ka jūsu klientam patiešām patīk šī zaļgani zaļā krāsa, un viņš to uzskata par lielisku, taču šeit ir problēma ar kontrastu. Mums ir #FFFFFF fons ar #83A94C teksta krāsu, kā rezultātā kontrasta attiecība ir 2,71:1, kas ir daudz zemāka par minimālo 4.5:1 nepieciešams. Lai atklātu šo problēmu, mums ir vairāki risinājumi:

1. Izmantojiet tiešsaistes kontrasta pārbaudi, piemēram. Webaim kontrasta pārbaudītājs, kas aprēķina kontrasta attiecību un sniedz jums Pass vai Fail pakāpe.
2. Izmantojiet kādu no daudzajiem pārlūkprogrammas kontrasta pārbaudes paplašinājumiem, piemēram: WCAG krāsu kontrasta pārbaudītājs.
3. Izmēģiniet pārlūkprogrammā integrēto kontrasta pārbaudi. Lai to izmantotu pārlūkprogrammā Google Chrome, atveriet izstrādes rīkus, pārbaudiet mērķa elementu (piemēram, mūsu navigācijas joslas saiti Home), dodieties uz CSS krāsas īpašību un noklikšķiniet uz krāsas taisnstūra, lai atvērtu krāsu atlasītāju, apakšā tiks parādīta kontrasta attiecības vērtība, izvērsiet to, lai iegūtu sīkāku informāciju. Process ir pilnīgi tāds pats arī Firefox, tikai neliela atšķirība attiecībā uz attiecību ir redzama krāsu atlasītāja apakšējā kreisajā pusē.

Lai iegūtu sīkāku informāciju par kontrastu, pārbaudiet šo Kontrasts un krāsu pieejamība.

Saites teksta problēma

Saites ir liela daļa no tīmekļa vietne mūsdienās, tāpēc ir ļoti svarīgi, lai tie būtu pieejami. Saitei ir jābūt jēgpilnai un jāinformē lietotājs par tās kontekstu, tāpēc neinformatīva saite ar tekstu, piemēram, lasiet vairāk, noklikšķiniet šeit, pārbaudiet informāciju, nav pārāk noderīga, tāpēc tā vietā, lai pievienotu "pārbaudiet informāciju", lai produkts informāciju, piemēram, labāk un informatīvāk ir izmantot produkta nosaukumu, piemēram, "Mandaloriešu ķivere". Tādi vārdi kā klikšķiniet šeit vai vairāk par var izlaist, jo saite pēc noklusējuma ir klikšķināma, un kaut ko tādu kā "vairāk par šodienas ziņām" var saīsināt līdz "šodienas ziņas". Nav īpašu noteikumu vai ierobežojumu attiecībā uz saites garumu. saitei jābūt salasāmai un pietiekami garš, lai sniegtu labu aprakstu par tā mērķi.

Attēli kā saites ir plaši izmantots modelis, tāpēc tam ir jāievēro tie paši noteikumi, par kuriem runājām iepriekš. Attēla atribūts alt pildīs saites teksta lomu un tiks paziņots ekrāna lasītājiem. Ir vairāki scenāriji, kad attēli tiek uzskatīti par saitēm, ja attēls ir vienīgais saites saturs, tad tam jābūt alt atribūtam, ja saitē ir kāds teksts un attēls, tad alt atribūtu varam izlaist, šeit ir daži piemēri:

<a href="/notifications">
  <img src="/img/notification.png" alt="Paziņojumi">
</a>

Pārbaudiet dažas saites šeit, lai izlasītu par saišu pieejamību:Saites teksts un izskats, Funkcionālie attēli.

Veidlapas ievadei trūkst etiķetes

Mēs visi jau esam redzējuši šādas veidlapas ievades bez etiķetes un tikai ar ievietni, kas apraksta ievades mērķi. Pirmā piezīme ir tāda, ka, tiklīdz lietotājs aizpildīs visas ievades un vietzīmes vairs nebūs redzamas, mums nebūs vizuāla konteksta par ievades mērķi, bet ļaujiet. mums pievērsiet uzmanību pieejamībai.

Saistot etiķete pie ievades sniedz mums divas galvenās priekšrocības - ekrāna lasītājs nolasīs etiķeti, kad lietotājs būs fokusējies uz veidlapas ievadi, un, kad uz etiķetes tiek noklikšķināts vai tā tiek pieskartas/pieskarta, pārlūkprogramma nodod fokusu saistītai ievades formai. Šāda veida situāciju var viegli atrisināt, vienkārši pievienojot etiķetes šādi:

    Vārds

    
  

    Uzvārds

    
  

    E-pasts

    
  

    Iesniegt
  

```

Tas ir viss, visiem ievades datiem ir pievienoti attiecīgie marķējumi, padarot tos pieejamus ikvienam. Mēs pat varam noņemt vietzīmes, lai izvairītos no ievades mērķa dublēšanas, bet mēs visi zinām, ka reālās pasaules scenārijos nav tik viegli tikt galā ar to, ka jūs tikko esat saņēmis dizainu, kurā šīs veidlapas ievades ir bez etiķetēm, un klients nevēlas mainīt šo daļu. Pirmais risinājums, kas nāk prātā, ir piemērot displejs: nav; vai redzamība: slēpta; uz mūsu etiķetēm, tas tās paslēps, bet tās joprojām tur būs, vai ne? Šīs īpašības slēpj elementus ne tikai ekrānā, bet arī ekrānlasītāju lietotājiem, tāpēc tas neatrisinās mūsu problēmu.

Mēs varam izmantot klipu modelis lai to atrisinātu. Šādā veidā mēs vizuāli paslēpsim saturu, bet vienlaikus nodrošināsim tā pieejamību ekrāna lasītājiem. Mēs izveidosim šādu CSS tikai sr klasi un piemērojiet to visām mūsu etiķetēm:

 .sr-only:not(:focus):not(:active) {
   clip: rect(0 0 0 0 0);
   clip-path: inset(50%);
   augstums: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   platums: 1px;
 }

Tas paslēps mūsu etiķetes, padarīs tās pieejamas ekrānlasītājiem un pielāgosies mūsu dizainam. Portāls :not(:focus):not(:active) pseidoklase neļauj fokusējamiem elementiem, piemēram. a, poga, ievades no paslēpšanas, kad saņem fokusu.

Nav fokusa indikatora

Kādreiz es to darīju savā globālajā CSS stilu lapā:

* {
outline: none; /* briesmīga kļūda */
}

Apmēram 2020 Es pamanīju melnas robežas parādās uz Google Chrome veidlapas ievades, kad fokusējas vai uz pogām, kad cilnē - tas bija patiešām dīvaini, jo es to nesapratu to laikā, pēc dažiem pētījumiem, es esmu atklājis, ka tas ir tāpēc, ka kontūras CSS īpašumu, tāpēc likvidējot atrisināt šo "problēmu" man.

Tolaik man nebija ne jausmas, kā to pareizi darīt. Pēc tam, kad veicu nelielu izpēti par to, kāpēc un kā ir šis jaunais noklusējuma iestatījums, es uzzināju, ka kontūra ir elementa fokusa indikators, un, ja tā tiek noņemta, ir jānodrošina acīmredzams fokusa stils, būtībā tas, ko es darīju, tiek uzskatīts par sliktu praksi. Jūs varat pielāgot fokusa rādītājus pēc saviem ieskatiem, taču to pilnīga izņemšana no tīmekļa vietnes ir liela piekļuves problēma. Pielāgot elementa fokusa stilu ir diezgan vienkārši, piemēram:

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

Pieejamības rīki

Pārbaudīt visus jautājumus, par kuriem runājām, var būt liels darbs, jo īpaši zinot, ka ir vēl daudz citu ar pieejamību saistītu jautājumu, tāpēc, lai palīdzētu mums risināt pieejamības jautājumus, mums ir 2 lieliski pārlūkprogrammas paplašinājumi.

WAVE novērtēšanas rīks ir novērtēšanas rīku kopums, kas palīdz mums padarīt mūsu tīmekļa saturu pieejamāku. Tas ir pieejams gan Google Chrome, gan Firefox.

Izmēģināsim to nelielā tīmekļa lapā, kurā ir navigācijas josla un ievades ievads, kam trūkst etiķetes, un redzēsim, ko tas atgriež, pēc paplašinājuma instalēšanas mums vienkārši jānoklikšķina uz paplašinājuma ikonas, lai to izmantotu.

Kopsavilkuma cilnē ir redzama 1 kļūda (veidlapas elementam trūkst etiķetes), 2 kontrasta kļūdas un 1 brīdinājums (trūkst virsraksta struktūras), kā redzat, rezultāts ir ļoti skaidrs un detalizēts. Cilnē Details (Sīkāka informācija) tiek attēlots visu kļūdu, brīdinājumu un funkciju saraksts. Mēs varam arī mijiedarboties tieši lapā, noklikšķinot uz šiem sarkanajiem taisnstūriem, lai pārbaudītu kļūdas aprakstu un veidu.

Axe DevTools ir jaudīgs un precīzs pieejamības rīku komplekts. Tas ir pieejams gan Google Chrome, gan Firefox. Pēc paplašinājuma instalēšanas mums būs jāatver pārlūkprogrammas izstrādes rīki, jāatver cilne axe DevTools un jānoklikšķina uz Skenēt visas manas lapas.

Varat redzēt, ka Axe DevTools ir ziņojis par tādām pašām problēmām ar WAVE novērtēšanas rīku, proti, kontrasta problēmām, formas elementa etiķetes trūkumu un virsraksta elementa trūkumu, un pat norādīja dažas labākās prakses metodes, kas jāievēro.

Papildu veids, kā pārbaudīt pieejamību, ir izmantot ekrāna lasītāju un ar to pārbaudīt savu vietni; ir pieejami daudzi ekrāna lasītāji, un minēsim tikai dažus no tiem:

• NVDA
• VoiceOver ir pieejams macOs ierīcēs.
• Orka ir bezmaksas un atvērtā pirmkoda ekrānlasītājs operētājsistēmai Linux.

Kopsavilkums

Šajā rakstā mēs apskatījām dažas biežāk sastopamas tīmekļa pieejamības problēmas, to risināšanas veidus un dažus lieliskus rīkus, ar kuriem pārbaudīt tīmekļa pieejamību. Vēl ir daudz jauna, kas jāapraksta par pieejamību tādiem elementiem kā dialogi, akordeoni un karuseļi, taču, kā redzējāt šajā rakstā, ir daudz dokumentācijas un rīku, kas palīdzēs jums risināt pieejamības jautājumus.

Daži galvenie punkti, kas jāatceras:

• Vienmēr pārbaudiet kontrasta attiecību.
• Vienmēr sniedziet informatīvu saturu saitēm.
• Veidlapas elementam jābūt saistītam ar etiķeti.
• Jānodrošina acīmredzams fokusa stils.