Tīmekļa pieejamības kontrolsaraksts

Pieejamība ir prakse, nodrošinot vietņu vienlīdz pieejamību cilvēkiem ar invaliditāti, lai viņiem būtu vienlīdzīga pieeja precēm un pakalpojumiem, ko šīs vietnes nodrošina. Tā ir neatņemama profesionāla tīmekļa dizaina un attīstības sastāvdaļa.


Contents

Kāpēc jums vajadzētu rūpēties? Pieejamība?

Ir daudz iemeslu, kāpēc izstrādātājiem, dizaineriem un viņu darba devējiem / klientiem būtu jānodrošina, ka pieejamība ir agrīna un neatņemama tīmekļa attīstības procesa sastāvdaļa..

  • Daudzās teritorijās, piemēram, ASV, ES, Lielbritānijā, Izraēlā un Japānā, ir juridiska prasība nediskriminēt cilvēkus viņu invaliditātes dēļ. ASV pagājušajā gadā, Tika iesniegtas 2235 jaunas ADA vietnes tiesas prāvas federālajā tiesā. Tas ir viens stundā.
  • Pieejamās vietnes mēdz būt labāk kodētas, noturīgākas un meklētājprogrammās tās labi ieņem.
  • Pieejamas vietas mēdz būt vairāk izmantojams apmeklētājiem, kas nav invalīdi, kas rada lielāku gandarījumu un pievēršanos.
  • Nepieejamas vietnes nelabvēlīgi ietekmē uzņēmējdarbību. 2019. gadā, a Lielbritānijas aptauja atklāja, ka vairāk nekā 4 miljoni cilvēku ir pametuši mazumtirdzniecības vietni atklāto piekļuves barjeru dēļ. Šis zaudētais bizness, “Click-Away Pound”, bija 17,1 miljards sterliņu mārciņu. Tas ir miljardu. Tikai Lielbritānijā.
  • Tas ir slikti, ja brīvprātīgi izvēlaties potenciālos klientus.

Kopējie standarti un problēmas

Par laimi W3C (struktūrai, kas izstrādā daudzus standartus, uz kuriem balstās tīmeklis) ir standarts, kā padarīt vietnes pieejamas. To sauc Tīmekļa satura pieejamības vadlīnijas (WCAG). Ir trīs atbilstības līmeņi (A, AA, AAA), un “A” ir zemākais pieejamības līmenis. Es iesaku jums mērķēt uz AA līmeni.

Diemžēl WCAG ir garš, sauss un ļoti tehnisks lasījums, tāpēc apskatīsim, ko varat izdarīt salīdzinoši viegli, un iegūstiet vislielāko sprādzienu par savu naudu. Tas nav viss kontrolsaraksts, kas jums jāzina; tas ir visbiežāk sastopamo kļūdu kontrolsaraksts, un kļūdas, kuras cilvēki ar invaliditāti apgalvo, ir galvenie bloķētāji, ar praktiskiem ieteikumiem problēmu risināšanai. Visas ārējās saites tiek atvērtas jaunā cilnē.

Aptaujā “Click-Away Pound” respondentiem ar invaliditāti tika uzdots jautājums, kādi bija viņu galvenie bloķējošie pirkumi. Šeit ir galvenie šķēršļi (tika atļautas vairākas atbildes):

  1. Pārpildītas lapas ar pārāk lielu saturu – 66%
  2. reCAPTCHA testi – 59%
  3. Slikta salasāmība (kontrasts, teksta izkārtojums) 56%
  4. Kustīgo attēlu un grafikas uzmanības novēršana – 53%
  5. Slikta saites informācija – 59% (77% ekrāna lasītāju lietotājiem)
  6. Veidlapu aizpildīšana 56%

Kā uzlabot vietņu pieejamību

Pirmkārt, ņemiet vērā, ka neviena no piecām labākajām nav tehniskas problēmas – tās ir kļūdas dizainā vai tekstu rakstīšanā.

1) Pārāk daudz satura

Īsumā: sadaliet tekstu sadaļās ar virsrakstiem un aizzīmju sarakstiem. Izmantojiet vienkāršu valodu.

Ir labi zināms, ka, palielinoties izvēles skaitam, palielinās arī pūles, kas vajadzīgas, lai savāktu informāciju un pieņemt labus lēmumus. Tas pats ar pārāk lielu saturu – tas drīz kļūst milzīgs. Satura samazināšana līdz pamatprasībām ir laikietilpīgs darbs; kā Marks Tvens (domājams) rakstīja: “Man nebija laika rakstīt īsu vēstuli, tāpēc es uzrakstīju garu.”

Nesenā grāmata Rakstīšana ir projektēšana iesaka

Cilvēki vēlas, lai varētu nolaist garus teksta blokus, neatkarīgi no redzamības vai audio, tāpēc ir ļoti svarīgi strukturēt garos teksta rakstus, izmantojot galvenes, īsās rindkopas un citu satura dizaina paraugpraksi..

Tātad:

  • Ir tikai viens

    lapā.

  • Izmantojiet apakšvirsrakstus liberāli; tas sagrauj redzamiem lietotājiem teksta “plāksni”, savukārt palīgtehnoloģiju, piemēram, ekrāna lasītāju, lietotāji var izmantot īsinājumtaustiņu, lai pārietu starp virsrakstiem vai iegūtu garīgu satura karti no virsraksta struktūras.
  • Neizlaidiet virsrakstu līmeni. Piemēram, ja izmantojat

    , pārliecinieties, ka pirms tā ir

    .

  • Izmantojiet sarakstus ar aizzīmēm (piemēram, šo!), Kas HTML formātā ir pareizi atzīmēti kā
      ,
    • . Ekrāna lasītāji paziņos “10 priekšmetu saraksts” (un ļaus lietotājam pār tiem pāriet).

    Izmantojiet vienkāršo angļu valodu

    Monzo Bank’s Ceļvedis “Mūsu balss tonis” izskaidro vienkāršās valodas nozīmi:

    2010. gadā ASV advokāts Šons Flammers veica eksperimentu. Viņš lūdza 800 apgabaltiesas tiesnešus atbalstīt vai nu tradicionālo “legāles” argumentu, vai arī to, ko viņš sauca par “vienkāršo angļu valodu”.

    Tiesneši pārsvarā deva priekšroku vienkāršajai angļu valodas versijai (66% līdz 34%), un šī priekšrocība nebija atkarīga no viņu vecuma vai izcelsmes.

    Liesmas piezīmes (PDF) angļu valodas versijas teksts:

    Tas ir gandrīz par lapu īsāks, tāpēc tas acīmredzami novērš nevajadzīgus teikumus un vārdus. Tā teikumi ir vidēji 17,8 vārdi pretstatā 25,2 vārdiem.

    Viņš secina:

    Mums tagad ir 25 gadu empīriski pētījumi, kas ved uz neizbēgamu secinājumu: ja vēlaties iepriecināt un pārliecināt lasītāju, rakstiet vienkāršā angļu valodā.

    2) ReCAPTCHA

    Īsumā: nelieciet lietotājus lēkt cauri potenciāli neiespējamiem stīpām, lai ietaupītu izstrādātāja laiku.

    Respondenti bieži runāja par vecu cilvēku ReCAPTCHA versija:

    reCAPTCHA versijas ar nepieklājīgu tekstu, kas jums jāpārraksta

    Es cīnos ar attēliem, un man ir jāievada cipari vai burti. Tāda veida, kā man jānoklikšķina, pie kuriem attēliem ir veikals vai kas cits, es vienmēr tos palaižu garām vai apjuku, un patērēju enerģiju, kas man nav…

    ReCAPTCHA nestabilo burtu stils tagad ir novecojis. Daudz biežāk ir redzams jaunāks iemiesojums ar nosaukumu “No CAPTCHA reCAPTCHA” (pazīstams arī kā “Es neesmu robots ”rūtiņu), kas lietotājam pieprasa atzīmēt rūtiņu, kas apstiprina, ka viņi nav roboti, un lietotāja vērtējumam izmanto slepenu voodoo. Ja tie iziet, turpmāka mijiedarbība nav nepieciešama. Tomēr, ja tie neizdodas, tiks parādīts jauns izaicinājums:

    Daļējs captcha ekrānuzņēmums, kas lietotājam prasa noklikšķināt uz visiem kvadrātiem, kur redzami apelsīni

    Ņemiet vērā, ka CAPTCHA tips, kas lietotājam liek noklikšķināt uz visiem laukumiem ar (teiksim) ielas zīmi, ne vienmēr ir starptautisks. Kā raksta Terence Edens, CAPTCHA nepierāda, ka esat cilvēks – viņi pierāda, ka esat amerikānis.

    Vispieejamākā reCAPTCHA forma ir reCAPTCHA v3 kas neprasa lietotāja mijiedarbību, bet jums ir jāpieliek vairāk darba, lai tiktu galā ar apmeklējumiem, kuri neiztur testu:

    Tas ir tikai JavaScript API, kas atgriež rezultātu, dodot jums iespēju rīkoties jūsu vietnes kontekstā: piemēram, pieprasot papildu autentifikācijas faktorus, nosūtot ziņu uz moderēšanu vai samazinot robotus, kas varētu nokasīt saturu.

    3) Slikta salasāmība

    Īsumā: pārliecinieties, vai tekstam ir pietiekams kontrasts, tas ir lasāms un neattaisnojams.

    • Nodrošiniet atbilstošu kontrastu. Viens no izplatītākajiem piekļuves bloķētājiem tīklā ir slikts teksta un fona kontrasts. W3C vadlīnijas pieprasa vismaz 4,5: 1 kontrasta attiecību, izņemot liela izmēra tekstu un liela izmēra teksta attēlus, kuru kontrasta attiecībai jābūt vismaz 3: 1 (logotipi un “nejaušs” teksts ir atbrīvoti). Ir daudz pakalpojumu, kas var izmērīt kontrasta koeficientus jums; mans personīgais favorīts ir Ada Rose Cannon izcilais kontrasta logrīks, kas ir noderīgs pārlūka grāmatzīme, kas izceļ jūsu lapas nepietiekama kontrasta apgabalus.
    • Nav visu virsrakstu. Ir pierādījumi, ka tos ir grūtāk lasīt, jo lielie burti ir vienāda augstuma, tāpēc mēs nevaram atpazīt parasto vārdu formu. Turklāt daži ekrāna lasītāji precīzi izklāsta lielo burtu grupas, it kā tie būtu saīsinājumi (piemēram, BBC, DOJ utt.). Ja jums ir jābūt visiem lielo burtu virsrakstiem, parastā gadījumā ierakstiet tos HTML un pārveidojiet tos ar CSS teksta pārveidošana: lielie burti.
    • Kreisais izlīdzināšanas teksts. (Lappusēm no labās puses uz kreiso valodu, piemēram, arābu vai ebreju valodā, izlīdziniet tekstu ar labo pusi.) Neattaisnojiet to, jo tas cilvēkiem ar disleksiju apgrūtina lasīšanu. Lielbritānijas disleksijas asociācijas stila rokasgrāmata arī ierosina

      Izmantojiet sans serif fontus, piemēram, Arial un Comic Sans, jo burti var šķist mazāk pārpildīti. Alternatīvas ir Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) Attēlu un grafikas novēršana

    Īsumā: ļauj lietotājiem apturēt jebkādu kustību; cieniet viņu operētājsistēmas iestatījumus; nespēlējiet video automātiski.

    Viens respondents uz “Click-Away Pound” aptauju rakstīja,

    Vietnes, kuras es agrāk izmantoju ar nelielu izlaidumu, tagad kļūst par problēmu, jo tās, veicot pirkumus, turpina pārvietot sludinājumus un pastāvīgi ielādē vairāk sludinājumu.

    WCAG pamatlīmenim ir nepieciešama “jebkurai kustīgai, mirgojošai vai ritinošai informācijai, kas (1) sākas automātiski, (2) ilgst vairāk nekā piecas sekundes un (3) tiek parādīta paralēli citam saturam, lietotājam to pārtraukt, apturēt vai paslēpt, ja vien kustība, mirgošana vai ritināšana nav darbības sastāvdaļa, kur tā ir būtiska ”.

    Traucēšana ir kairinoša – īpaši cilvēkiem ar ADHD vai citiem izziņas traucējumiem. Bet kustība un mirgošana var izraisīt arī krampjus, tāpēc WCAG vadlīnijās noteikts, ka saturam nevajadzētu mirgot vairāk kā 3 reizes 1 sekundes laikā..

    Cieniet lietotāja izvēli par animācijām

    Visas galvenās operētājsistēmas ļauj lietotājam paust izvēli par samazinātu kustību ekrānā – iespējams, tāpēc, ka viņiem ir kustību izraisīti vestibulārā aparāta spektra traucējumi. Jūsu vietne var noteikt, vai lietotājs to ir izdarījis ar CSS dod priekšroku samazinātām kustībām mediju vaicājums.

    Šeit mēs atļaujam pogu animēt tikai tad, ja lietotājs nav devis priekšroku:

    @media (dod priekšroku samazinātām kustībām: nedod priekšroku) {
    poga {
    / * "vibrējoši" taustiņu ietvari ir definēti citur * /
    animācija: vibrēt 0,3s lineāri bezgalīgi abi;
    }
    }

    Ja vēlaties modernizēt vietni, kurā ir daudz animācijas noteikumu, iespējams, šādi apturēt visas iepriekš deklarētās CSS animācijas:

    @media (dod priekšroku kustībai ar samazinātu kustību: samazina) {
    *,
    * :: pirms tam,
    * :: pēc {
    animācijas ilgums: 0,001 s! svarīgi;
    pārejas ilgums: 0,001 s! svarīgi;
    }
    }

    Varētu padomāt par lietotāju operētājsistēmas preferenču ievērošanu vietnes izstrāde tumšajam režīmam.

    5) Informācija par sliktu saiti

    Īsumā: padariet saites identificējamas ar unikālu saišu tekstu. Brīdiniet lietotājus, ja ar saiti tiks atvērta jauna cilne vai fails.

    Viens no galvenajiem slikto saišu cēloņiem bieži ir slikta tekstu rakstīšana. Lielākā daļa ekrāna lasītāju ļauj lietotājam ātri redzēt saišu sarakstu lapā (visbiežāk izmantotajā komerciālajā ekrāna lasītājā JAWS īsinājumtaustiņš ir Ins + F7; bezmaksas NVDA ekrāna lasītājs, ar to pašu īsinājumtaustiņu tiek parādīts elementu saraksts, kurā uzskaitītas lapu saites, virsraksti un orientieri).

    Tomēr, ja katrā saitē ir teksts, kurā teikts “Noklikšķiniet šeit” vai “Lasīt vairāk”, un nekas cits neatšķir tos, tas ir bezjēdzīgi. Vienkāršākais veids, kā to atrisināt, ir vienkārši uzrakstīt unikālu saites tekstu, bet, ja tas nav iespējams, jūs varat pārspīlēt saites tekstu palīgtehnoloģijai, izmantojot unikālu aria-label atribūtu katrā saitē..

    Šis ir labs piemērs no Joomla vietne:

    Joomla vietne, kurā parādīti divi dažādi stāsti, katrs ar identiskiem

    Redzamās saites teksts ir vienkārši “lasīt vairāk”, bet Joomla izmanto ārijas etiķete atribūti, kas katru padara unikālu palīgtehnoloģijai:

    Lasīt vairāk
    
    Lasīt vairāk

    Sakarā ar ārijas etiķete teksts saites vietā tiks izmantots palīgtehnoloģijās, W3C iesaka aria-etiķetē izmantoto tekstu sākt ar saitē izmantoto tekstu, jo “tas ļaus konsekventi komunicēt starp lietotājiem”.

    Piezīme: Daži slikti ieteikumi, kurus es joprojām redzu vecajās vietnēs, ir pievienot paskaidrojošu tekstu saitēm, izmantojot nosaukums atribūts:

    Lasīt vairāk>

    Nedariet to. nosaukums netiek pakļauts lielākajai daļai ekrāna lasītāju (izstrādātāji to parasti izmantoja atslēgvārdiem “SEO” vajadzībām, tāpēc ekrāna lasītāju pārdevēji to pēc noklusējuma atspējoja), un pārlūkprogrammas nosaukuma atribūtus uzrāda kā “padomus”, kas ir pieejami tikai peles lietotājiem, novietojot peles kursoru.

    Saitēm vajadzētu izskatīties kā saitēm

    Pēc noklusējuma pārlūkprogrammas pasvītro saites. Vislabāk to nemainīt, bet, ja jūs par to nokavējat autostāvvietas cīņu, saites tekstam ir jābūt 3: 1 kontrasta attiecībai no apkārtējā teksta, kas nav saistīts ar saiti, un tam vajadzētu dot kādu “krāsainu apzīmējumu”. ”Ka tie ir saite, kad paceļ vai fokusējas, piemēram:

    a: virziet kursoru, a: fokuss {teksta rotājums: pasvītrojums;}

    Fokusa stila dēļ saite tiek pasvītrota, ja lietotājs, kurš nav peles lietotājs, to fokusē, izmantojot tastatūru, irbuli vai balss ievadi. Parasti ikreiz, kad kādam lappusei ir kursorsviru stils, tam arī jādod fokusa stils.

    Apzīmējums “bez krāsas” (mūsu gadījumā pasvītrojums) nodrošina, ka apmeklētāji ar vāju redzi vai krāsu aklumu redzēs izmaiņas, virzoties uz kursoru vai koncentrējoties. (Ekrāna lasītāji automātiski paziņo “Link” pirms saites teksta.)

    Pastāstiet cilvēkiem, ja saite atver jaunu cilni / lapu

    Apmeklētājam tas var mulsināt, ja, aktivizējot saiti, tiek atvērta jauna cilne vai jauns logs, īpaši, ja to dara tikai dažas lapas saites (piemēram, jaunu cilni atver tikai ārējās saites). Ja jums tas jādara, jums vajadzētu brīdināt lietotāju vai nu saites tekstā, vai izmantojot iepriekš aprakstīto aria-etiķetes metodi.

    Pastāstiet cilvēkiem, ja saite ir failā

    Ja saite ir uz failu (piemēram, PDF vai video), pasakiet lietotājam saites tekstā. Neslēpiet to iekšā ārijas etiķete, jo tas var būt noderīgs daudziem redzamiem lietotājiem (daži mobilie tālruņi nevar atvērt, piemēram, .docx failu). Ja tas ir liels fails, apsveriet iespēju brīdināt lietotāju par aptuveno lielumu; iespējams, viņi nevēlas lejupielādēt lielu video failu, izmantojot 3G.

    Varat arī izmantot lejupielādēt atribūts, kura dēļ pārlūks atver operētājsistēmas sākotnējā faila lejupielādes dialogu. Apkopojot šo kodu, tas izskatās šādi:

    Gada pārskats (PDF, 240 MB)

    6) Vēl viena dizaina kļūda: fokusa gredzena noņemšana

    Īsumā: pārliecinieties, vai tastatūras lietotājs vienmēr var redzēt, kur viņi pašlaik atrodas.

    Mēs esam pieminējuši : fokuss stili iepriekš. Tie ir nenovērtējams vizuālais indikators tiem cilvēkiem, kuri jebkādu iemeslu dēļ nevar izmantot peli: iespējams, viņiem ir RSI, Parkinsona vai multiplā skleroze. Pēc noklusējuma pārlūkprogrammās tiek parādīts fokusēšanas gredzens uz pašlaik fokusēto elementu. Šeit ir manas personīgās vietnes saite Sākums, kas koncentrēta pārlūkā Chromium:

    Ekrānuzņēmums ar Chromium noklusējuma fokusa gredzenu ap saiti (kas ir arī attēls)

    Tomēr daži cilvēki to uzskata par estētiski nepatīkamu, kad viņi izmanto peli, un izslēdz to ar CSS, tādējādi atstājot vietni tastatūras lietotājiem nepieejamu.

    Ievadiet jaunu standartu, ko izveidoja Firefox un kuru sauc par : fokuss-redzams. Fokusēšanas gredzens elementam tiks piemērots, ja to ir sasniedzis tastatūra vai ierīce, kas nav peles rādītāja, bet peles lietotājiem neko nerāda. Tā kā tas tiek atbalstīts tikai pārlūkprogrammā Firefox (rakstīšanas laikā), Ierosina Patriks Lauke šo CSS, lai labi darbotos ar visiem pārlūkiem:

    poga: fokuss {/ * daži aizraujoši pogas fokusa stili * /}
    poga: fokuss: nav (: fokuss ir redzams) {
    / * atsaukt visus iepriekš fokusētos pogu stilus
    ja pogai ir fokuss, bet pārlūks parasti to nedara
    parādīt noklusējuma fokusa stilus * /
    }
    poga: fokuss redzams {/ * daži pat * vēl * aizraujoši pogas fokusa stili * /}

    7) Veidlapu aizpildīšana

    Īsumā: veidlapu lauki, kas izskatās pēc formas laukiem, katrs ir saistīts ar etiķeti. Neizslēdziet automātisko aizpildīšanu.

    Ņemot vērā formu būtisko nozīmi e-komercijas vietnēs, tas mani pārsteidz, cik nepieejamas formas es redzu. Bieži vien tas notiek tāpēc, ka vecie pārlūkprogrammas neļāva daudz ietekmēt formas elementu veidošanu, tāpēc izstrādātāji tos viltoja ar citiem HTML elementiem. Mūsdienu pārlūkprogrammas to atļauj pievilcīgas izvēles rūtiņas, radio pogas, pielāgotus komponentus un kombinētās kastes, pieejamas automātiskās pabeigšanas vadības ierīces un vēl.

    Automātiskā aizpildīšana ir jūsu draugs

    Atļaujot pārlūkprogrammām automātiski aizpildīt veidlapas, apmeklētājiem ir jādara mazāk, tāpēc viņi, visticamāk, aizpilda veidlapu un reģistrējas / pērk jūsu produktu. Automātiskā aizpildīšana pārlūkprogrammās: dziļa niršana ir lielisks eBay raksts par to (un viņiem tas būtu jāzina).

    Arī automātiskā aizpildīšana ir vienīgais pašreiz pietiekamais paņēmiens, lai sasniegtu AA atbilstību 1.3.5. Veiksmes kritērijs: identificējiet ievades mērķi.

    Padariet veidlapas laukus līdzīgus veidlapu laukiem

    Pēc noklusējuma pārlūkprogrammas formas ievades laukus attēlo kā lodziņus. Jebkurā gadījumā noformējiet tos ar piemalēm, polsterējumu un apmalēm, bet turiet tos kā kastes. Daudzi dizaineri ievēroja Google materiāla dizaina modeli pirms 2017. gada, kad lietotājam teksta ievadīšanai tika izmantota viena rinda:

    Veca materiāla dizaina ievade ar horizontālu līniju, nevis taisnstūrveida kasti

    Tomēr Google atklāja, ka rinda zem vecajiem teksta laukiem dažiem lietotājiem nebija skaidra, bieži sajaukta ar dalītāju un mainīja dizainu. Iekšā lietojamības pārbaude kopā ar 600 dalībniekiem viņi to atklāja

    slēgti teksta lauki ar taisnstūra (lodziņa) formu tiek izpildīti labāk nekā lauki ar līnijas pielaidi … Mūsdienās šie jaunie teksta lauki parādās Google produktos, sākot no konta pierakstīšanās lapām līdz Google formām.

    Ja apsverat iespēju izmantot Google pilnu Materiālu dizaina lietotāja saskarnes bibliotēku, izlasiet Pārtrauciet materiāla dizaina teksta lauku izmantošanu! Autors: Matsuko Friedland, lai redzētu, vai tas atbilst jūsu vajadzībām.

    Marķējiet visus veidlapas laukus

    Visi veidlapas lauki (teksta ievades, izvēles rūtiņas, radio pogas, slīdņi utt.) Ir jāmarķē. Labākais veids, kā to izdarīt, ir izmantot HTML ; kā saka WCAG, “standarta HTML vadīklas jau atbilst šim veiksmes kritērijam, ja tiek izmantotas atbilstoši specifikācijai”.

    Šeit ir demonstrācija, kuru es izveidoju no nemarķēts formas lauks salīdzinājumā ar marķētu formas lauku. Viņi izskatās identiski, bet augšējam nav atbilstošas ​​etiķetes, bet otrajam tas ir. Noklikšķiniet uz apakšējās teksta etiķetes un redzēsit, ka tā koncentrējas uz saistīto ievadi.

    viltus un reālu etiķešu salīdzinājums

    Tas padara ieejas fokusēšanu daudz vieglāku kādam, kam ir motora vadības grūtības, vai varbūt jums, mēģinot pārbaudīt sīku rūtiņu uz maza ekrāna uz nemierīgā vilciena. Tas ir ļoti svarīgi arī ekrāna lasītāja lietotājiem, kuri veidlapas veidos cauri laukiem (pēc noklusējuma cilnes cilnē var fokusēt tikai saites un veidlapas laukus); kad tie tiks ievietoti ievades laukā, ekrāna lasītājs paziņos saistītās etiķetes saturu.

    Kods tam ir vienkāršs. Ievades laukam tiek piešķirts unikāls ID, un etiķete ar to tiek saistīta, izmantojot priekš atribūts:

    
    

    Slēpšanas etiķetes

    Reizēm jūs, iespējams, nevēlaties redzamu etiķeti. Vai arī dizainera to nedara, un jūs nevēlaties, lai vēl viena cīņa notiktu autostāvvietā. Jebkurā gadījumā, šeit ir piemērs, kad etiķete, kurā teikts “Meklēt” pirms ievades, šķiet pārāk liela.

    Ievades lauks ar pogu ar uzrakstu “meklēt” pēc tam

    Ievades lauku mēs varam saistīt ar tekstu “Meklēt”, kas ir pogas Iesniegt saturs, izmantojot ārija marķēts:

    
    

    Mēs būtu varējuši izmantot ārijas etiķete (ar kuru mēs tikāmies iepriekš, runājot par saitēm):


    Bet vienmēr labāk ir dot priekšroku redzamam tekstam lapā, jo tas tiks tulkots, ja lapa darbosies ar tulkošanas rīku, turpretī HTML atribūtos “paslēpts” teksts netiks izmantots. (Cepura padoms Adrianam Roselli par šo padomu no viņa lieliskā raksta Mana prioritāte kontroles marķēšanas metodēs.)

    Visizplatītākās kļūdas miljonos populārāko mājas lapu

    Mēs esam apskatījuši galvenos šķēršļus e-komercijas vietnēm, kā ziņo lietotāji, kuriem ir kādi traucējumi. Tagad apskatīsim daudz plašāku vietņu kopumu – 1 000 000 populārāko vietņu mājas lapas, automātiski analizē WebAIM 2019. gada augustā. 98% analizēto lapu bija vismaz viena kļūda. Visizplatītākās ir kļūdas

    1. Zema kontrasta teksts (86,1%)
    2. Trūkst alternatīva teksta teksta (67,9%)
    3. Tukšas saites (58,9%)
    4. Trūkst veidlapas ievades etiķešu (53,2%)
    5. Trūkst dokumentu valodas (30,5%)

    Iepriekš mēs esam izskatījuši zemu kontrastu, saites un formas ievadus. Tagad apskatīsim, kā mēs varam izvairīties no citām ļoti izplatītām kļūdām.

    8) Nodrošiniet teksta alternatīvas visiem attēliem, video un audio

    Īsumā: jebkurai informācijai, ko paziņo, izmantojot attēlu vai video, jābūt ar tekstuālu ekvivalentu.

    Katrs jābūt alternatīvam tekstam (“alt text”), ko var nosūtīt apmeklētājiem ar redzes traucējumiem vai tiem, kuriem ir mazs joslas platums / dārgi datu plāni un kuri ir pārlūkos atslēguši attēlus. Tas ietver teksta attēlus.

    Šie ir pamatnoteikumi:

    • Ja attēls ir tikai dekoratīvs, tam jābūt ar tukšu alt tekstu: alt = "". (Bet tīri dekoratīviem attēliem, iespējams, vajadzētu būt CSS.)
    • Ja attēls ir aprakstīts pamattekstā, tam jābūt tukšam alt tekstam (alt = ""), lai izvairītos no atkārtošanās. Bet esiet piesardzīgs, ja tas ir iekšā
      – redz Kā jūs skaitlis? vairāk.
    • Ja attēls ir vienīgais saites saturs (piemēram, uz organizācijas logotipa var noklikšķināt, lai pārietu uz mājas lapu), alternatīvajam tekstam jāapraksta saites galamērķis. Piemēram, alt = "mājas lapa".
    • Nelietojiet ikonu fontus; tie var būt ļoti slikti disleksiskiem cilvēkiem. Ja jūs tos izmantojat, konvertēt tos uz SVG.

    Video un audio alternatīvs teksts

    Neaizmirstiet, ka audio saturam ir nepieciešams alternatīvs teksts cilvēkiem ar dzirdes traucējumiem. Tas nozīmē Podcast epizodes un video subtitrus. Un vēlreiz: neveiciet multivides automātisku atskaņošanu.

    9) Pievienojiet pareizu dokumentu valodu

    Īsumā: ļaujiet palīgtehnoloģijām zināt valodu, kurā atrodas jūsu teksts.

    30% mājas lapu nedeklarē valodu, kurā viņi ir rakstījuši, un tas var mulsināt ekrāna lasītāju lietotājus. Tas ir svarīgi, jo vārdu “seši” izrunā ļoti atšķirīgi, ja, piemēram, teikums ir angļu vai franču valodā.

    To ir viegli atrisināt, savam HTML elementam pievienojot lang atribūtu:

    “En” ekrāna lasītājam (vai tulkošanas programmatūrai) norāda, ka šī lapa ir angļu valodā. “Es” ir spāņu valoda, “fr” ir franču valoda utt. Lielākajai daļai valodu valodas tagu ir diezgan viegli noteikt. W3C ir pieejams ceļvedis Valodas birkas izvēle.

    Ja lapā ir saturs valodā, kas nav galvenā deklarētā valodā, pievienojiet valodas atribūtu elementam, kas apņem šo saturu. Piemēram, lapā, kas pasludināta par angļu valodu:

    Ja vēlaties tērzēt matador, dažās foršās Kabana
    Un satikties senoritas pēc rezultāta, Espana por favor

    10) Palīdziet apmeklētājam iepazīties ar jūsu saturu

    Īsumā: izmantojiet HTML orientieru elementus, lai palīdzētu palīgtehnoloģijas lietotājiem saprast un pārvietoties jūsu saturā.

    Kad redzīgs apmeklētājs nonāk jūsu lapā, viņš to var viegli vizuāli skenēt, lai saprastu, kur ir navigācija un kur sākas galvenais saturs. Ekrāna lasītāja lietotājs to nevar izdarīt. Tomēr HTML5 dod mums dažus jaunus tagus, lai atzīmētu šos apgabalus, un palīgtehnoloģijām ir saīsnes, kuras var pāriet uz (vai izlaist) orientierus, piemēram, galvenes, kājene, navigācija un tamlīdzīgi.

    Šis ir sešu minūšu video, kuru es kopā ar tīmekļa izstrādātāju un ekrāna lasītāju Léonie Watson veidoja par to, kā viņa izmanto savu ekrāna lasītāju, lai pārbaudītu šo semantiku, lai pārvietotos manā personīgajā vietnē:

    • Aptiniet galveno saturu, tas ir, saturu, kas nav galvenes, galvenā navigācija vai kājene, a
      elements. Gandrīz visos gadījumos vajadzētu būt tikai vienam
      vienā lappusē. Visas pārlūkprogrammas (IE9 +) ļauj jums to stilizēt, un palīgtehnoloģijas zina, ko ar to darīt.
    • Aptiniet galveni (zīmola logotipu, siksnu, lapas virsrakstu) a
      elements.
    • Aptiniet kājeni (juridiska informācija, kontaktinformācija, paziņojums par autortiesībām utt.)
    • Atzīmējiet savu galveno navigāciju, izmantojot
        iesaiņots a elements. To var ligzdot
        ja tas ir piemērots lapas vizuālajam noformējumam.
      • Reklāma un nebūtiskais saturs ir jāiesaiņo
      • Ja jums ir vairāk nekā viens produkts / video / ziņu vienums / emuāra ziņa vienā lapā, aptiniet katru no tiem
        elements.

      ekrāna lasītāju lietotāju aptauja, WebAIM atklāja, ka 26% ekrāna lasītāju lietotāju bieži vai vienmēr izmanto šos orientierus, pārlūkojot lapu.

      Bez tam atsevišķu satura daļu iesaiņošana

      palīdz Apple WatchOS optimāli attēlot saturu. Skatīt manu rakstu Semantiskā HTML praktiskā vērtība lai uzzinātu vairāk par šo.

      11) Pareizi izmantojiet HTML

      Īsumā: izprast HTML elementu semantiku un noklusējuma izturēšanos; izmantojiet savam saturam pareizo elementu.

      Izplatīta šī raksta tēma ir pareiza HTML elementu izmantošana. Izmantojot a etiķete tai ir iebūvēta pārlūka darbība, kas koncentrējas uz saistīto ievades lauku; izmantojot

      ir vēlams

      jo tas ļauj ekrāna lasītāja lietotājiem uzreiz pāriet uz svarīgo saturu, vienlaikus būdams pilnīgi neuzbāzīgs tiem, kuri nelieto ekrāna lasītāju.

      Vēl viens piemērs ir a

      Like this post? Please share to your friends:
Adblock
detector
map