Tinklo prieinamumo kontrolinis sąrašas

Prieinamumas yra praktika, kuria užtikrinama, kad interneto svetainės būtų vienodai prieinamos žmonėms su negalia, kad jie turėtų vienodas galimybes naudotis tomis svetainėmis tiekiamomis prekėmis ir paslaugomis. Tai neatsiejama profesionalių interneto svetainių kūrimo ir plėtros dalis.


Contents

Kodėl jums turėtų rūpėti? Prieinamumas?

Yra daugybė priežasčių, kodėl kūrėjai, dizaineriai ir jų darbdaviai / klientai turėtų užtikrinti, kad prieinamumas būtų ankstyva ir neatsiejama interneto kūrimo proceso dalis..

  • Daugelyje teritorijų, tokiose kaip JAV, ES, JK, Izraelis ir Japonija, galioja teisinis reikalavimas nediskriminuoti žmonių dėl jų negalios. JAV pernai, Pateikti 2235 nauji ADA svetainės ieškiniai federaliniame teisme. Tai yra vienas per valandą.
  • Prieinamos svetainės paprastai yra geriau koduojamos, patikimesnės ir gerai randasi paieškos sistemose.
  • Prieinamos svetainės yra linkusios labiau pritaikytas lankytojams su negalia, lemia didesnį pasitenkinimą ir atsivertimą.
  • Neprieinamos vietos kenkia verslui. 2019 metais, a JK apklausa nustatė, kad daugiau kaip 4 milijonai žmonių atsisakė mažmeninės prekybos tinklalapio dėl jų pasiekiamumo kliūčių. Prarastas verslas, „Spustelėkite“, buvo 17,1 milijardo svarų sterlingų. Tai yra milijardas. Vien tik JK.
  • Savavališkai potencialių klientų pašalinimas yra blogas verslas.

Bendrieji standartai ir problemos

Laimei, W3C (įstaiga, kurianti daugybę standartų, kuriais remiasi internetas) turi standartą, kaip padaryti svetaines prieinamas. Tai vadinama Žiniatinklio turinio prieinamumo gairės (WCAG). Yra trys atitikties lygiai (A, AA, AAA), o „A“ yra žemiausias prieinamumo lygis. Aš rekomenduoju jums siekti AA lygio.

Deja, WCAG yra ilgas, sausas ir labai techninis skaitymas, todėl pažvelkime, ką galite padaryti palyginti lengvai ir sulauksite didžiausio sprogimo. Tai nėra viskas, ką reikia žinoti. Tai yra dažniausiai pasitaikančių klaidų kontrolinis sąrašas, o klaidos, kurias žmonės su negalia sako, yra pagrindiniai jų blokatoriai, pateikiant praktinius patarimus, kaip išspręsti problemas. Visos išorinės nuorodos atidaromos naujame skirtuke.

Atliekant „Spustelėkite“ svaro apklausą, respondentų su negalia buvo paklausta, kokios buvo pagrindinės kliūtys jiems užbaigti pirkimus. Čia yra pagrindinės kliūtys (buvo leidžiama pateikti kelis atsakymus):

  1. Perpildyti puslapiai su per dideliu turiniu – 66%
  2. „reCAPTCHA“ testai – 59 proc.
  3. Prastas įskaitomumas (kontrastas, teksto išdėstymas) 56%
  4. Judančių vaizdų ir grafikos atitraukimas – 53%
  5. Prasta nuorodos informacija – 59% (77% ekrano skaitytuvo vartotojams)
  6. Formos užpildymas 56%

Kaip pagerinti svetainės prieinamumą

Pirmiausia atkreipkite dėmesį, kad nė viena iš penkių geriausių nėra techninė problema – tai yra dizaino klaidos ar rašymo klaidos.

1) per daug turinio

Trumpai tarkite: suskaidykite tekstą į skyrius su antraštėmis ir sąrašais su ženkleliais. Naudokite paprastą kalbą.

Gerai žinoma, kad didėjant pasirinkimų skaičiui, didėja ir reikalingos pastangos renkant informaciją ir priimti gerus sprendimus. Lygiai tas pats su per dideliu turiniu – netrukus jis tampa neįtikėtinas. Turinio priskyrimas prie būtiniausių dalykų yra daug laiko reikalaujantis amatas; kaip Markas Tvenas (tariamai) rašė: „Aš neturėjau laiko parašyti trumpą laišką, todėl vietoj jo parašiau ilgą“.

Naujausia knyga Rašymas yra dizainas siūlo

Žmonės nori sugebėti nugirsti ilgus teksto blokus, nepaisydami regėjimo ar garso įrašo, todėl labai svarbu struktūruoti savo ilgą rašymą naudojant antraštes, trumpas pastraipas ir kitą geriausią turinio dizaino praktiką..

Taigi:

  • Turi tik vieną

    puslapyje.

  • Naudokite subpozicijas laisvai; jis suskaido regėjimo vartotojams teksto „plokštę“, o pagalbinių technologijų, tokių kaip ekrano skaitytuvai, vartotojai gali naudoti spartųjį klavišą, norėdami pereiti iš vienos antraštės į kitą ar gauti mentalinį turinio žemėlapį iš antraštės struktūros.
  • Negalima praleisti nė vieno antraštės lygio. Pvz., Jei naudojate

    , įsitikinkite, kad prieš jį yra

    .

  • Naudokite ženklų sąrašus (pvz., Tai!), Teisingai pažymėtus HTML kaip
      ,
    • . Ekrano skaitytojai paskelbs „10 elementų sąrašą“ (ir leis vartotojui perlipti juos).

    Naudokite paprastą anglų kalbą

    „Monzo Bank“ „Mūsų balso tonas“ vadovas paaiškina paprastos kalbos svarbą:

    2010 m. JAV advokatas Seanas Flammeris atliko eksperimentą. Jis paprašė 800 apygardos teismo teisėjų atsisakyti tradicinio „legalios“ argumento arba argumento, kurį jis vadina „paprasta angliška“..

    Teisėjai didžiąja dalimi teikė pirmenybę paprastai angliškai versijai (66% – 34%), ir šis pasirinkimas nepriklausė nuo amžiaus ar išsilavinimo..

    Liepsnos užrašai (PDF) paprasto angliško varianto versija:

    Jis yra beveik puslapiu trumpesnis, todėl akivaizdžiai pašalina nereikalingus sakinius ir žodžius. Jo sakiniai vidutiniškai sudaro 17,8 žodžių, o ne 25,2 žodžių.

    Jis daro išvadą:

    Dabar turime 25 metus trukusį empirinį tyrimą, darantį neišvengiamą išvadą: jei norite įtikti ir įtikinti savo skaitytoją, rašykite paprasta anglų kalba.

    2) „ReCAPTCHA“

    Trumpai: neverskite savo vartotojų peršokti per galimai neįmanomus lankus, kad sutaupytumėte kūrėjo laiką.

    Respondentai dažnai kalbėdavo apie seną „ReCAPTCHA“ versija:

    „reCAPTCHA“ versijos su banguotu tekstu, kurį turite įvesti iš naujo

    Aš kovoju su vaizdais ir turiu įvesti skaičius ar raides. Tokiu būdu, kai turiu spustelėti, kuriuose vaizduose yra parduotuvė ar dar kas, aš jų visada pasiilgau arba susipainioju ir išeikvojau energiją, kurios neturiu …

    ReCAPTCHA banguotų raidžių stilius dabar nebenaudojamas. Daug įprasčiau pamatyti naujesnį įsikūnijimą pavadinimu „No CAPTCHA reCAPTCHA“ (dar žinomą kaip „Aš nesu robotas “), kuriame reikalaujama, kad vartotojas pažymėtų langelį, patvirtinantį, kad jie nėra robotas, ir vartotojo įvertinimui naudoja slaptą „voodoo“. Jei jie praeina, tolesnės sąveikos nereikia. Tačiau jei jie nepavyks, bus rodomas kitas iššūkis:

    Dalinė „captcha“ ekrano kopija, reikalaujanti vartotojo paspausti visas apelsinų kvadratėlius

    Atminkite, kad CAPTCHA tipas, pagal kurį vartotojas turi spustelėti visus kvadratus su (tarkim) gatvės ženklu, nebūtinai yra tarptautinis. Kaip rašo Terence’as Edenas, CAPTCHA neįrodo, kad esate žmogus – jie įrodo, kad esate amerikietis.

    Labiausiai prieinama „reCAPTCHA“ forma yra „reCAPTCHA v3“ kuri nereikalauja vartotojo sąveikos, tačiau reikia daugiau nuveikti, jei susiduriate su apsilankymais, kurie neišlaiko bandymo:

    Tai yra grynas „JavaScript“ API grąžinimas, suteikiantis jums galimybę imtis veiksmų jūsų svetainėje: pavyzdžiui, reikalaujant papildomų autentifikavimo veiksnių, siunčiant laišką moderavimui arba išmetus robotus, kurie gali sugadinti turinį.

    3) Prastas įskaitomumas

    Trumpai: įsitikinkite, kad tekstas turi pakankamai kontrastą, yra lengvai skaitomas ir nepateisinamas.

    • Užtikrinkite tinkamą kontrastą. Vienas iš labiausiai paplitusių prieigos blokatorių žiniatinklyje yra menkas teksto ir fono kontrastas. W3C gairėse reikalaujama, kad kontrasto santykis būtų ne mažesnis kaip 4,5: 1, išskyrus didelio formato tekstus ir didelio masto teksto vaizdus, ​​kurių kontrasto santykis turėtų būti ne mažesnis kaip 3: 1 (logotipai ir „atsitiktinis“ tekstas neapmokestinami). Yra daugybė komunalinių paslaugų, kurios gali išmatuoti jums kontrastingumą; mano asmeninis mėgstamiausias yra Ada Rose Cannon kontrasto valdiklis, kuri yra naudinga naršyklės žymelė, išryškinanti nepakankamo kontrasto sritis jūsų puslapyje.
    • Neturėkite visos kapitalo antraštės. Yra įrodymų, kad jas sunkiau skaityti, nes didžiosios raidės yra vienodo ilgio, todėl negalime atpažinti bendrų žodžių formos. Be to, kai kurie ekrano skaitytojai aiškins didžiosios raidės grupes taip, lyg tai būtų santrumpos (pvz., BBC, DOJ ir kt.). Jei turite turėti visas didžiosios antraštes, įprastu atveju įrašykite jas į HTML ir transformuokite jas naudodami CSS teksto transformacija: didžiosios raidės.
    • Derinkite tekstą į kairę. (Puslapiams iš dešinės į kairę, pavyzdžiui, arabų ar hebrajų kalbomis, derinkite tekstą dešinėn.) Nepateisinkite to, nes tai disleksija sergantiems žmonėms tampa sunkiau skaityti. Didžiosios Britanijos disleksijos asociacijos stiliaus vadovas taip pat siūlo

      Naudokite „sans“ serifo šriftus, tokius kaip „Arial“ ir „Comic Sans“, nes raidės gali būti mažiau perkrautos. Alternatyvos yra Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) Atkreipkite dėmesį į vaizdus ir grafiką

    Trumpai: leiskite vartotojams sustabdyti bet kokį judėjimą; gerbti jų operacinės sistemos nustatymus; neautomatiškai paleisti vaizdo įrašą.

    Vienas respondentų, dalyvavusių apklausoje „Spustelėkite“, rašė,

    Svetainės, kurias anksčiau naudojau mažai, dabar tampa problema, nes jos imasi skelbimų perkėlimo ir nuolat įkelia daugiau skelbimų, kai jūs apsipirkote..

    Paprasčiausiam WCAG lygiui reikia „Bet kuriai judančiai, mirksinčiai ar slinkančiai informacijai, kuri (1) prasideda automatiškai, (2) trunka ilgiau nei penkias sekundes, ir (3) pateikiama lygiagrečiai su kitu turiniu, yra vartotojui pristabdyti, sustabdyti ar paslėpti, nebent judėjimas, mirksėjimas ar slinkimas yra dalis veiklos, kur tai yra būtina “.

    Atsiribojimas yra susierzinimas – ypač žmonėms, turintiems ADHD ar kitų pažinimo sutrikimų. Bet judėjimas ir mirksėjimas taip pat gali sukelti traukulius, todėl WCAG gairėse reikalaujama, kad turinys neturėtų mirksėti daugiau kaip 3 kartus per 1 sekundę..

    Gerbkite vartotojo pasirinktą animaciją

    Visos pagrindinės operacinės sistemos leidžia vartotojui pareikšti norą dėl sumažėjusio judesio ekrane – galbūt todėl, kad turi judesio sukeltą vestibulinį spektro sutrikimą. Jūsų svetainė gali nustatyti, ar vartotojas tai padarė naudodamas CSS teikia pirmenybę sumažintam judesiui žiniasklaidos užklausa.

    Mygtuką animuoti leidžiame tik tuo atveju, jei vartotojas nepareiškė savo pasirinkimo:

    @media (pirmenybė teikiama mažesniam judesiui: nereikia pirmenybės) {
    mygtukas {
    / * „vibraciniai“ raktų rėmeliai yra apibrėžti kitur * /
    animacija: vibruoja 0,3 s tiesine begaline abiem;
    }
    }

    Jei norite modifikuoti svetainę, kurioje yra daug animacijos taisyklių, tai gali būti daroma toliau sustabdyti visas anksčiau paskelbtas CSS animacijas:

    @media (teikia pirmenybę sumažintam judesiui: sumažina) {
    *,
    * :: prieš,
    * :: po {
    animacijos trukmė: 0,001 s! svarbu;
    perėjimo trukmė: 0,001 s! svarbu;
    }
    }

    Jei norite atsižvelgti į vartotojo operacinės sistemos nuostatas, galbūt norėsite apsvarstyti svetainės dizainas tamsiuoju režimu.

    5) Prasta nuorodos informacija

    Trumpai: padarykite nuorodas atpažįstamas su unikaliu nuorodų tekstu. Įspėkite vartotojus, jei nuoroda atvers naują skirtuką ar failą.

    Viena iš pagrindinių prastų nuorodų priežasčių dažnai yra prastas tekstų rašymas. Dauguma ekrano skaitytuvų suteikia vartotojui galimybę greitai pamatyti nuorodų sąrašą puslapyje (dažniausiai naudojamame komerciniame ekrano skaitytuve JAWS spartusis klavišas yra Ins + F7; nemokamas NVDA ekrano skaitytuvas, tas pats spartusis klavišas pateikia elementų sąrašą, kuriame pateikiamos puslapio nuorodos, antraštės ir orientyrai).

    Tačiau jei kiekvienoje nuorodoje yra tekstas, kuriame sakoma: „Spustelėkite čia“ arba „Skaityti daugiau“, be nieko, kas juos išskirtų, tai yra nenaudinga. Lengviausias būdas tai išspręsti yra paprasčiausiai parašyti unikalų nuorodos tekstą, tačiau jei to padaryti neįmanoma, galite perbraukti nuorodos tekstą pagalbinėms technologijoms, naudodami unikalų arijos etiketės atributą kiekvienoje nuorodoje..

    Štai puikus pavyzdys iš „Joomla“ svetainė:

    „Joomla“ svetainė, kurioje pateikiamos dvi skirtingos istorijos, kurių kiekviena yra tapati

    Matomas nuorodos tekstas yra tiesiog „skaityk daugiau“, bet Joomla naudoja arija-etiketė atributai, kad kiekvienas būtų unikalus pagalbinėms technologijoms:

    Skaityti daugiau
    
    Skaityti daugiau

    Dėl arija-etiketė tekstas bus naudojamas vietoj nuorodos teksto pagalbinėmis technologijomis, W3C rekomenduoja arijos etiketėje naudojamą tekstą pradėti nuo nuorodoje naudojamo teksto, nes „tai leis nuosekliai bendrauti vartotojams“.

    Pastaba: Keletas blogų patarimų, kuriuos vis dar matau senose svetainėse, yra nuorodų, naudojančių., Aiškinamasis tekstas pavadinimas atributas:

    Skaityti daugiau>

    Nedaryk to. Pavadinimas nėra rodomas daugumai ekrano skaitytojų (kūrėjai įpylė jį raktiniais žodžiais „SEO“ tikslais, todėl ekrano skaitymo priemonių pardavėjai jį išjungė pagal numatytuosius nustatymus), o naršyklės pateikia pavadinimo atributus kaip „patarimus“, kurie pasiekiami tik pelės vartotojams.

    Nuorodos turėtų atrodyti kaip nuorodos

    Pagal numatytuosius nustatymus naršyklės pabrėžia linijas. Geriausia to nekeisti, bet jei dėl to pralošite su dizaineriu kovodami, nuorodos teksto kontrastingumo santykis turi būti 3: 1, palyginti su aplinkiniu nesusiejančio teksto tekstu, ir jis turėtų suteikti tam tikrą spalvą “Kad jie yra grandis, kai pakeliate ar nukreipiate dėmesį, pavyzdžiui:

    a: užveskite pelės žymeklį, a: fokusą {teksto dekoravimas: pabraukimas;}

    Fokusavimo stilius nuorodas pabraukia, kai vartotojas, kuris nėra pelė, sutelkia dėmesį į tai iš klaviatūros, plunksnos ar balso įvesties. Paprastai, kai kas nors puslapyje turi pelės žymeklio stilių, jam taip pat turėtų būti skiriamas fokusavimo stilius.

    „Spalvos žymeklis“ (mūsų atveju – pabraukimas) užtikrina, kad lankytojai, turintys silpną regėjimą ar spalvų aklumą, pamatytų pokyčius užveskite pelės žymeklį ar fokusą. (Ekrano skaitytojai automatiškai skelbia „Link“ prieš nuorodos tekstą.)

    Pasakykite žmonėms, jei nuoroda atidaro naują skirtuką / puslapį

    Tai gali painioti lankytoją, jei suaktyvinus nuorodą atidaromas naujas skirtukas arba naujas langas, ypač jei tai daro tik kelios puslapio nuorodos (pavyzdžiui, naują skirtuką atidaro tik išorinės nuorodos). Jei turite tai padaryti, turėtumėte perspėti vartotoją nuorodos tekste arba naudodami aukščiau pateiktą arijos etiketės metodą.

    Pasakykite žmonėms, jei nuoroda yra faile

    Jei nuoroda yra prie failo (pvz., PDF ar vaizdo įrašo), pasakykite vartotojui nuorodos tekste. Neslėpk to arija-etiketė, nes tai gali būti naudinga daugeliui reginčiųjų (pvz., kai kurie mobilieji telefonai negali atidaryti .docx failo). Jei tai yra didelis failas, apsvarstykite galimybę įspėti vartotoją apie apytikslį dydį; jie gali nenorėti atsisiųsti didelio vaizdo failo per 3G.

    Taip pat galite naudoti parsisiųsti atributas, dėl kurio naršyklė atidaro pagrindinį operacinės sistemos failų atsisiuntimo dialogą. Sudėjus visa tai, kodas atrodys taip:

    Metinė ataskaita (PDF, 240 MB)

    6) Kita projektavimo klaida: fokusavimo žiedo pašalinimas

    Trumpai: įsitikinkite, kad klaviatūros vartotojas visada gali pamatyti, kur yra nukreiptas.

    Mes minėjome : fokusavimas stiliai anksčiau. Jie yra neįkainojamas vaizdinis rodiklis tiems žmonėms, kurie dėl kokių nors priežasčių negali naudoti pelės: galbūt jie turi RSI, ar Parkinsono ar išsėtinę sklerozę. Pagal numatytuosius nustatymus naršyklėse rodomas šiuo metu sufokusuoto elemento fokusavimo žiedas. Čia yra nuoroda Pagrindinis mano asmeninėje svetainėje, nukreiptoje į „Chromium“ naršyklę:

    „Chromium“ numatytojo fokusavimo žiedo aplink nuorodą (kuris taip pat yra vaizdas) ekrano kopija

    Tačiau kai kurie žmonės mano, kad tai estetiškai nepatinka, kai jie naudoja pelę, ir ją išjungia naudodami CSS, taip palikdami svetainę neprieinamą klaviatūros vartotojams..

    Įveskite naują standartą, kurį įkūrė „Firefox“, vadinamas : fokusas matomas. Tai fokusavimo žiedas bus pritaikytas elementui, jei jį pasiekė klaviatūra ar ne pelės žymeklis, tačiau pelės vartotojams jis nieko nerodo. Kadangi tai palaikoma tik „Firefox“ (rašymo metu), Patrick Lauke siūlo šią CSS, kad galėtumėte gražiai žaisti su visomis naršyklėmis:

    mygtukas: fokusavimas {/ * įdomūs mygtuko fokusavimo stiliai * /}
    mygtukas: fokusavimas: ne (: fokusavimas matomas) {
    / * anuliuoti visus aukščiau nurodytus mygtukų stilius
    jei mygtukas sufokusuotas, bet naršyklė paprastai to nedarys
    rodyti numatytuosius fokusavimo stilius * /
    }
    mygtukas: matomas fokusas {/ * kai kurie net * daugiau * įdomūs mygtuko fokusavimo stiliai * /}

    7) Formos užpildymas

    Trumpai apibūdinkite: formos laukai, panašūs į formos laukus, susieti su etikete. Neišjunkite automatinio užpildymo.

    Atsižvelgiant į ypatingą formų svarbą el. Prekybos svetainėms, mane stebina, kiek neprieinamų formų aš matau. Dažnai taip yra todėl, kad senos naršyklės nelabai leido formuoti formos elementus, todėl kūrėjai suklastojo juos kitais HTML elementais. Šiuolaikinės naršyklės leidžia patrauklios žymės langeliai, radijo mygtukai, pasirinktiniai komponentai ir jungiamosios dėžutės, prieinami automatinio užbaigimo valdikliai ir dar.

    Automatinis užpildymas yra jūsų draugas

    Jei naršyklėms leidžiama automatiškai užpildyti formas, lankytojams reikia padaryti mažiau, todėl jie labiau linkę užpildyti formą ir užsiregistruoti / nusipirkti jūsų produktą. Automatinis naršyklių užpildymas: gilus nardymas yra puikus „eBay“ straipsnis apie tai (ir jie turėtų žinoti).

    Be to, automatinis užbaigimas yra vienintelis šiuo metu pakankamas būdas pasiekti AA atitiktį 1.3.5 sėkmės kriterijus: nurodykite įvesties tikslą.

    Padaryti formos laukus panašius į formos laukus

    Pagal numatytuosius nustatymus naršyklės formos įvesties laukus pateikia kaip langelius. Visais būdais formuokite jas su paraštėmis, kamšalu ir kraštais, tačiau laikykite jas kaip dėžutes. Daugelis dizainerių vadovavosi „Google“ Medžiagų projektavimo modeliu, kuris buvo iki 2017 m., Kai vartotojui tekstui įvesti buvo naudojama viena eilutė:

    Senos medžiagos dizaino įvestis su horizontalia linija, o ne stačiakampiu langeliu

    Tačiau „Google“ nustatė, kad eilutė po senaisiais teksto laukais kai kuriems vartotojams nebuvo aiški, dažnai painiojama su dalikliu ir pakeitė dizainą. Į a tinkamumo naudoti testas su 600 dalyvių jie tai sužinojo

    uždari teksto laukai, stačiakampio (dėžutės) formos, atlikti geriau nei tie, kuriems suteikiama linija … Šiandien šie nauji teksto laukai rodomi „Google“ produktuose nuo prisijungimo prie paskyros puslapiuose iki „Google“ formų.

    Jei ketinate priimti visą „Google“ Material Design UI biblioteką, perskaitykite Nustokite naudoti „Material Design“ teksto laukus! pateikė Matsuko Friedland, norėdami pamatyti, ar jis atitinka jūsų poreikius.

    Pažymėkite visus formos laukus

    Visi formos laukai (teksto įvestys, žymės langeliai, radijo mygtukai, slankmačiai ir tt) turi būti paženklinti. Geriausias būdas tai padaryti yra naudoti HTML ; kaip sako WCAG, „standartiniai HTML valdikliai jau atitinka šį sėkmės kriterijų, kai naudojami pagal specifikaciją“.

    Štai demonstracija, kurią padariau iš nepažymėtas formos laukas palyginti su pažymėtu formos lauku. Jie atrodo identiški, tačiau viršutinis neturi tinkamos etiketės, o antrasis. Spustelėkite apatinę teksto etiketę ir pamatysite, kad ji nukreipta į susietą įvestį.

    netikras ir tikras etikečių palyginimas

    Tai padaro žymiai lengvesnį židinio fokusavimą tiems, kurie turi variklio valdymo sunkumų – o gal ir jums, bandydami pažymėti mažą žymimąjį langelį mažame ekranėlyje, esančiame nejudančiame traukinyje. Tai taip pat labai svarbu ekrano skaitytojų vartotojams, kurie formos skirtukus perlenks per laukelius (pagal numatytuosius nustatymus žymi skirtukus tik nuorodos ir formos laukai); kai jie pateks į įvesties lauką, ekrano skaitytuvas praneš apie susijusios etiketės turinį.

    Kodas tam yra paprastas. Įvesties laukui suteikiamas unikalus ID, o etiketė su juo susiejama naudojant dėl atributas:

    
    

    Slėpti etiketes

    Kartais galite nenorėti matomos etiketės. Arba dizaineris to nedaro, o jūs nenorite, kad būtų dar viena kova automobilių stovėjimo aikštelėje. Bet kokiu atveju, čia yra pavyzdys, kai etiketė, kurioje sakoma „Paieška“ prieš įvestį, atrodo perdėta.

    Įvesties laukas su mygtuku, pažymėtu „ieškoti“ po to

    Įvesties lauką galime susieti su tekstu „Ieškoti“, kuris yra mygtuko „Pateikti“ turinys naudojant arija etiketėje:

    
    

    Mes galėjome panaudoti arija-etiketė (su kuriais anksčiau susitikome kalbėdami apie nuorodas):


    Bet visada geriau teikti pirmenybę matomam puslapio tekstui, nes jis bus išverstas, jei puslapis bus valdomas naudojant vertimo įrankį, o HTML atributuose „paslėptas“ tekstas nebus. (Hat-tip Adrianui Roselli už šį patarimą, iš jo nuostabaus straipsnio Mano prioritetas kontrolės priemonių ženklinimo metodams.)

    Dažniausiai pasitaikančios klaidos milijonuose pagrindiniuose puslapiuose

    Mes pažvelgėme į pagrindines kliūtis elektroninės komercijos svetainėms, apie kurias pranešė vartotojai, turintys tam tikros formos sutrikimų. Dabar pažvelkime į daug platesnį svetainių rinkinį – 1 000 000 populiariausių svetainių pagrindinius puslapius, automatiškai išanalizuota „WebAIM“ rugpjūčio mėn. 98% analizuotų puslapių turėjo bent vieną klaidą. Dažniausiai pasitaikančios klaidos

    1. Žemo kontrasto tekstas (86,1%)
    2. Trūksta alternatyvaus vaizdų teksto (67,9%)
    3. Tuščios nuorodos (58,9%)
    4. Trūksta formos įvesties etikečių (53,2%)
    5. Trūksta dokumento kalbos (30,5%)

    Aukščiau kalbėjome apie mažą kontrastą, nuorodas ir formos įvestis. Dabar pažvelkime, kaip galime išvengti kitų labai paplitusių klaidų.

    8) Pateikite teksto alternatyvas visiems vaizdams, vaizdo įrašams ir garso įrašams

    Trumpai: visa atvaizde ar vaizdo įraše perduodama informacija turi atitikti tekstą.

    Kiekvienas privalo turėti alternatyvų tekstą („alt text“), kurį būtų galima perduoti regėjimo negalią turintiems lankytojams arba mažo pralaidumo / brangių duomenų planų lankytojams, išjungusiems vaizdus naršyklėse. Tai apima teksto vaizdus.

    Čia yra pagrindinės taisyklės:

    • Jei vaizdas yra tik dekoratyvinis, jo tekstas turi būti tuščias: alt = "". (Bet vistiek grynai dekoratyvūs vaizdai turėtų būti CSS.)
    • Jei paveikslėlis aprašytas kūno tekste, jo tekstas neturi būti tuščias (alt = ""), kad nepasikartotų. Bet būkite atsargūs, jei tai yra a
      – pamatyti Kaip jūs suprantate? daugiau.
    • Jei vaizdas yra vienintelis nuorodos turinys (pavyzdžiui, norėdami patekti į pagrindinį puslapį, galite spustelėti jūsų organizacijos logotipą), alternatyvus tekstas turėtų apibūdinti nuorodos tikslą. Pavyzdžiui, alt = "pagrindinis puslapis".
    • Nenaudokite piktogramų šriftų; jie gali būti labai blogi disleksiškiems žmonėms. Jei jūs naudojate juos, konvertuoti juos į SVG.

    Vaizdo ir garso pakaitinis tekstas

    Nepamirškite, kad žmonėms, turintiems klausos negalią, garso turiniui reikalingas alternatyvus tekstas. Tai reiškia, kad transliuojamos transliacijos ir vaizdo įrašų subtitrai. Ir dar kartą: nenaudokite automatinio leidimo laikmenų.

    9) Pridėti tinkamą dokumentų kalbą

    Trumpai: leiskite pagalbinėms technologijoms žinoti kalbą, kuria yra jūsų tekstas.

    30% namų puslapių nedetalizuoja kalbos, kuria jie parašyti, todėl ekrano skaitytuvo vartotojams tai gali sukelti painiavą. Tai svarbu, nes žodis „šeši“ tariamas labai skirtingai, jei sakinys, pavyzdžiui, yra anglų ar prancūzų.

    Tai nesunku išspręsti pridedant „lang“ atributą prie HTML elemento:

    „En“ ekrano skaitytuvui (arba vertimo programinei įrangai) nurodo, kad šis puslapis yra anglų kalba. „Es“ yra ispanų, „fr“ yra prancūzų ir pan. Daugelyje kalbų kalbos žymą gana lengva nustatyti. „W3C“ yra vadovas Kalbos žymos pasirinkimas.

    Jei puslapyje yra turinio ne ta kalba, kuria deklaruojama pagrindinė kalba, pridėkite kalbos atributą prie elemento, supančio tą turinį. Pvz., Puslapyje, kuris paskelbtas anglišku:

    Jei norėtumėte pabendrauti matador, kai kuriose vėsiose kabana
    Ir susitikti senoritas pagal balą, „Espana por favor“

    10) Padėkite lankytojui susipažinti su jūsų turiniu

    Trumpai: naudokite HTML orientyrų elementus, kad padėtumėte pagalbinių technologijų vartotojams suprasti ir naršyti jūsų turinį.

    Kai matomas lankytojas ateina į jūsų puslapį, jis gali lengvai jį vizualiai nuskaityti, kad suprastų, kur yra naršymas ir kur prasideda pagrindinis turinys. Ekrano skaitytuvo vartotojas to negali padaryti. Tačiau HTML5 suteikia mums keletą naujų žymų šioms sritims pažymėti, o pagalbinės technologijos turi nuorodas, kuriomis galima pereiti (arba praleisti) orientyrus, pvz. antraštė, poraštė, navigacija ir panašiai.

    Štai šešių minučių trukmės vaizdo įrašas, kurį sukūriau kartu su žiniatinklio kūrėja ir ekrano skaitymo priemonės vartotoja Léonie Watson apie tai, kaip ji naudoja savo ekrano skaitytuvą, norėdama išnagrinėti šią semantiką, kad naršytų mano asmeninėje svetainėje:

    • Apvyniokite pagrindinį turinį, ty medžiagą, kuri nėra antraštė, pagrindinė navigacija ar poraštė
      elementas. Beveik visais atvejais turėtų būti tik vienas
      puslapyje. Visos naršyklės (IE9 +) leidžia jums tai modeliuoti, o pagalbinės technologijos žino, ką su ja daryti.
    • Apvyniokite antraštę (prekės ženklo logotipą, juostą, puslapio antraštę) a
      elementas.
    • Apvyniokite poraštę (teisinę medžiagą, kontaktinę informaciją, pranešimą apie autorių teises ir kt.) A
    • Pažymėkite pagrindinį naršymą naudodami
        suvynioti į elementas. Tai galima įterpti
        jei tai tinka vizualiam puslapio dizainui.
      • Reklama ir neesminis turinys turėtų būti suvynioti į
      • Jei puslapyje yra daugiau nei vienas produktas / vaizdo įrašas / naujienų elementas / tinklaraščio įrašas, apvyniokite kiekvieną iš jų
        elementas.

      Joje ekrano skaitytojų vartotojų apklausa, „WebAIM“ nustatė, kad 26% ekrano skaitytuvo vartotojų dažnai arba visada naudojasi šiais orientyrais naršydami puslapį.

      Be to, įvyniokite atskirus turinio gabalus į

      padeda „Apple“ „WatchOS“ įrenginiams optimaliai rodyti turinį. Žiūrėti mano straipsnį Praktinė semantinio HTML vertė daugiau apie tai.

      11) Tinkamai naudokite HTML

      Trumpai: suprasti HTML elementų semantiką ir numatytąjį elgesį; naudokite savo turiniui tinkamą elementą.

      Įprasta šio straipsnio tema buvo naudoti teisingus HTML elementus. Naudojant etiketė turi įmontuotą naršyklės elgesį, kuris sutelkia dėmesį į susijusį įvesties lauką; naudojant

      yra geriau nei

      nes tai leidžia ekrano skaitytuvo vartotojams pereiti tiesiai prie svarbaus turinio, tuo pačiu visiškai netrukdantiems tiems, kurie nenaudoja ekrano skaitytuvo.

      Kitas pavyzdys yra naudojant

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