Seznam spletnih dostopnosti

Dostopnost je praksa, ki zagotavlja, da so spletne strani enako dostopne invalidom, da imajo enak dostop do blaga in storitev, ki jih spletna mesta zagotavljajo. Je sestavni del profesionalnega spletnega oblikovanja in razvoja.


Contents

Zakaj bi vas skrbelo? Dostopnost?

Obstajajo številni razlogi, zakaj morajo razvijalci, oblikovalci in njihovi delodajalci / stranke zagotoviti, da je dostopnost zgoden in sestavni del procesa spletnega razvoja.

  • Na številnih ozemljih, kot so ZDA, EU, Združeno kraljestvo, Izrael in Japonska, je zakonska zahteva, da ne diskriminiramo ljudi zaradi invalidnosti. V ZDA lani, Vloženih je bilo 2.235 novih tožb na spletnem mestu ADA na zveznem sodišču. To je ena na uro.
  • Dostopna mesta so ponavadi bolje kodirana, bolj robustna in se dobro uvrščajo na spletnih iskalnikih.
  • Običajno so dostopna spletna mesta bolj uporabna za obiskovalce, ki niso invalidi, kar vodi k večjemu zadovoljstvu in spreobrnitvi.
  • Nedostopna mesta so slaba za poslovanje. Leta 2019 je a Anketa v Veliki Britaniji ugotovili, da je več kot 4 milijone ljudi opustilo spletno mesto na drobno zaradi ovir za dostop. Ta izgubljeni posel, “funt za klik”, je znašal 17,1 milijarde funtov. To je milijarda. Samo v Veliki Britaniji.
  • Slabo je, da prostovoljno odvračamo potencialne stranke.

Skupni standardi in problemi

Na srečo ima W3C (organ, ki proizvaja številne standarde, na katere se splet zanaša) standard, kako narediti dostopna spletna mesta. To se imenuje Smernice za dostop do spletnih vsebin (WCAG). Obstajajo tri stopnje skladnosti (A, AA, AAA), pri čemer je “A” najnižja raven dostopnosti. Priporočam, da ciljate na stopnjo AA.

Na žalost je WCAG dolg, suh in zelo tehnično prebran, zato si poglejmo, kaj lahko naredite razmeroma enostavno in dobite največji znesek za svoj dolar. To ni kontrolni seznam vsega, kar morate vedeti; je seznam najpogostejših napak in napake, za katere ljudje s posebnimi potrebami pravijo, da so glavni zaviralci, s praktičnimi predlogi za odpravo težav. Vse zunanje povezave se odprejo na novem zavihku.

V anketi Click-Away Pound so anketiranci z vprašanji invalidnosti vprašali, kaj so glavni bloki za zaključek nakupov. Tu so zgornje ovire (dovoljenih je bilo več odgovorov):

  1. Prenatrpane strani s preveč vsebine – 66%
  2. RECAPTCHA testi – 59%
  3. Slaba čitljivost (kontrast, postavitev besedila) 56%
  4. Odvračanje gibljivih slik in grafike – 53%
  5. Slabe informacije o povezavah – 59% (77% za uporabnike bralnika zaslona)
  6. 56% izpolnjevanje obrazca

Kako izboljšati dostopnost spletnega mesta

Najprej upoštevajte, da noben top 5 ni tehnična težava – gre za napake pri oblikovanju ali kopiranju.

1) Preveč vsebine

Na kratko: razčlenite besedilo na razdelke z naslovi in ​​seznami s črtami. Uporabite preprost jezik.

Znano je, da se s povečanjem števila odločitev tudi poveča napor, potreben za zbiranje informacij in sprejemajo dobre odločitve. Enako je s preveč vsebine – kmalu postane prešerno. Razdelitev vsebine na osnovno je zamudna obrt; kot je domnevno napisal Mark Twain: “Nisem imel časa, da bi napisal kratko pismo, zato sem namesto tega napisal dolgo.”

Nedavna knjiga Pisanje je oblikovanje predlaga

Ljudje želijo prelistati dolge bloke besedila, ne glede na pogled ali zvok, zato je izredno pomembno, da svoje pisanje dolge oblike oblikujete z glavo, kratkimi odstavki in drugimi najboljšimi praksami oblikovanja vsebine.

Torej:

  • Imejte samo enega

    na strani.

  • Uporabljajte podnaslove svobodno; za vidne uporabnike razbije „ploščo“ besedila, medtem ko lahko uporabniki pomožnih tehnologij, kot so bralniki zaslona, ​​s tipko na bližnjici skočijo med naslove ali pridobijo miselno karto vsebine iz strukture naslovov..
  • Ne preskočite stopnje naslovov. Na primer, če uporabljate

    , se prepričajte, da je pred njim

    .

  • Uporabite označene sezname (kot je ta!), Pravilno označene v HTML-ju kot
      ,
    • . Bralniki zaslona objavijo »Seznam 10 elementov« (in uporabniku omogočijo, da skoči čez njih).

    Uporabite navaden angleški jezik

    Banka Monzo Bank Vodič “Naš ton glasu” pojasni pomen preprostega jezika:

    Leta 2010 je ameriški odvetnik Sean Flammer izvedel poskus. Od 800 sodnikov v okrožju je prosil, naj se spopadejo s tradicionalnim argumentom „legalese“ ali s tistim, ki ga je imenoval „navadna angleščina“.

    Sodniki so v veliki meri dali prednost navadni angleški različici (66% do 34%) in ta prednost je veljala ne glede na njihovo starost ali starost.

    Flammer note (PDF) navadne angleške različice:

    Skrajšana je za skoraj eno stran, tako da očitno odpravlja nepotrebne stavke in besede. V stavkih je povprečno 17,8 besed, v nasprotju s 25,2 besedami.

    Zaključi:

    Zdaj imamo 25 let empiričnih raziskav, ki vodijo k neizogibnemu zaključku: če želite ugajati in prepričati svojega bralca, pišite v navadni angleščini.

    2) RECAPTCHA

    Na kratko: ne pustite, da vaši uporabniki skočijo skozi morebitne nemogoče obročke, da bi prihranili čas razvijalca.

    Anketiranci so pogosto govorili o starem Različica ReCAPTCHA:

    različice reCAPTCHA z brezskrbnim besedilom, ki ga morate znova vnesti

    Borim se s slikami in moram vtipkati številke ali črke. V primeru, ko moram klikniti, katere slike imajo trgovino ali kaj drugega, vedno pogrešam nekatere ali se zmedem in porabim energijo, ki je nimam …

    Slog nihajnih črk reCAPTCHA je zdaj opuščen. Veliko pogosteje je videti novejšo inkarnacijo, imenovano “No CAPTCHA reCAPTCHA” (znano tudi kot “Nisem robot), zaradi česar mora uporabnik potrditi polje, ki potrjuje, da ni robot in ki skrivnega voodoo uporablja za oceno uporabnika. Če preidejo, nadaljnje sodelovanje ni potrebno. Če pa ne uspejo, se prikaže nadaljnji izziv:

    Delni posnetek zaslona captcha, ki zahteva, da uporabnik klikne vse kvadrate, ki prikazujejo pomaranče

    Upoštevajte, da vrsta CAPTCHA, ki od uporabnika zahteva, da klikne vse kvadrate z (recimo) uličnim znakom, ni nujno mednarodna. Kot piše Terence Eden, CAPTCHA ne dokazujejo, da ste človek – dokazujejo, da ste Američan.

    Najbolj dostopna oblika reCAPTCHA je reCAPTCHA v3 ki ne potrebuje nobene interakcije z uporabnikom, vendar morate opraviti več dela pri obiskih, ki niso uspeli preizkusu:

    To je čisti JavaScript API, ki vrne rezultat in vam omogoča, da ukrepate v kontekstu svojega spletnega mesta: na primer, da potrebujete dodatne faktorje za preverjanje pristnosti, pošiljanje objave v zmerne namene ali ustavljanje robotov, ki morda strgajo vsebino.

    3) Slaba čitljivost

    Na kratko: preverite, ali je besedilo ustreznega kontrasta, berljivo in da ni utemeljeno.

    • Zagotovite ustrezen kontrast. Eden najpogostejših zaviralcev dostopa v spletu je slab kontrast med besedilom in ozadjem. Smernice za W3C zahtevajo kontrastno razmerje najmanj 4,5: 1, razen za obsežno besedilo in slike velikega besedila, ki bi moralo imeti kontrastno razmerje vsaj 3: 1 (logotipi in „naključna“ besedila so izvzeti). Obstaja veliko pripomočkov, ki lahko merijo kontrastna razmerja za vas; moj osebni favorit je Ada Rose Cannon odlična kontrastni gradnik, ki je uporaben zaznamek brskalnika, ki poudarja področja nezadostnega kontrasta na vaši strani.
    • Nimate vseh kapitalskih postavk. Obstajajo dokazi, da jih je težje brati, ker so velike črke enake višine, zato ne moremo prepoznati oblike običajnih besed. Poleg tega bodo nekateri bralniki zaslonov črkovali skupine velikih črk, kot da so kratice (na primer BBC, DOJ itd.). Če morate imeti vse naslove velikih začetnic, jih v običajnem primeru napišite v HTML in jih preoblikujte s CSS preoblikovanje besedila: velika črka.
    • Besedilo poravnajte z levo. (Za strani v jezikih z desne na levo, kot sta arabščina ali hebrejščina, besedilo poravnajte z desno.) Ne utemeljite, saj ljudem z disleksijo to otežuje branje. The Vodnik po stilu Britanskega združenja za disleksijo tudi predlaga

      Uporabite pisave sans serif, kot sta Arial in Comic Sans, saj so črke lahko manj natrpane. Med alternativami so Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) Moteče slike in grafike

    Na kratko: dovolite uporabnikom, da ustavijo vsako gibanje; spoštujte njihove nastavitve operacijskega sistema; ne predvajajte videoposnetka samodejno.

    Eden od anketirancev na anketo Click-Away Pound je napisal,

    Spletna mesta, ki sem jih uporabljala z malo izdajami, zdaj postajajo težava, saj zdaj prevzemajo premikajoče se oglase in nenehno nalagajo več oglasov, ko kupujete..

    Najosnovnejša stopnja WCAG zahteva: “Za vse premikajoče se, utripajoče ali drseče informacije, ki se (1) začnejo samodejno, (2) traja več kot pet sekund in (3) se predstavijo vzporedno z drugimi vsebinami, obstaja mehanizem uporabnik začasno ustavi, ustavi ali skrije, razen če je premikanje, utripanje ali drsenje del dejavnosti, kjer je to nujno. “.

    Motenje je moteče – zlasti za osebe z ADHD ali drugimi kognitivnimi okvarami. Toda gibanje in utripanje lahko povzroči tudi napade, zato WCAG smernice zahtevajo, da vsebina v 1 sekundnem obdobju ne utripa več kot 3-krat..

    Spoštujte izbiro uporabnika za animacije

    Vsi glavni operacijski sistemi omogočajo uporabniku, da izrazi željo po zmanjšanem gibanju na zaslonu – morda zato, ker ima motnjo vestibularnega spektra, ki jo sproži gibanje. Vaše spletno mesto lahko zazna, ali je uporabnik to storil s CSS raje zmanjšano gibanje medijska poizvedba.

    Tu dovoljujemo animiranje gumba samo, če uporabnik ni izrazil nobenih želja:

    @media (raje zmanjšano gibanje: brez nastavitve) {
    gumb {
    / * `vibrirajo` ključni okviri so definirani drugje * /
    animacija: vibrirajte linearno neskončno 0,3 s oboje;
    }
    }

    Če želite posodobiti spletno mesto s številnimi pravili za animacijo, je mogoče naslednje ustavi vse prej objavljene animacije CSS:

    @media (raje zmanjšano gibanje: zmanjša) {
    *,
    * :: prej,
    * :: po {
    animacija-trajanje: 0,001s! pomembno;
    prehodno trajanje: 0,001s! pomembno;
    }
    }

    Glede spoštovanja uporabnikovih operacijskih sistemov boste morda želeli razmisliti oblikovanje vašega spletnega mesta za temen način.

    5) Slabe informacije o povezavah

    Na kratko: povezave naj bodo prepoznavne z edinstvenim besedilom povezav. Uporabnike opozorite, če bo povezava odprla nov zavihek ali datoteko.

    Eden glavnih vzrokov za slabe povezave je pogosto slabo kopiranje. Večina bralnikov zaslona omogoča uporabniku, da hitro vidi seznam povezav na strani (v najpogosteje uporabljanem komercialnem bralniku zaslonov, JAWS, je bližnjica na tipkovnici Ins + F7; v brezplačno bralnik zaslonov NVDA, ista bližnjica na tipkovnici prikazuje seznam elementov, na katerem so navedene povezave, naslovi strani in točki).

    Če pa ima vsaka povezava besedilo “Klikni tukaj” ali “Preberi več”, z nič več, kar bi jih razlikovalo, je to neuporabno. To najlažje rešite tako, da preprosto napišete edinstveno besedilo povezave, če pa to ni mogoče, lahko besedilo povezave preglasite za pomočno tehnologijo z uporabo edinstvenega atributa aria-label v vsaki povezavi.

    Tu je dober primer iz Spletna stran Joomla:

    Spletna stran Joomla, ki prikazuje dve različni zgodbi, vsaka z enakimi

    Vidno besedilo povezave je preprosto “preberi več”, vendar Joomla uporablja aria-label atribute, s katerimi je vsaka edinstvena podporni tehnologiji:

    Preberi več
    
    Preberi več

    Zaradi aria-label besedilo bo namesto besedila povezave uporabljeno s pomočjo podpornih tehnologij, W3C priporoča, da se besedilo, uporabljeno na aria-nalepki, začne z besedilom, ki je v povezavi, saj “bo to omogočilo dosledno komunikacijo med uporabniki”.

    Opomba: Nekaj ​​slabih nasvetov, ki jih še vedno vidim na starih spletnih mestih, je dodajanje obrazložitvenih povezav na povezave z uporabo naslov atribut:

    Preberite več>

    Ne delaj tega. The naslov ni izpostavljen večini bralcev zaslonov (razvijalci so ga uporabljali za ključne besede za namene “SEO”, zato so ga prodajalci bralnikov zaslona privzeto onemogočili), brskalniki pa naslove atribute predstavljajo kot “namigi”, ki so na voljo le miškim uporabnikom.

    Povezave naj bi izgledale kot povezave

    Brskalniki privzeto poudarjajo povezave. Najbolje je, da tega ne spremenite, če pa se na parkirišču z oblikovalcem izgubite, se mora besedilo povezave imeti v kontrastnem razmerju 3: 1 z okoliškim besedilom brez povezave in mora imeti nekaj “barvnega označevalca” “Da so povezava, ko lebdimo ali osredotočimo, na primer:

    a: lebdite, a: poudarek {urejanje besedila: podčrtaj;}

    Slog ostrenja povzroči poudarjanje povezave, ko se uporabnik, ki ni miš, usmeri nanjo s tipkovnice, pisala ali glasovnega vnosa. Na splošno je treba vsakič, ko je nekaj na strani, imeti slog letečega kazalca, dati tudi fokusni slog.

    „Označevalnik brez barve“ (v našem primeru podčrtaj) zagotavlja, da bodo obiskovalci s slabim vidom ali barvno slepoto opazili spremembo na levo ali fokusu. (Bralniki zaslona samodejno objavijo povezavo pred besedilom povezave.)

    Povejte ljudem, če povezava odpre nov zavihek / stran

    Obiskovalca je lahko zmede, če z aktiviranjem povezave odpre nov zavihek ali novo okno, zlasti če to storijo le nekatere povezave na strani (na primer samo zunanje povezave odprejo nov zavihek). Če morate to storiti, morate opozoriti uporabnika bodisi v besedilu povezave bodisi z uporabo metode aria-label zgoraj.

    Povejte ljudem, če je povezava do datoteke

    Če je povezava do datoteke (na primer PDF ali videoposnetek), obvestite uporabnika v besedilu povezave. Ne skrivaj noter aria-label, saj je to lahko koristno za številne vidne uporabnike (nekateri mobilni telefoni ne morejo odpreti .docx datoteke, na primer). Če gre za veliko datoteko, razmislite, kako uporabnika opozoriti na približno velikost; morda ne bodo želeli prenesti velike video datoteke v 3G.

    Uporabite lahko tudi Prenesi atribut, ki povzroči, da brskalnik odpre dialog o prenosu izvornih datotek operacijskega sistema. Če to vse skupaj sestavimo, bo koda videti približno tako:

    Letno poročilo (PDF, 240 MB)

    6) Še ena napaka pri oblikovanju: odstranjevanje žarišča za ostrenje

    Na kratko: poskrbite, da bo uporabnik tipkovnice vedno videl, kam so trenutno osredotočeni.

    Omenili smo : fokus slogi prej. So neprecenljiv vizualni kazalnik za tiste ljudi, ki miške ne morejo uporabljati iz kakršnega koli razloga: morda imajo RSI ali Parkinsonovo ali multiplo sklerozo. Brskalniki privzeto prikažejo fokusni obroč na trenutno osredotočenem elementu. Tu je povezava Domov na mojem osebnem spletnem mestu, osredotočena na Chromium brskalnik:

    Posnetek zaslona privzetega ostrenja za Chromium okoli povezave (ki je tudi slika)

    Vendar nekateri menijo, da je to estetsko neprijetno, ko uporabljajo miško, in jo izklopijo s CSS-om, s čimer spletno mesto pusti nedostopno uporabnikom tipkovnice.

    Vnesite nov standard, ki ga je odprl Firefox : žarišče vidno. Ta element bo uporabil fokusni obroč, če ga je dosegla tipkovnica ali kazalna naprava, ki ni miška, vendar uporabnikom miške nič ne pokaže. Ker je podprt samo v Firefoxu (v času pisanja), Patrick Lauke predlaga naslednji CSS za lepo predvajanje z vsemi brskalniki:

    gumb: fokus {/ * nekaj vznemirljivih stilov ostrenja gumba * /}
    gumb: fokus: ni (: fokus je vidno) {
    / * razveljavite vse zgoraj osredotočene sloge gumbov
    če ima gumb fokus, vendar brskalnik običajno ne bi
    prikaži privzete sloge ostrenja * /
    }
    gumb: vidno ostrenje {/ * nekateri celo * več * vznemirljivi stili ostrenja gumba * /}

    7) Izpolnitev obrazca

    Na kratko: oblikovalska polja obrazca, ki izgledajo kot polja obrazca, vsaka pa so povezana z nalepko. Ne onemogoči samodejnega izpolnjevanja.

    Glede na življenjski pomen obrazcev za spletna mesta e-trgovine, me preseneti, koliko nedostopnih obrazcev vidim. Pogosto je to zato, ker stari brskalniki niso omogočali veliko oblikovanja elementov obrazcev, zato so jih razvijalci ponarejali z drugimi elementi HTML. Sodobni brskalniki omogočajo privlačna potrditvena polja, radijski gumbi, po meri izberite komponente in kombinacije, dostopne kontrole samodejnega dokončanja in več.

    Samodejno izpolnjevanje je vaš prijatelj

    Če brskalnikom omogoči samodejno izpolnjevanje obrazcev, obiskovalci naredijo manj, zato je večja verjetnost, da izpolnijo obrazec in se prijavijo / kupijo vaš izdelek. Samodejno izpolnjevanje v brskalnikih: globok potop je odličen članek eBayja o tem (in to bi morali vedeti).

    Prav tako je samodejno dokončanje edina trenutno zadostna tehnika za doseganje skladnosti z AA Merilo uspeha 1.3.5: Določite namen vnosa.

    Naj polja polja izgledajo kot polja obrazca

    Brskalniki privzeto prikažejo polja za vnos kot polja. Vsekakor jih oblikujte z robom, oblazinjenjem in obrobami, vendar jih hranite kot škatle. Mnogi oblikovalci so sledili Googlovemu vzorcu materiala pred letom 2017, ko je uporabnik uporabil eno vrstico za vnos besedila:

    Vhod za star material, z vodoravno črto in ne pravokotno škatlo

    Vendar je Google ugotovil, da vrstica pod starimi besedilnimi polji nekaterim uporabnikom ni jasna, pogosto jo je zamenjala z delilnikom in spremenila zasnovo. V test uporabnosti s 600 udeleženci so to odkrili

    priložena besedilna polja s pravokotno obliko (polje), ki delujejo bolje kot tista z vrstico … Danes se ta nova besedilna polja pojavljajo v Googlovih izdelkih s strani za prijavo na račun v Googlove obrazce.

    Če nameravate sprejeti Googlovo celotno knjižnico uporabniškega vmesnika Material Design, preberite Nehajte uporabljati besedilna polja Material Design! avtor Matsuko Friedland, da bi preveril, ali ustreza vašim potrebam.

    Označi vsa polja obrazca

    Vsa polja obrazca (besedilni vnosi, potrditvena polja, izbirni gumbi, drsniki itd.) Morajo biti označena. Najboljši način za to je uporaba HTML-ja ; kot pravi WCAG, “standardni kontrolniki HTML že izpolnjujejo to merilo uspešnosti, če se uporabljajo v skladu s specifikacijami”.

    Tukaj je predstavljen posnetek predstavitve neoznačeno polje obrazca vs označeno polje obrazca. Videti sta identično, vendar zgornja nima ustrezne etikete, medtem ko druga ima. Kliknite na besedilo na spodnji strani in videli boste, da se osredotoča na pridruženi vnos.

    ponarejena vs realna primerjava nalepk

    To olajša fokusiranje vnosa za osebe, ki imajo težave z motoričnim upravljanjem – ali morda tudi za vas, ko poskušajo na majhnem zaslonu na poskočnem vlaku potrditi drobno polje. Ključnega pomena je tudi za uporabnike bralnikov zaslona, ​​ki se bodo pomikali po poljih v obrazcu (privzeto so s karticami osredotočene samo povezave in polja obrazca) ko se vpišejo v polje za vnos, bo bralnik zaslona objavil vsebino pridružene nalepke.

    Koda za to je preprosta. Vnosno polje dobi en edinstven ID, nalepka pa je z njim povezana z za atribut:

    
    

    Skrivanje nalepk

    Občasno morda ne želite videti vidne etikete. Ali pa oblikovalec ne, in nočete drugega boja na parkirišču. Kakor koli že, tukaj je primer, ko je nalepka z napisom »Išči« pred vnosom pretirana.

    Vnosno polje z gumbom

    Vnosno polje lahko povežemo z besedilom »Išči«, ki je vsebina gumba za pošiljanje arija, označena s strani:

    
    

    Lahko bi izkoristili aria-label (s katerimi smo se srečali prej, ko smo govorili o povezavah):


    Vedno pa je bolje dati prednost vidnemu besedilu na strani, saj bo to prevedeno, če bo stran vodila prek orodja za prevajanje, medtem ko besedilo, ki je v atributih HTML ne bi bilo. (Hat-tip Adrianu Roselliju za ta namig iz njegovega čudovitega članka Moja prioriteta metod za označevanje kontrol.)

    Najpogostejše napake na največ milijonih domačih strani

    Ogledali smo si glavne ovire za spletna mesta e-trgovine, o katerih poročajo uporabniki z nekaterimi oblikami oslabitve. Zdaj si oglejmo veliko širši nabor spletnih mest – domače strani za najboljših 1.000.000 spletnih mest, samodejno analiziran s strani WebAIM avgusta 2019. 98% analiziranih strani je imelo vsaj eno napako. Najpogostejše napake so

    1. Besedilo z nizkim kontrastom (86,1%)
    2. Manjka nadomestno besedilo za slike (67,9%)
    3. Prazne povezave (58,9%)
    4. Manjkajoče vnosne oznake obrazca (53,2%)
    5. Manjka jezik dokumenta (30,5%)

    Zgoraj smo obravnavali nizko kontrastnost, povezave in vnose obrazcev. Poglejmo si, kako se lahko izognemo drugim zelo pogostim napakam.

    8) Navedite druge možnosti besedila za vse slike, video in avdio

    Na kratko: vse informacije, sporočene s sliko ali videoposnetkom, morajo imeti besedilno enakovredno.

    Vsak mora imeti nadomestno besedilo („alt text“), ki ga je mogoče sporočiti obiskovalcem z okvaro vida ali tistim z nizko pasovno širino / dragimi podatkovnimi načrti, ki so izklopili slike v svojih brskalnikih. Sem spadajo slike besedila.

    Tu so osnovna pravila:

    • Če je slika čisto dekorativna, mora imeti prazno alt besedilo: alt = "". (Kakorkoli, čisto dekorativne slike bi morale biti vsekakor v CSS-ju.)
    • Če je slika opisana v besedilu telesa, mora imeti prazno alt besedilo (alt = ""), da se izognemo ponovitvi. Vendar bodite previdni, če gre za v
      – glej Kako misliš?? za več.
    • Če je slika edina vsebina povezave (na primer logotip vaše organizacije lahko kliknete, da odprete domačo stran), mora nadomestno besedilo opisati cilj povezave. Na primer, alt = "domača stran".
    • Ne uporabljajte pisav ikon; za disleksične ljudi so lahko res slabi. Če jih uporabljate, jih pretvorite v SVG.

    Nadomestno besedilo za video in avdio

    Ne pozabite, da zvočna vsebina potrebuje nadomestno besedilo za osebe z okvaro sluha. To pomeni prepise podcastov in podnapisov na videoposnetkih. In še enkrat: ne uporabljajte samodejnih predstav.

    9) Dodajte ustrezen jezik dokumenta

    Na kratko: sporočite, da bo asistenčna tehnologija vedela jezik, v katerem je vaše besedilo.

    30% domačih strani ne navede jezika, v katerem so napisane, kar jih lahko zmede za uporabnike bralnikov zaslona. To je pomembno, ker se beseda „šest“ izgovori zelo drugače, če je na primer stavek v angleščini ali francoščini.

    To je enostavno rešiti tako, da elementu HTML dodate atribut lang:

    “En” pove bralniku zaslona (ali programski opremi za prevajanje), da je ta stran v angleščini. “Es” je španščina, “fr” je francoščina in tako naprej. V večini jezikov je jezikovno oznako precej enostavno določiti. W3C ima navodila za uporabo Izbira jezikovne oznake.

    Če stran vsebuje vsebino v jeziku, ki ni njen glavni prijavljeni, dodajte element jezika, ki obdaja to vsebino. Na primer, na strani, ki je deklarirana kot angleščina:

    Če želite klepetati matador, v nekaj kul kabana
    In se srečaj senoritas po rezultatu, Espana por favorizira

    10) Pomagajte obiskovalcu, da obkroži vašo vsebino

    Na kratko: z elementi elementov HTML za pomoč uporabnikom tehnoloških tehnologij razumevanje in krmarjenje po vaši vsebini.

    Ko vidni obiskovalec pride na vašo stran, ga zlahka vizualno pregleda, da razume, kje je navigacija in kje se začne glavna vsebina. Uporabnik bralnika zaslona tega ne more storiti. Vendar pa nam HTML5 daje nekaj novih oznak za označevanje teh področij, pomožne tehnologije pa imajo bližnjice, ki jih lahko preskočite na (ali preskočite čez) mejnike, kot so glava, noga, navigacija in podobni.

    Tu je šestminutni video, ki sem ga posnel z Léonie Watson, spletno razvijalko in uporabnikom bralnika zaslona, ​​o tem, kako uporablja svoj bralnik zaslona, ​​da preuči te semantike za krmarjenje po mojem osebnem spletnem mestu:

    • V osnovno vsebino, torej stvari, ki niso glava, primarna navigacija ali podnožje, zavijte v
      element. V skoraj vseh primerih bi moral biti samo en
      na stran. Vsi brskalniki (IE9 +) vam omogočajo, da ga oblikujete, pomožne tehnologije pa vedo, kaj storiti z njim.
    • Zavijte glavo (logotip blagovne znamke, strapline, naslov strani) v
      element.
    • Zavijte nogo (pravne stvari, kontaktni podatki, obvestilo o avtorskih pravicah itd.) V
    • Označite svojo primarno navigacijo s pomočjo
        zavit v element. To se lahko ugnezdi znotraj
        če se to ujema z vizualno zasnovo strani.
      • Oglaševalske in nebistvene vsebine morajo biti zavite v
      • Če imate na strani več izdelkov / videa / novic / objave v dnevniku, jih zavijte v
        element.

      V svojem anketa uporabnikov bralnikov zaslona, WebAIM je ugotovil, da 26% uporabnikov bralnika zaslona pogosto ali vedno uporablja te mejnike med navigacijo po strani.

      Poleg tega zavijanje diskretnih kosov vsebine

      pomaga, da Applov WatchOS optimalno prikazuje vsebino. Oglejte si moj članek Praktična vrednost pomenskega HTML-ja za več o tem.

      11) Pravilno uporabljajte HTML

      Na kratko: razumeti semantiko in privzeto vedenje elementov HTML; uporabite pravi element za svojo vsebino.

      Pogosta tema tega članka je uporaba pravilnih elementov HTML. Uporaba a nalepka ima vgrajeno vedenje brskalnika, ki se osredotoča na povezano polje vnosa; z uporabo

      je prednostno

      ker uporabnikom bralnika zaslona omogoča, da skočijo naravnost do pomembne vsebine, hkrati pa so povsem nevsiljivi do tistih, ki ne uporabljajo bralnika zaslona.

      Drug primer je uporaba a

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