Popis web pristupačnosti

Pristupačnost je praksa osiguravanja da su web stranice podjednako dostupne osobama s invaliditetom tako da imaju jednak pristup dobrima i uslugama koje te web stranice pružaju. Sastavni je dio profesionalnog web dizajna i razvoja.


Contents

Zašto biste trebali brinuti Pristupačnost?

Postoji mnogo razloga zbog kojih bi programeri, dizajneri i njihovi poslodavci / klijenti trebali osigurati da je pristupačnost rani i sastavni dio procesa razvoja web stranica..

  • Na mnogim teritorijima, poput SAD-a, EU-a, Velike Britanije, Izraela i Japana, zakonski je zahtjev da se ne diskriminiraju ljudi zbog njihove invalidnosti. U SAD-u prošle godine, Podneseno je 2.235 novih tužbi za web stranicu ADA na saveznom sudu. To je jedan na sat.
  • Pristupačne stranice obično su bolje kodirane, robusnije i dobro se rangiraju na tražilicama.
  • Web lokacije imaju pristup korisnije za posjetitelje koji nisu osobe s invaliditetom, što dovodi do većeg zadovoljstva i pretvaranja.
  • Nepristupačne web lokacije su loše za poslovanje. 2019. godine a Anketa u Velikoj Britaniji otkrili su da je više od 4 milijuna ljudi napustilo maloprodajnu web stranicu zbog zapreka u pristupu koje su pronašle. Taj izgubljeni posao, “funta za klik”, iznosio je 17,1 milijardu funti. To je milijardi. Samo u Velikoj Britaniji.
  • Loše je poslovanje dobrovoljno otkloniti potencijalne kupce.

Zajednički standardi i problemi

Srećom, W3C (tijelo koje proizvodi mnoge standarde na koje se web oslanja) ima standard o tome kako web stranice učiniti dostupnim. To se zove Smjernice za pristupačnost web sadržaja (WCAG). Postoje tri razine sukladnosti (A, AA, AAA) pri čemu je “A” najniža razina pristupačnosti. Preporučujem vam da ciljate na razinu AA.

Nažalost, WCAG je dugačak, suh i vrlo tehnički čitan, pa pogledajmo što možete relativno lako napraviti i ostvarite najveći prasak za svoj dolar. Ovo nije popis za sve što trebate znati; To je popis najčešćih pogrešaka, a pogreške za koje ljudi s invaliditetom kažu da su njihovi glavni blokeri, s praktičnim prijedlozima za rješavanje problema. Sve vanjske veze otvaraju se u novoj kartici.

U istraživanju Click-Away Pound, ispitanici s invaliditetom upitani su koji su im glavni blokovi u dovršavanju kupovine. Evo gornjih prepreka (dopušteno je više odgovora):

  1. Prepune stranice s previše sadržaja – 66%
  2. reCAPTCHA testovi – 59%
  3. Loša čitljivost (kontrast, izgled teksta) 56%
  4. Skretanje pokretnih slika i grafike – 53%
  5. Loše informacije o vezama – 59% (77% za korisnike čitača zaslona)
  6. Ispunjavanje obrasca 56%

Kako poboljšati dostupnost web stranica

Prvo, imajte na umu da nijedan od top 5 nije tehnički problem – oni su greške u dizajnu ili kopiranju.

1) Previše sadržaja

Ukratko: razdijelite tekst na odjeljke s naslovima i popisima s obrisima. Koristite jednostavan jezik.

Poznato je da se kako se broj izbora povećava, povećava i broj napor potreban za prikupljanje informacija i donijeti dobre odluke. Isto je i s previše sadržaja – ubrzo postaje neodoljiv. Razdvajanje sadržaja osnovnim stvarima je vremenski zahtjevno; kao što je Mark Twain (navodno) napisao: “Nisam imao vremena napisati kratko pismo, pa sam umjesto toga napisao dugačko.”

Nedavna knjiga Pisanje je dizajn sugerira

Ljudi žele pregledati duge blokove teksta, bez obzira na vid ili zvuk, stoga je izuzetno važno strukturirati svoje zapise dugog oblika s zaglavljama, kratkim odlocima i drugim najboljim praksama dizajniranja sadržaja.

Tako:

  • Imati samo jednu

    na stranici.

  • Koristite podnaslove liberalno; razbija „ploču“ teksta za vidljive korisnike, dok korisnici pomoćnih tehnologija poput čitača zaslona mogu pomoću tipke prečaca preskočiti između naslova ili dobiti mentalnu mapu sadržaja iz strukture naslova..
  • Ne preskačite razinu naslova. Na primjer, ako upotrebljavate an

    , provjerite je li prethodio an

    .

  • Upotrijebite popisane liste (poput ove!) Ispravno označene u HTML-u kao
      ,
    • . Čitatelji zaslona će objaviti “Popis 10 predmeta” (i omogućiti korisniku da preskoči preko njih).

    Koristite običan engleski

    Monzo banke Vodič “Naš ton glasa” objašnjava važnost običnog jezika:

    2010. godine američki odvjetnik Sean Flammer pokrenuo je eksperiment. Zamolio je 800 sudskih krugova da uspoređuju bilo tradicionalni „legalese“ argument ili onaj u onome što je nazvao „običnim engleskim“.

    Suci su u velikoj mjeri preferirali običnu englesku verziju (66% do 34%), a taj je odabir ostao bez obzira na njihovu dob i podrijetlo.

    Bilješke o plamenu (PDF) obične engleske verzije:

    Kraće je za gotovo stranicu, pa očito uklanja nepotrebne rečenice i riječi. Njegove rečenice prosječno imaju 17,8 riječi, nasuprot 25,2 riječi.

    Zaključuje:

    Sada imamo 25 godina empirijskog istraživanja koje vodi do neizbježnog zaključka: ako želite ugoditi i uvjeriti svog čitatelja, pišite na običnom engleskom.

    2) ReCAPTCHA

    Ukratko: nemojte da vaši korisnici skaču kroz potencijalno nemoguće obruče kako biste uštedjeli vrijeme programeru.

    Ispitanici su često razgovarali o starom ReCAPTCHA verzija:

    verzije reCAPTCHA sa nesvjesnim tekstom koji morate ponovno unijeti

    Borim se sa slikama i moram upisivati ​​brojeve ili slova. U vrsti u kojoj moram kliknuti koje slike imaju dućan ili slično, uvijek mi neke nedostaju ili se zbunjujem i trošim energiju koju nemam …

    Stil nepokretnih slova u reCAPTCHA sada je zastario. Mnogo je češće vidjeti noviju inkarnaciju pod nazivom “No CAPTCHA reCAPTCHA” (poznatu i kao “Nisam robot) zbog čega korisnik mora potvrditi potvrdni okvir koji potvrđuje da nije robot i koji koristi tajni vudu za ocjenu korisnika. Ako prođu, nije potrebna daljnja interakcija. Međutim, ako ne uspiju, prikazat će se daljnji izazov:

    Djelomična snimka captcha koja zahtijeva da korisnik klikne sve kvadrate na kojima se pojavljuju naranče

    Imajte na umu da vrsta CAPTCHA-a koji zahtijeva da korisnik klikne sve kvadrate s (recimo) uličnim znakom nije nužno međunarodna. Kako piše Terence Eden, CAPTCHA ne dokazuju da ste čovjek – dokazuju da ste Amerikanac.

    Najpristupačniji oblik je reCAPTCHA reCAPTCHA v3 za koje nije potrebna interakcija korisnika, ali trebate učiniti više posla da biste se bavili posjetima koji nisu uspjeli test:

    To je čisti JavaScript API koji vraća ocjenu, omogućavajući vam akciju u kontekstu vaše web stranice: na primjer, zahtijevanje dodatnih čimbenika provjere autentičnosti, slanje posta u moderiranje ili botiranje koji mogu sadržavati sadržaj.

    3) Loša čitljivost

    Ukratko: provjerite ima li tekst odgovarajući kontrast, čitljiv je i nije opravdan.

    • Osigurajte odgovarajući kontrast. Jedan od najčešćih blokatora pristupa na webu je loš kontrast teksta i pozadine. Smjernice W3C zahtijevaju omjer kontrasta od najmanje 4,5: 1, osim za tekst velikog opsega i slike teksta velikog formata koji bi trebao imati omjer kontrasta od najmanje 3: 1 (izuzeti su logotipi i „slučajni“ tekst). Postoji mnogo alata koji mogu mjeriti omjere kontrasta za vas; moj osobni favorit je Ada Rose Cannon odličan kontrastni widget, što je korisna oznaka preglednika koja ističe područja nedovoljnog kontrasta na vašoj stranici.
    • Nemate sve kapitalne naslove. Postoje dokazi da ih je teže čitati jer su velika slova jednaka visini, tako da ne možemo prepoznati oblik uobičajenih riječi. Uz to, neki čitači zaslona će pisati skupine velikih slova kao da su kratice (kao BBC, DOJ itd.). Ako morate imati sve glavne naslove, upišite ih u uobičajenom slučaju u HTML i transformirajte ih u CSS pretvaranje teksta: velika slova.
    • Tekst poravnajte lijevo. (Za stranice na jezicima desno-lijevo kao što su arapski ili hebrejski, tekst s poravnavanjem udesno.) Nemojte to pravdati jer osobama s disleksijom to otežava čitanje. Vodič za stil Britanskog udruženja za disleksiju također sugerira

      Koristite sans serif fontove, poput Arial i Comic Sans, jer slova mogu izgledati manje gužva. Alternativa uključuje Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) Zbunjujuće slike i grafike

    Ukratko: dopustite korisnicima da zaustave bilo koji pokret; poštuju njihove postavke operativnog sustava; nemojte automatski reproducirati videozapise.

    Napisao je jedan ispitanik ankete Click-Away Pound,

    Web-lokacije koje sam koristio s malo izdanja sada postaju problem jer sad pokreću pokrete i neprestano učitavaju više reklama dok kupujete..

    Najosnovnija razina WCAG-a zahtijeva: “Za svako pomicanje, treptanje ili pomicanje informacija koje (1) započinju automatski, (2) traju više od pet sekundi, a (3) se prikazuje paralelno s ostalim sadržajem, postoji mehanizam za korisnik može zaustaviti, zaustaviti ili sakriti, osim ako je pomicanje, treptanje ili pomicanje dio aktivnosti u kojoj je to neophodno. “.

    Skretanje je smetnja – osobito za osobe s ADHD-om ili drugim kognitivnim poremećajima. No kretanje i bljeskanje također mogu uzrokovati napadaje, tako da WCAG smjernice nalažu da sadržaj ne trepne više od 3 puta u bilo kojem razdoblju od 1 sekunde.

    Poštujte korisnikov izbor za animacije

    Svi glavni operativni sustavi omogućuju korisniku da izrazi sklonost smanjenom kretanju na zaslonu – možda zato što ima poremećaj vestibularnog spektra koji se pokreće. Vaša web stranica može otkriti je li korisnik to učinio pomoću CSS-a preferira-smanjene gibanje medijski upit.

    Ovdje dopuštamo animiranje gumba samo ako korisnik nije izrazio prednost:

    @media (preferira smanjena gibanja: bez preferenci) {
    dugme {
    / * `vibriraju} okviri ključeva definirani su drugdje * /
    animacija: vibrirajte linearno beskonačno 0,3 s oboje;
    }
    }

    Ako želite dodatno prilagoditi web mjesto s mnogim pravilima o animaciji, sljedeće može biti zaustavi sve prethodno najavljene CSS animacije:

    @media (preferira-smanjena gibanja: smanji) {
    *,
    *::prije,
    * :: nakon {
    animacija-trajanje: 0,001s! važno;
    prijelazno trajanje: 0,001s! važno;
    }
    }

    Možda ćete htjeti razmotriti predmet poštivanja korisničkih operativnih sustava dizajniranje vaše web stranice za tamni način rada.

    5) Loše informacije o vezama

    Ukratko: učinite poveznice prepoznatljivim, s jedinstvenim tekstom veze. Upozorite korisnike hoće li veza otvoriti novu karticu ili datoteku.

    Jedan od glavnih uzroka loših veza često je loše kopiranje. Većina čitača zaslona omogućuje korisniku da brzo vidi popis veza na stranici (u najčešće korištenom komercijalnom čitaču zaslona, ​​JAWS, prečac na tipkovnici je Ins + F7; u besplatni čitač zaslona NVDA, ista prečac na tipkovnici prikazuje Popis elemenata koji sadrži veze na stranice, naslove i orijentire).

    Međutim, ako svaka veza sadrži tekst na kojem piše “Kliknite ovdje” ili “Pročitajte više”, s tim što ih ništa drugo ne možete razlikovati, to je beskorisno. Najlakši način da to riješite je jednostavno pisanje jedinstvenog teksta veze, ali ako to nije moguće, možete prekoračiti tekst veze za pomoćnu tehnologiju koristeći jedinstveni atribut aria-label na svakoj vezi.

    Evo dobrog primjera iz Web stranica Joomla:

    Web stranica Joomla, koja prikazuje dvije različite priče, od kojih je svaka identična

    Vidljivi tekst veze jednostavno je “pročitajte više”, ali Joomla koristi arija oznaka atribute koji čine svaku jedinstvenu pomoćnu tehnologiju:

    Čitaj više
    
    Čitaj više

    Zbog arija oznaka tekst će se koristiti umjesto teksta veze putem pomoćnih tehnologija, W3C preporučuje da se tekst koji se koristi u aria-etiketi započne s tekstom koji se koristi unutar veze, jer “to će omogućiti dosljednu komunikaciju između korisnika”.

    Bilješka: Neki loš savjet koji i dalje vidim na starim web lokacijama je dodavanje objašnjenog teksta na poveznice pomoću titula atribut:

    Pročitajte više>

    Ne čini to. naslov nije izložen većini čitatelja zaslona (programeri su ga koristili ključnim riječima za “SEO” svrhe, pa su ih dobavljači čitača zaslona prema zadanim postavkama onemogućili), a preglednici atribute naslova prikazuju kao “savjete” koji su dostupni samo mišima na mišu.

    Veze bi trebale izgledati poput veza

    Preglednici po zadanom podvlače veze. Najbolje je to ne mijenjati, ali ako izgubite svađu na parkiralištu s dizajnerom oko toga, tekst veze mora imati kontrastni odnos 3: 1 od okolnog teksta koji nema vezu i trebao bi dati nekakvog označavača bez boje “Da su oni veza kada se lebde ili fokusiraju, na primjer:

    a: lebdeći, a: fokus {uređenje teksta: podcrtavanje;}

    Stil fokusa uzrokuje podcrtavanje veze kada se korisnik koji nije miš fokusira na nju s tipkovnice, pisača ili glasovnog unosa. Općenito, kad god stranica ima stil lebdjenja, također bi joj se trebao dodijeliti stil fokusa.

    “Označivač bez boje” (u našem slučaju podvlaka) osigurava da će posjetitelji sa slabim vidom ili sljepoćom u boji vidjeti promjenu na leđima ili fokusu. (Čitatelji zaslona automatski najavljuju “Link” prije teksta veze.)

    Javite ljudima ako veza otvori novu karticu / stranicu

    Posjetitelja može biti zbunjujuće ako se aktiviranjem veze otvori nova kartica ili novi prozor, posebno ako to rade samo neke veze na stranici (na primjer, samo vanjske veze otvaraju novu karticu). Ako to morate učiniti, trebali biste upozoriti korisnika bilo u tekstu veze, ili koristeći gornju metodu aria-label.

    Recite ljudima da li je veza u datoteku

    Ako je veza na datoteku (na primjer, PDF ili videozapis), recite korisniku u tekstu veze. Ne sakrivaj to unutra arija oznaka, jer to može biti korisno za mnoge promatrače (na primjer, neki mobiteli ne mogu otvoriti .docx datoteku). Ako se radi o velikoj datoteci, razmislite da upozorite korisnika na približnu veličinu; možda ne žele preuzeti veliku video datoteku preko 3G-a.

    Također možete koristiti preuzimanje datoteka atribut, koji uzrokuje da preglednik otvori dijaloški okvir za preuzimanje izvorne datoteke operativnog sustava. Ako se sve to zbroji, kod će izgledati ovako:

    Godišnje izvješće (PDF, 240 MB)

    6) Još jedna pogreška u dizajnu: uklanjanje prstena za fokusiranje

    Ukratko: provjerite može li korisnik tipkovnice uvijek vidjeti gdje su trenutno usredotočeni.

    Spomenuli smo :usredotočenost stilovi prije. Oni su neprocjenjiv vizualni pokazatelj za one ljude koji ne mogu koristiti miš iz bilo kojeg razloga: možda imaju RSI ili Parkinsonovu ili multiple sklerozu. Pregledavači prikazuju prsten za fokus na trenutno fokusiranom elementu. Evo poveznice Početna na mojoj osobnoj web lokaciji sa fokusom na Chromium pregledniku:

    Snimak zaslona zadanog prstena za fokusiranje Chromiuma oko veze (što je ujedno i slika)

    Međutim, neki smatraju da je to estetski neprijatno kada koriste miš i isključe ga pomoću CSS-a, čime web mjesto ostavlja nepristupačnim korisnicima tipkovnice.

    Unesite novi standard pod nazivom Firefox pod nazivom pionir : Fokus vidljiva. Ovo će primijeniti prsten za fokusiranje na element ako ga je dosegla tipkovnica ili uređaj koji ne pokazuje mišem, ali korisnicima miša ništa ne pokazuje. Kao što podržava samo Firefox (u vrijeme pisanja), Patrick Lauke sugerira sljedeći CSS kako bi se lijepo igrao sa svim preglednicima:

    gumb: fokus {/ * neki uzbudljivi stilovi fokusiranja tipki * /}
    gumb: fokus: not (: fokus je vidljiv) {
    / * poništite sve gore usmjerene stilove gumba
    ako gumb ima fokus, ali preglednik ne bi normalno
    prikaži zadane stilove fokusiranja * /
    }
    gumb: vidljiv fokus {/ * neki još više * više * uzbudljivi stilovi fokus tipki * /}

    7) Ispunjavanje obrasca

    Ukratko: dizajnirajte polja obrasca koja izgledaju poput obrazaca, a svako je povezano s oznakom. Ne onemogućite automatsko punjenje.

    S obzirom na vitalnu važnost obrazaca za web lokacije e-trgovine, zadivljava me koliko nepristupačnih oblika vidim. Često je to zato što stari preglednici nisu mnogo dopuštali na način da se oblikuju elementi oblika, pa su ih programeri lažirali s drugim HTML elementima. Moderni preglednici dopuštaju atraktivni potvrdni okviri, radio gumbi, prilagođeni odabir komponenata i kombinacije okvira, dostupne kontrole za automatsko dovršavanje i više.

    Automatsko popunjavanje je vaš prijatelj

    Dopuštanje preglednicima da automatski popunjavaju obrasce od posjetitelja trebaju učiniti manje, tako da je veća vjerojatnost da će ispuniti obrazac i prijaviti se / kupiti vaš proizvod. Automatsko popunjavanje na preglednicima: Duboki zaron je sjajan članak eBay-a o ovome (i oni bi trebali znati).

    Također, automatsko dovršavanje je jedina trenutno dovoljna tehnika za postizanje sukladnosti s AA-om Kriterij uspjeha 1.3.5: Odredite svrhu unosa.

    Neka polja obrazaca izgledaju poput polja obrasca

    Preglednici po zadanom prikazuju polja za unos kao okvire. U svakom slučaju, stilizirajte ih uz margine, obloge i obrube, ali držite ih kao kutije. Mnogi dizajneri slijedili su Googleov obrazac dizajna materijala prije 2017. godine pomoću korisničkog retka za unos teksta:

    Ulaz za stari materijal, s horizonatalnom linijom, a ne pravokutnom kutijom

    Međutim, Google je otkrio da redak ispod starih tekstualnih polja nekim korisnicima nije jasan, često ih se brka s razdjelnikom i promijenio je dizajn. U test upotrebljivosti sa 600 sudionika, to su otkrili

    priložena tekstna polja pravokutnog oblika (okvira) djeluju bolje od onih koja imaju crte linija … Danas se ta nova tekstualna polja pojavljuju na Googleovim proizvodima sa stranica za prijavu računa na Google obrasce.

    Ako razmišljate o usvajanju Googleove pune biblioteke sučelja dizajna materijala, pročitajte Prestanite koristiti tekstualna polja Materijalni dizajn! napisao Matsuko Friedland da vidi zadovoljava li vaše potrebe.

    Označite sva polja obrasca

    Sva polja obrasca (unosi teksta, potvrdni okviri, radio tipke, klizači itd.) Moraju biti označeni. Najbolji način da to učinite je korištenje HTML-a ; kao što kaže WCAG, “standardne HTML kontrole već ispunjavaju ovaj kriterij uspjeha kada se koriste prema specifikaciji”.

    Evo demonstracije koju sam napravio neoznačeno polje obrasca vs označeno polje polja. Izgledaju identično, ali gornja strana nema odgovarajuću etiketu, dok druga ima odgovarajuću. Kliknite naljepnicu teksta s donje strane i vidjet ćete da se fokusira na pridruženi unos.

    lažna usporedba s stvarnom usporedbom s oznakama

    To olakšava fokusiranje unosa mnogo lakšim za osobe s poteškoćama u upravljanju motorima – ili možda za vas, pokušavajući provjeriti maleni potvrdni okvir na malom ekranu u poskočnom vlaku. Također je bitno za korisnike čitača zaslona koji će prelistavati polja u obrazac (prema zadanom su samo veze i polja obrasca fokusirana karticama); kad se upišu u polje za unos, čitač zaslona će objaviti sadržaj pridružene naljepnice.

    Kod za to je jednostavan. Unosnom polju daje se jedinstveni ID, a oznaka se s njim povezuje pomoću za atribut:

    
    

    Skrivanje naljepnica

    Povremeno možda ne želite vidljivu naljepnicu. Ili dizajner ne želi i ne želite drugu svađu na parkiralištu. U svakom slučaju, evo primjera kada se naljepnica koja kaže “Traži” ispred unosa osjeća prekomjernom brzinom.

    Polje za unos s gumbom

    Polje za unos možemo povezati s tekstom “Pretraživanje”, što je sadržaj gumba za slanje pomoću arija-labelledby:

    
    

    Mogli smo iskoristiti arija oznaka (s kojom smo se sreli ranije kada smo govorili o vezama):


    Ali uvijek je bolje preferirati vidljivi tekst na stranici jer će se to prevesti ako se stranica pokrene putem alata za prijevod, dok tekst “skriven” u HTML atributima neće biti. (Hat-tip Adrianu Roselliju za ovaj savjet iz njegovog sjajnog članka Moj prioritet metoda za označavanje kontrole.)

    Najčešće pogreške na početnim stranicama milijuna milijuna

    Pogledali smo glavne prepreke na web stranicama e-trgovine kako ih prijavljuju korisnici s nekim oblikom umanjenja. Sada pogledajmo mnogo širi skup web stranica – početne stranice za najpopularnijih 1.000.000 web mjesta, automatski analizira WebAIM u kolovozu 2019. 98% analiziranih stranica imalo je barem jednu pogrešku. Najčešće su pogreške

    1. Tekst niskog kontrasta (86,1%)
    2. Nedostaje alternativni tekst za slike (67,9%)
    3. Prazne veze (58,9%)
    4. Naljepnice za unos obrasca (53,2%)
    5. Nedostaje jezik dokumenta (30,5%)

    Gore smo bavili niskim kontrastom, vezama i ulazima u obrasce. Pogledajmo sada kako možemo izbjeći ostale vrlo česte pogreške.

    8) Navedite alternative teksta za sve slike, video i audio

    Ukratko: svaka informacija priopćena pomoću slike ili videozapisa mora imati tekstualni ekvivalent.

    Svaki mora imati alternativni tekst (“alt tekst”) koji se može priopćiti posjetiteljima s oštećenjem vida ili onima s malom propusnom širinom / skupim podatkovnim planovima koji su isključili slike u svojim preglednicima. Ovo uključuje slike teksta.

    Evo osnovnih pravila:

    • Ako je slika čisto dekorativna, mora imati prazan alt tekst: alt = "". (Ionako bi čisto dekorativne slike vjerojatno trebale biti u CSS-u.)
    • Ako je slika opisana u tekstu tijela, trebala bi imati prazan alt tekst (alt = ""), kako bi se izbjeglo ponavljanje. Ali budite oprezni ako je to u
      – vidi Kako shvatite? za više.
    • Ako je slika jedini sadržaj veze (na primjer, logotip vaše organizacije može se kliknuti da bi se otvorila početna stranica), alternativni tekst trebao bi opisati odredište veze. Na primjer, alt = "početna stranica".
    • Ne koristite fontove ikona; mogu biti jako loši za osobe s disleksijom. Ako ih koristite, pretvoriti ih u SVG.

    Zamjenski tekst za video i audio

    Ne zaboravite da audio sadržaji trebaju alternativni tekst za osobe sa oštećenjem sluha. To znači transkripte podcasta i titlova na videozapisima. I još jednom: nemojte automatski reproducirati medije.

    9) Dodajte pravi jezik dokumenata

    Ukratko: neka pomoćna tehnologija zna jezik na kojem se nalazi vaš tekst.

    30% početnih stranica ne deklarira jezik na kojem su napisani, što ih može učiniti zbunjujućim za korisnike čitača zaslona. To je važno jer se riječ “šest” izgovara vrlo različito, na primjer, ako je rečenica na engleskom ili francuskom jeziku.

    To je lako riješiti dodavanjem atributa lang u HTML element:

    “En” govori čitaču zaslona (ili softveru za prijevod) da je ta stranica na engleskom. “Es” je španjolski, “fr” je francuski, i tako dalje. Za većinu jezika jezičnu je oznaku prilično lako odrediti. W3C ima vodič za Odabir jezične oznake.

    Ako stranica sadrži sadržaj na jeziku koji nije glavni glavni, dodajte atribut jezika elementu koji okružuje taj sadržaj. Na primjer, na stranici koja je proglašena engleskom:

    Ako želite razgovarati na matador, u nekom cool kabana
    I upoznajte se senoritas po rezultatu, Espana por favorizira

    10) Pomozite posjetitelju da se opkoli oko vašeg sadržaja

    Ukratko: upotrijebite elemente HTML orijentacije kako bi korisnici pomoćnih tehnologija razumjeli i kretali se po vašem sadržaju.

    Kad vidljivi posjetitelj dođe na vašu stranicu, može je lako vizualno skenirati kako bi razumio gdje je navigacija i gdje počinje glavni sadržaj. Korisnik čitača zaslona ne može to učiniti. Međutim, HTML5 nam daje nove oznake za obilježavanje ovih područja, a pomoćne tehnologije imaju prečace koji mogu preskočiti na (ili preskočiti) orijentire poput Zaglavlje, podnožje, navigacija i slično.

    Evo šestominutnog videa koji sam snimio s Léonie Watson, web programerom i korisnikom čitača zaslona, ​​kako ona koristi svoj čitač zaslona za ispitivanje ove semantike za navigaciju do moje osobne web lokacije:

    • Umotajte svoj glavni sadržaj, odnosno stvari koje nisu zaglavlje, osnovna navigacija ili podnožje, u a
      element. U gotovo svim slučajevima trebao bi postojati samo jedan
      po stranici. Svi preglednici (IE9 +) omogućuju vam da ga oblikujete, a pomoćne tehnologije znaju što s tim.
    • Omotajte zaglavlje (logotip marke, remen, naslov stranice) u a
      element.
    • Umotajte podnožje (pravne stvari, kontaktni podaci, obavijest o autorskim pravima itd.) U a
    • Označite svoju primarnu navigaciju pomoću
        zamotan u element. To se može ugniježditi unutar
        ako se to uklapa u vizualni dizajn stranice.
      • Oglašavački i nebitni sadržaj trebaju biti zamotani u
      • Ako na stranici imate više proizvoda / videozapisa / vijesti / bloga, omotajte ih svaki u
        element.

      U svom anketa o korisnicima čitača zaslona, WebAIM utvrdio je da 26% korisnika čitača zaslona često ili uvijek koristi te orijentire tijekom navigacije po stranici.

      Uz to, umetanje diskretnih dijelova sadržaja u

      pomaže Appleovom satu WatchOS na optimalnom prikazu sadržaja. Pogledajte moj članak Praktična vrijednost semantičkog HTML-a za više o tome.

      11) Koristite pravilno HTML

      Ukratko: razumite semantiku i zadano ponašanje HTML elemenata; koristite pravi element za svoj sadržaj.

      Česta tema u ovom članku je upotreba ispravnih HTML elemenata. Korištenje a označiti ima ugrađeno ponašanje preglednika koje fokusira pripadajuće polje unosa; koristeći

      preferira se

      jer omogućuje korisnicima čitača zaslona da uskoče ravno do važnog sadržaja, a pritom je potpuno neupadljiv onima koji ne koriste čitač zaslona.

      Drugi primjer je upotreba a

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