Veebi juurdepääsetavuse kontroll-loend

Juurdepääsetavus on tava, millega tagatakse, et veebisaidid on puuetega inimestele võrdselt kättesaadavad, nii et neil oleks võrdne juurdepääs kaupadele ja teenustele, mida need saidid pakuvad. See on professionaalse veebidisaini ja arenduse lahutamatu osa.


Contents

Miks sa peaksid hoolima? Juurdepääsetavus?

On palju põhjuseid, miks arendajad, disainerid ja nende tööandjad / kliendid peaksid tagama, et juurdepääsetavus oleks veebiarenduse protsessi varajane ja lahutamatu osa..

  • Paljudel territooriumidel, näiteks USA-s, EL-is, Suurbritannias, Iisraelis ja Jaapanis, on seadusest tulenev kohustus mitte diskrimineerida inimesi nende puude tõttu. USA-s eelmisel aastal, Esitati 2235 uut ADA veebisaidi kohtuasja föderaalkohtus. See on üks tunnis.
  • Ligipääsetavad saidid on tavaliselt paremini kodeeritud, vastupidavamad ja asuvad otsingumootorites hästi.
  • Ligipääsetavad saidid kipuvad olema rohkem kasutatav puuetega külastajatele, mis viib suurema rahulolu ja teisenduseni.
  • Juurdepääsuta saidid kahjustavad äri. 2019. aastal a Suurbritannia uuring leidis, et enam kui 4 miljonit inimest loobusid jaemüügiettevõttest nende juurdepääsetavustõkete tõttu. See kaotatud ettevõte, nn „Click-Away Pound”, oli 17,1 miljardit naela. See on miljardit. Ainuüksi Suurbritannias.
  • Potentsiaalsete klientide vabatahtlik eemaldamine on halb asi.

Ühised standardid ja probleemid

Õnneks on W3C-l (asutus, mis toodab paljusid standardeid, millele veeb tugineb) olemas standard, kuidas muuta veebisaidid juurdepääsetavaks. Seda nimetatakse Veebisisu juurdepääsetavuse juhised (WCAG). Vastavustasemeid on kolm (A, AA, AAA), kusjuures A on madalaim juurdepääsetavuse tase. Soovitan teil eesmärk AA tase.

Kahjuks on WCAG pikk, kuiv ja väga tehniline tekst, nii et vaatame ära, mida saate suhteliselt hõlpsalt teha ja saate oma paki eest suurima paugu. See ei ole kõik, mida peate teadma, kontrollnimekiri; see on levinumate vigade kontroll-loend ja puuetega inimeste sõnul on nende peamised blokeerijad koos praktiliste soovitustega probleemide lahendamiseks. Kõik välised lingid avanevad uuel vahelehel.

Click-Away Pound uuringus küsiti puuetega vastajatelt, mis olid neile ostude lõpetamisel peamised tõkked. Siin on peamised tõkked (lubatud oli mitu vastust):

  1. Liigse sisuga rahvarohked lehed – 66%
  2. reCAPTCHA testid – 59%
  3. Halb loetavus (kontrast, teksti paigutus) 56%
  4. Liikuvate piltide ja graafika tähelepanu hajutamine – 53%
  5. Halva lingi teave – 59% (77% ekraanilugejate kasutajatest)
  6. Vormide täitmine 56%

Kuidas parandada veebisaidi juurdepääsetavust

Esiteks pange tähele, et ükski viiest parimatest ei ole tehnilised probleemid – tegemist on kujunduse või copywritingu vigadega.

1) Liiga palju sisu

Lühidalt: jagage tekst pealkirjade ja täpploenditega lõikudeks. Kasutage lihtsat keelt.

On hästi teada, et kui valikute arv suureneb, kasvab ka teabe kogumiseks vajalik pingutus ja teha häid otsuseid. Sama on liiga suure sisuga – peagi muutub see üle jõu. Sisu oluliseks muutmine on aeganõudev käsitöö; nagu Mark Twain (väidetavalt) kirjutas: “Mul ei olnud aega lühikese kirja kirjutamiseks, seega kirjutasin selle asemel pika.”

Värske raamat Kirjutamine on kujundamine soovitab

Inimesed tahavad, et oleks võimalik pikki tekstilõike koormata, vaatamata nägemisele või helile, seetõttu on äärmiselt oluline struktureerida oma pikakujuline kirjutamine päiste, lühikeste lõikude ja muude sisu kujundamise parimate tavadega.

Niisiis:

  • Ainult ühte

    lehel.

  • Kasutage alapealkirju vabalt; see lagundab nägemiskasutajatele teksti tahvli, samas kui abistavate tehnoloogiate (nt ekraanilugejad) kasutajad saavad kasutada kiirklahvi rubriikide vahel hüppamiseks või päisestruktuurist sisu vaimse kaardi saamiseks.
  • Ärge jätke üht rubriiki vahele. Näiteks kui kasutate

    , veenduge, et sellele eelneb

    .

  • Kasutage HTML-is õigesti märgitud täpitähiseid (niimoodi!)
      ,
    • . Ekraanilugejad teatavad “10 üksuse loendist” (ja võimaldavad kasutajal neist üle hüpata).

    Kasutage tavalist inglise keelt

    Monzo Panga oma Juhend “Meie hääletoon” selgitab lihtsa keele tähtsust:

    2010. aastal viis USA advokaat Sean Flammer eksperimendi läbi. Ta palus 800 ringkonnakohtu kohtunikul toetuda kas traditsioonilisele „legalese” argumendile või argumendile, mida ta nimetas „lihtsa inglise keeles”.

    Kohtunikud eelistasid ülekaalukalt lihtsat ingliskeelset versiooni (66–34%) ja see eelistus ei sõltunud nende vanusest ega taustast.

    Flammeri märkmed (PDF) ingliskeelses versioonis:

    See on peaaegu lehe võrra lühem, nii et see välistab ilmselgelt tarbetud laused ja sõnad. Selle laused on keskmiselt 17,8 sõna, mitte 25,2 sõna.

    Ta järeldab:

    Nüüd on meil 25 aastat empiirilisi uuringuid, mis viivad möödapääsmatu järelduseni: kui soovite oma lugejat meeldida ja veenda, kirjutage lihtsas inglise keeles.

    2) ReCAPTCHA

    Lühidalt: ärge pange oma kasutajaid arendaja aja kokkuhoidmiseks hüppama läbi potentsiaalselt võimatute kõvade.

    Vastajad rääkisid sageli vanast ReCAPTCHA versioon:

    reCAPTCHA versioonid koos ebamäärase tekstiga, mille peate uuesti sisestama

    Ma näen vaeva piltidega ja pean sisestama numbreid või tähti. Sellisel kujul, kus ma pean klõpsama, millistel piltidel on pood või mis iganes, jätan alati mõned puudu või segaduses ja kasutan energiat, mida mul pole …

    ReCAPTCHA võnklike tähtede stiil on nüüd aegunud. Palju tavalisem on näha uuemat kehastust nimega „CAPTCHA reCAPTCHA pole” (tuntud ka kui „Ma ei ole robot ”), mis nõuab kasutajalt märkeruudu kinnitamist, et nad pole robotid ja mis kasutab kasutaja löömiseks salajast voodoo-d. Kui need mööduvad, pole edasine suhtlemine vajalik. Kui need ei õnnestu, kuvatakse järgmine väljakutse:

    Osaline ekraanipilt captchast, mis nõuab, et kasutaja klõpsaks kõikidele apelsinide väljadele

    Pidage meeles, et CAPTCHA tüüp, mis nõuab kasutajalt kõigi ruutude klõpsamist (näiteks) tänavasildiga, ei ole tingimata rahvusvaheline. Nagu kirjutab Terence Eden, CAPTCHA-d ei tõesta, et olete inimene – nad tõestavad, et olete ameeriklane.

    ReCAPTCHA kõige kättesaadavam vorm on reCAPTCHA v3 mis ei eelda kasutajaga suhtlemist, kuid peate testiga mitteseotud külastustega tegelemiseks rohkem pingutama:

    See on puhas JavaScripti API, mis tagastab skoori, andes teile võimaluse oma saidi kontekstis tegutseda: näiteks nõuda täiendavaid autentimisfaktoreid, saata modereerimisele postitust või visata roboteid, mis võivad sisu kraapida.

    3) Halb loetavus

    Lühidalt: veenduge, et tekstil oleks piisav kontrastsus, see oleks loetav ja poleks õigustatud.

    • Tagage piisav kontrastsus. Üks levinumaid juurdepääsu blokeerijaid veebis on halb kontrast teksti ja tausta vahel. W3C juhised nõuavad kontrastsuse suhet vähemalt 4,5: 1, välja arvatud suuremahulise teksti ja suuremahulise teksti piltide puhul, mille kontrastsuse suhe peaks olema vähemalt 3: 1 (logod ja juhuslik tekst on maksuvabad). Kontrastsuse suhteid saab teie jaoks mõõta palju utiliite; minu isiklik lemmik on Ada Rose Cannon’i suurepärane kontrastividin, mis on kasulik brauseri järjehoidja, mis tõstab esile teie lehe ebapiisava kontrastiga piirkonnad.
    • Ärge omage kogu kapitali rubriike. On tõendeid, et neid on raskem lugeda, kuna suurtähed on kõik ühekõrgused, nii et me ei tunne tavaliste sõnade kuju. Lisaks sõnastavad mõned ekraanilugejad suurtähtede rühmad justkui lühenditest (nt BBC, DOJ jne). Kui teil peavad olema kõik suurtähed, kirjutage need tavaliselt HTML-i ja teisendage need CSS-iga teksti teisendus: suurtähed.
    • Joondage tekst vasakule. (Parempoolse vasakule suunduvates keeltes, näiteks araabia või heebrea keeles, joondage paremalt tekst.) Ärge õigustage seda, kuna see raskendab düsleksiaga inimeste lugemist. Briti düsleksia ühingu stiilijuhend soovitab ka

      Kasutage sans-serif-fonte, näiteks Arial ja Comic Sans, kuna tähed võivad tunduda vähem rahvarohked. Alternatiivide hulka kuuluvad Verdana, Tahoma, sajandi gooti stiilis, Trebuchet, Calibri, Open Sans.

    4) Piltide ja graafika häirimine

    Lühidalt: laske kasutajatel peatada igasugune liikumine; austama nende opsüsteemi seadeid; ärge videot automaatselt esitage.

    Üks Click-Away Pound küsitlusele vastaja kirjutas,

    Saidid, mida varem kasutasin vähese väljaandega, on nüüd probleemiks muutumas, kuna nad võtavad nüüd sisseoste teisaldades ja laadides pidevalt rohkem kuulutusi.

    WCAG-i kõige põhitaseme jaoks on vajalik „igasuguse liikuva, vilkuva või keritava teabe jaoks, mis (1) käivitub automaatselt, (2) kestab üle viie sekundi ja (3) on esitatud paralleelselt muu sisuga, on kasutaja peatada, peatada või peita, välja arvatud juhul, kui liikumine, vilkumine või kerimine on osa tegevusest, kus see on hädavajalik ”.

    Häirimine on tüütu – eriti ADHD või muude kognitiivsete häiretega inimeste jaoks. Kuid liikumine ja vilkumine võivad põhjustada ka krampe, seetõttu nõuavad WCAG-i juhised, et sisu ei peaks ühe sekundi jooksul vilkuma rohkem kui 3 korda..

    Austage kasutaja animatsioonide valikut

    Kõik suuremad opsüsteemid võimaldavad kasutajal ekraanil eelistada vähendatud liikumist – võib-olla seetõttu, et neil on liikumisest tingitud vestibulaarspektri häire. Teie veebisait tuvastab, kas kasutaja on seda teinud CSS-iga eelistab vähendatud liikumist meediapäring.

    Siin lubame nuppu animeerida ainult siis, kui kasutaja pole eelistusi avaldanud:

    @media (eelistab vähendatud liikumisega: ei eelista) {
    nuppu {
    / * "vibreerivad" võtmekaadrid on määratletud mujal * /
    animatsioon: vibreerima 0,3 s lineaarselt lõpmatu mõlemad;
    }
    }

    Kui soovite moderniseerida saiti, kus on palju animatsioonireegleid, võib juhtuda järgmine peatage kõik varem deklareeritud CSS-i animatsioonid:

    @media (eelistab vähendatud liikumisega: vähenda) {
    *,
    * :: enne,
    * :: pärast {
    animatsiooni kestus: 0,001 s! oluline;
    ülemineku kestus: 0,001 s! oluline;
    }
    }

    Võib-olla võiksite kaaluda kasutaja opsüsteemi eelistuste austamist oma veebisaidi kujundamine pimedas režiimis.

    5) Halva lingi teave

    Lühidalt: tehke lingid tuvastatavaks ainulaadse lingitekstiga. Hoiatage kasutajaid, kui link avab uue vahekaardi või faili.

    Viletsate linkide üheks peamiseks põhjuseks on sageli halb copywriting. Enamik ekraanilugejaid võimaldab kasutajal kiiresti näha lehel olevate linkide loendit (enimkasutatud kommertsliku ekraanilugeja JAWS-is on klaviatuuri otsetee Ins + F7; tasuta NVDA ekraanilugeja, sama klaviatuuri otsetee avab elementide loendi, mis sisaldab lehe linke, pealkirju ja orientiire).

    Kui aga igal lingil on tekst „Klõpsake siin” või „Loe edasi”, ilma et oleks midagi muud nende eristamiseks, on see mõttetu. Lihtsaim viis selle lahendamiseks on lihtsalt unikaalse lingiteksti kirjutamine, kuid kui see pole võimalik, saate abitehnoloogia lingi teksti üle sõita, kasutades igal lingil ainulaadset aaria-sildi atribuuti..

    Siit leiate hea näite Joomla veebisait:

    Joomla veebisait, mis näitab kahte erinevat lugu, millest igaüks on identne

    Nähtavat lingi teksti on lihtsalt „loe lähemalt”, kuid Joomla kasutab aaria-silt atribuudid, mis muudavad iga abistava tehnoloogia ainulaadseks:

    Loe rohkem
    
    Loe rohkem

    Kuna aaria-silt teksti kasutatakse lingiteksti asemel abitehnoloogiate abil, soovitab W3C aaria-sildis kasutatava teksti alustamiseks lingis kasutatava tekstiga, kuna “see võimaldab kasutajate vahel järjepidevat suhtlust”.

    Märge: Mõni halb nõuanne, mida endiselt näen vanadel saitidel, on lisada selgitavat teksti linkidele, mis kasutavad pealkiri atribuut:

    Loe edasi>

    Ära tee seda. pealkiri ei ole enamiku ekraanilugejate jaoks avatud (arendajad kasutasid seda märksõnade jaoks SEO-eesmärkidel, nii et ekraanilugejate müüjad keelasid selle vaikimisi) ja brauserid esitavad pealkirja atribuudid tööriistavihjetena, mis on hiire kasutajatel saadaval vaid hõljutades kursorit.

    Lingid peaksid välja nägema lingid

    Vaikimisi rõhutavad brauserid linke. Parem on seda mitte muuta, kuid kui kaotate parklaga selle teemaga kakluse, peab lingiteksti kontrastsuse suhe olema ümbritsevast sidumata tekstist 3: 1 ja see peaks andma mõne värvivaba tähise ”Et need on lüli hõljumisel või fokuseerimisel, näiteks:

    a: hõljutage, a: fookus {teksti-kaunistamine: alla joonitud;}

    Fookusstiil põhjustab lingi allajoonimise, kui hiireväline kasutaja keskendub sellele klaviatuuri, pliiatsi või häälsisendi abil. Üldiselt tuleks alati, kui mõnel lehel on hõljumisstiil, pöörata sellele ka fookusstiil.

    Värvitu tähis (meie puhul allajoon) tagab, et nägemispuudega või värvipimedusega külastajad näevad muutust hõljukil või fookusel. (Ekraanilugejad teatavad enne lingi teksti automaatselt lingi.)

    Teatage inimestele, kui link avab uue vahelehe / lehe

    See võib külastaja jaoks segadust tekitada, kui lingi aktiveerimine avab uue vahekaardi või uue akna, eriti kui seda teevad ainult mõned lehel olevad lingid (näiteks uue vahekaardi avavad ainult välised lingid). Kui peate seda tegema, peaksite kasutajat sellest hoiatama kas lingi tekstis või kasutades ülaltoodud aria-etiketi meetodit.

    Teatage inimestele, kas link on faili

    Kui link on mõnele failile (näiteks PDF-ile või videole), öelge kasutajale lingi tekstis. Ära peida seda sisse aaria-silt, kuna see võib olla kasulik paljudele silmanähtavatele kasutajatele (mõned mobiiltelefonid ei saa näiteks .docx-faili avada). Kui see on suur fail, kaaluge kasutaja hoiatamist ligikaudse suurusega; nad ei soovi 3G-võrgu kaudu suurt videofaili alla laadida.

    Võite kasutada ka lae alla atribuut, mille tõttu brauser avab operatsioonisüsteemi loomuliku faili allalaadimise dialoogi. Kui see kõik kokku panna, näeb kood välja järgmine:

    Aastaaruanne (PDF, 240 MB)

    6) Veel üks disainiviga: fookusrõnga eemaldamine

    Lühidalt: veenduge, et klaviatuuri kasutaja näeks alati, kuhu ta on praegu keskendunud.

    Me oleme maininud : fookus stiile enne. Need on hindamatu visuaalne näitaja neile inimestele, kes ei saa hiirt mingil põhjusel kasutada: võib-olla on neil RSI, Parkinsoni või hulgiskleroos. Vaikimisi kuvavad brauserid hetkel fokuseeritud elemendil fookusrõnga. Siin on minu isikliku saidi link Avaleht, mis on keskendunud Chromiumi brauserile:

    Chromiumi vaikimisi fookusringi lingi ümber olev pilt (mis on ka pilt)

    Kuid mõned inimesed peavad seda hiire kasutamisel esteetiliselt ebameeldivaks ja lülitavad selle CSS-iga välja, jättes saidi klaviatuurikasutajatele ligipääsmatuks.

    Sisestage uus Firefoxi juurutatud standard, mida nimetatakse : fookus-nähtav. See rakendab elemendile fookusrõnga, kui selle on saavutanud klaviatuur või hiireväline osutusseade, kuid see ei näita hiirekasutajatele midagi. Kuna seda toetatakse ainult Firefoxis (kirjutamise ajal), Patrick Lauke soovitab järgmist CSS-i, et kenasti kõigi brauseritega mängida:

    nupp: fookus {/ * mõned põnevad nupufookuse stiilid * /}
    nupp: fookus: mitte (: fookus-nähtav) {
    / * tühista kõik ülaltoodud fokuseeritud nupustiilid
    kui nupul on fookus, kuid brauser tavaliselt ei tee seda
    näita vaikimisi fookusstiile * /
    }
    nupp: fookus nähtav {/ * mõni veel * veel * põnev nupu fookuse stiil * /}

    7) Vormi täitmine

    Lühidalt: kujundage vormiväljad, mis näevad välja vormiväljad, igaüks on seotud sildiga. Ärge keelake automaatset täitmist.

    Arvestades vormide olulist tähtsust e-kaubanduse saitide jaoks, hämmastab mind, kui palju juurdepääsematuid vorme ma näen. Sageli on selle põhjuseks see, et vanad brauserid ei võimaldanud vormielementide kujundamisel suurt midagi ette võtta, mistõttu võltsisid arendajad neid teiste HTML-i elementidega. Kaasaegsed brauserid lubavad atraktiivsed märkeruudud, raadionupud, kohandatud komponendid ja liitkastid, juurdepääsetavad automaatse täitmise juhtnupud ja veel.

    Automaattäitmine on teie sõber

    Brauserite vormide automaatse täitmise lubamiseks on vaja, et külastajad teeksid vähem, nii et nad täidavad suurema tõenäosusega vormi ja registreeruvad / ostavad teie toote. Brauserites automaatne täitmine: sügav sukeldamine on eBay selle kohta suurepärane artikkel (ja nad peaksid seda teadma).

    Automaatne täitmine on ka praegu ainus piisav tehnika AA vastavuse saavutamiseks Edukriteerium 1.3.5: määrake sisendi eesmärk.

    Tehke vormiväljad välja nagu vormiväljad

    Vaikimisi kuvavad brauserid vormi sisestusväljad kastidena. Lahendage need ääriste, polstrite ja ääristega, kuid hoidke neid kastidena. Paljud disainerid järgisid Google’i 2017. aasta eelse materjalide kujundamise mustrit, mille kohaselt kasutajal oli teksti sisestamiseks üks rida:

    Vana materjali kujundussisend, horisontaalse joonega, mitte ristkülikukujulise kastiga

    Google leidis aga, et vanade tekstiväljade all olev rida polnud mõnele kasutajale selge, sageli segi ajatud jagajaga ja muutis kujundust. Sees kasutatavuse test 600 osalejaga avastasid nad selle

    suletud tekstiväljad ristkülikukujulise (kasti) kujuga toimivad paremini kui need, millel on rea olemasolu … Täna kuvatakse neid uusi tekstivälju Google’i toodetes alates konto sisselogimislehtedest kuni Google’i vormideni.

    Kui soovite kaaluda Google’i täielikku Material Design UI teeki, lugege Lõpetage Material Design tekstiväljade kasutamine! autor Matsuko Friedland, et näha, kas see vastab teie vajadustele.

    Märgistage kõik vormiväljad

    Kõik vormiväljad (tekstisisestused, märkeruudud, raadionupud, liugurid jne) peavad olema märgistatud. Parim viis selleks on HTML-i kasutamine ; nagu WCAG ütleb, vastavad “standardsed HTML-i juhtelemendid sellele edukriteeriumile juba siis, kui neid kasutatakse vastavalt spetsifikatsioonile”.

    Siin on demo, mille tegin sildistamata vormiväli vs märgistatud vormiväli. Need näevad välja identsed, kuid ülemisel ei ole korralikku silti, teisel aga teist. Klõpsake alumise teksti tekstisildil ja näete, et see keskendub seotud sisendile.

    võlts vs päris sildi võrdlus

    See muudab sisendi fokuseerimise palju lihtsamaks mootoriga juhtimisraskustega inimesele – või võib-olla ka teile, proovides konarliku rongi pisikesel ekraanil märkida pisike ruut. See on ülioluline ka ekraanilugeja kasutajatele, kes vahekaardil olevad väljad vahekaardil vahetavad (vaikimisi on lingid ja vormiväljad vaikimisi sakitavad); kui nad sisestatakse sisestusväljale, teatab ekraanilugeja sellega seotud sildi sisu.

    Selle kood on lihtne. Sisestusväljale antakse kordumatu ID ja silt seostatakse sellega, kasutades jaoks atribuut:

    
    

    Siltide peitmine

    Mõnikord ei pruugi te vajada nähtavat silti. Või disaineril pole ja te ei soovi parklas järjekordset kaklust. Igatahes on siin näide, kui sisendile eelnev silt “Otsi” tundub ülepaisutatud.

    Sisestusväli, millel on nupp tagant otsimisega

    Sisestusvälja saame seostada tekstiga „Otsi”, mis on nupu Esita sisu abil aaria-sildistatud:

    
    

    Oleksime võinud kasutada aaria-silt (millega kohtusime varem linkidest rääkides):


    Kuid alati on parem eelistada lehel nähtavat teksti, sest see tõlgitakse, kui lehte juhitakse tõlkeriista kaudu, HTML-atribuutides „peidetud” teksti aga mitte. (Kübaraots Adrian Rosellile selle näpunäite eest tema suurepärasest artiklist Minu prioriteet kontrollmeetodi märgistamise meetodites.)

    Kõige tavalisemad vead miljonitel populaarsematel avalehtedel

    Oleme vaadelnud e-kaubanduse saitide peamisi tõkkeid, nagu on teatanud mingisuguse kahjustusega kasutajad. Vaatame nüüd palju laiemat saitide komplekti – 1 000 000 parima veebisaidi avalehti, analüüsib WebAIM automaatselt augustis 2019. 98% -l analüüsitud lehtedest oli vähemalt üks viga. Kõige tavalisemad vead on

    1. Madala kontrastsusega tekst (86,1%)
    2. Piltide alternatiivne tekst puudub (67,9%)
    3. Tühjad lingid (58,9%)
    4. Puuduvad vormi sisestussildid (53,2%)
    5. Puuduv dokumendikeel (30,5%)

    Eespool on käsitletud madalat kontrasti, linke ja vormi sisendeid. Vaatame nüüd, kuidas saaksime vältida teisi väga levinud vigu.

    8) Pakkuge kõigi piltide, video ja heli jaoks teksti alternatiivid

    Lühidalt: kogu pildi või video kaudu edastatav teave peab olema tekstiliselt samaväärne.

    Iga peab olema alternatiivne tekst („alt tekst”), mida saab edastada nägemispuudega külastajatele või madala ribalaiusega / kallite andmepakettidega külastajatele, kes on oma brauserites pildid välja lülitanud. See hõlmab teksti pilte.

    Siin on põhireeglid:

    • Kui pilt on puhtalt dekoratiivne, peab sellel olema tühi alttekst: alt = "". (Kuid puhtalt dekoratiivsed pildid peaksid CSS-is vist olema.)
    • Kui pilti kirjeldatakse kehatekstis, peaks sellel olema tühi alt tekst (alt = ""), korduste vältimiseks. Kuid ole ettevaatlik, kui see on nii sees
      – vaata Kuidas sa aru saad? rohkem.
    • Kui pilt on lingi ainus sisu (näiteks avalehele minemiseks võib klõpsata teie organisatsiooni logol), peaks alternatiivne tekst kirjeldama lingi sihtkohta. Näiteks, alt = "avaleht".
    • Ärge kasutage ikooni fonte; need võivad düsleksiaga inimestele olla tõeliselt halvad. Kui te neid kasutate, teisendage need SVG-ks.

    Video ja heli alternatiivtekst

    Ärge unustage, et helisisu vajab kuulmispuudega inimestele alternatiivset teksti. See tähendab netisaadete ärakirju ja videote subtiitreid. Ja veelkord: ärge esitage meediume automaatselt.

    9) Lisage õige dokumendikeel

    Lühidalt: laske abitehnoloogial teada keelt, milles teie tekst on.

    30% kodulehtedest ei deklareeri keelt, milles nad on kirjutatud, mis võib need ekraanilugejate jaoks segadust tekitada. See on oluline, kuna sõna “kuus” hääldatakse väga erinevalt, kui lause on näiteks inglise või prantsuse keeles.

    Seda on lihtne lahendada, kui lisate HTML-elemendile lang-atribuudi:

    „En” teatab ekraanilugejale (või tõlketarkvarale), et see leht on inglise keeles. „Es” on hispaania keel, „fr” on prantsuse keel jne. Enamike keelte puhul on keelemärgendit üsna lihtne kindlaks teha. W3C-l on juhend Keelesildi valimine.

    Kui leht sisaldab sisu muus keeles, kui selle peamine deklareeritud keel, lisage selle sisu ümbritsevale elemendile keeleatribuut. Näiteks inglise keeles kuulutatud lehel:

    Kui soovite vestelda matador, mõnes lahe kabana
    Ja kohtume senoritas hinde järgi, Espana por favor

    10) Aidake külastajal teie sisust lahti saada

    Lühidalt: kasutage HTML-i maamärkide elemente, et aidata abitehnoloogia kasutajatel teie sisust aru saada ja selles navigeerida.

    Kui mõni nähtav külastaja jõuab teie lehele, saab ta seda hõlpsalt visuaalselt skannida, et aru saada, kus on navigeerimine ja kus algab peamine sisu. Ekraanilugeja kasutaja ei saa seda teha. Kuid HTML5 annab meile nende alade tähistamiseks mõned uued sildid ja abitehnoloogiatel on otseteed, mis võivad maamärkidele (näiteks üle minna) päis, jalus, navigeerimine jms.

    Siin on kuue minuti pikkune video, mille tegin koos veebiarendaja ja ekraanilugeja kasutaja Léonie Watsoniga sellest, kuidas ta kasutab oma isiklikku saidil navigeerimiseks ekraanilugejat järgmiste semantikate uurimiseks:

    • Mähkige põhisisu, st asjad, mis pole päised, esmane navigatsioon ega jalus, a-kausta
      element. Peaaegu kõigil juhtudel peaks seda olema ainult üks
      lehel. Kõik brauserid (IE9 +) võimaldavad teil seda stiilida ja abitehnoloogiad teavad, mida sellega teha.
    • Mähi päis (brändi logo, rihmajoon, lehe pealkiri) a
      element.
    • Mähi jalus (juriidiline sisu, kontaktandmed, autoriõiguse teatis jne) a
    • Märkige oma peamine navigeerimine, kasutades
        mähitud a element. Selle saab pesastada
        kui see sobib lehe visuaalse kujundusega.
      • Reklaam ja vähemoluline sisu tuleks kokku panna
      • Kui teil on lehel mitu toodet / videot / uudist / ajaveebipostitust, mähkige neist kõik üksus
        element.

      Oma ekraanilugejate kasutajate uuring, WebAIM leidis, et 26% ekraanilugeja kasutajatest kasutab neid orientiire sageli või alati lehe sirvimisel.

      Lisaks mähitakse diskreetne sisutükk pakendisse

      aitab Apple’i WatchOS-i sisu optimaalselt kuvada. Vaadake minu artiklit Semantilise HTML-i praktiline väärtus selle kohta rohkem.

      11) Kasutage HTML-i õigesti

      Lühidalt: mõista HTML-elementide semantikat ja vaikimisi käitumist; kasutage oma sisu jaoks õiget elementi.

      Selles artiklis on tavaline teema olnud õigete HTML-elementide kasutamine. Kasutades a silt omab sisseehitatud brauseri käitumist, mis keskendub sellega seotud sisestusväljale; kasutades

      on parem kui

      kuna see võimaldab ekraanilugeja kasutajatel liikuda otse olulise sisu juurde, samal ajal kui see on täiesti tähelepandamatu neile, kes ekraanilugejat ei kasuta.

      Teine näide on a

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