Ligipääsetavus ei ole heategevus

Kui öelda „ligipääsetavus“, mõtleb enamik inimesi pimedale kasutajale, kes kuulab lehte ekraanilugejaga. Ta on olemas ja tema jaoks tasub see töö ära teha. Aga ta ei ole see, kelle pärast su leht täna kõige rohkem päringuid kaotab.

Meie kogemuses näeb see hulk välja pigem nii. Inimene seisab õues päikese käes ja hoiab telefoni varjus, et ekraanil üldse midagi eristada. Inimene, kellel on üks käsi lapsega kinni ja kes täidab su vormi ühe pöidlaga. Inimene, kes on kell üheksa õhtul väsinud ja kelle silm ei võta enam heledalt taustalt heledat halli teksti. Inimene bussis, kellel on heli maas ja kes vaatab su videot vaikselt. Ja inimene, kes on seitsekümmend ja kes on sinu klient.

Püsiv puue on selles pildis sees. Ta lihtsalt ei ole kogu pilt. Protsenti me siia välja ei mõtle, sest me ei tea seda. Aga vaata korraks oma klientide keskmist vanust ja seda, kui suur osa neist tuleb telefonist. See on sinu number.

Väike hoiatus enne edasilugemist: see artikkel ei ole õigusnõu. Me ei ole juristid ja me ei tea sinu ettevõtte olukorda. See on nimekiri asjadest, mida me lehtedel praktikas näeme, koos sellega, kuidas neid ise kontrollida.

Ja üks asi kohe ära, sest seda küsitakse esimesena. Euroopa reeglid selles vallas on viimastel aastatel karmimaks läinud ja osal ettevõtetest on nüüd kohustusi, mida neil varem ei olnud. See, kas sina oled nende hulgas, sõltub sellest, mida sa müüd, kellele ja kui suur su ettevõte on. Seda küsi juristilt. Meie ei tea seda ja ükski artikkel internetis ei tea seda sinu eest ära. Ülejäänu siin tekstis kehtib olenemata vastusest.

See ei ole heategevus, see on sama töö

Pealkirja väide on lihtne. Ligipääsetavus ei ole hea tegu, mille sa teed kellegi teise jaoks. See on sama töö, mis teeb lehe loetavaks, leitavaks ja kiireks.

Vaata, mida ekraanilugeja lehelt tahab. Päris pealkirju, mitte suureks ja paksuks tehtud teksti. Piltidel alternatiivteksti. Vormiväljadel silte. Sisu, mis on koodis samas järjekorras, nagu ta on ekraanil. Nüüd vaata, mida tahab Google'i robot ja mida tahab tehisintellekti assistent. See on peaaegu sama nimekiri.

Juhus see ei ole. Ekraanilugeja on masin, mis loeb lehte ilma kujunduseta. Otsingurobot on masin, mis loeb lehte ilma kujunduseta. Assistent on masin, mis loeb lehte ilma kujunduseta. Nad kõik küsivad sinult sama asja: ütle koodis välja see, mida sa silmale ütled paksu kirja, suuruse ja tühja ruumiga.

Sellepärast ei ole meil eraldi teenuselehte selle nimega ja me ei müü seda eraldi distsipliinina. Suurem osa sellest tööst on juba otsingumootori optimeerimise ja lehe ehitamise sees. Kui keegi pakub sulle ligipääsetavust täiesti omaette projektina, küsi, mis selles on, mida su lehel niikuinii vaja ei olnud.

Seitse asja, mida saad täna ise üle vaadata

Iga punkti juures on kontroll, mis võtab paar minutit. Tööriistu vaja ei ole, ainult brauser.

Kontrast, mis kannatab päikest välja

Kõige sagedasem viga kogu nimekirjas ja peaaegu alati teadlik valik: hele hall tekst valgel taustal, sest see näeb rahulik välja. Kontoris hea monitori peal ongi rahulik. Õues telefoniga on ta olematu.

Kontroll: keera oma ekraani heledus poole peale, astu meeter tagasi ja loe oma jaluse teksti. Kui sa pead ette kummarduma, siis su klient ei kummarda, vaid lahkub. Sama tee ka nuppudega: kahvatu tekst kahvatul nupul on sama viga, ainult tähtsamas kohas.

Tekst, mida saab suuremaks teha

Osa inimesi kasutab brauserit suurendusega ja teeb seda iga päev, mitte hädaolukorras. Leht peab seda taluma.

Kontroll: vajuta viis korda Ctrl ja + (Macis Cmd ja +). See viib sind kahekordse suuruseni. Vaata siis kolme asja: kas tekst jookseb kastist välja, kas midagi jääb teise asja alla peitu ja kas nupul olev sõna on veel loetav. Tagasi saad Ctrl ja 0.

Alternatiivtekst, kaasa arvatud tühi

Alt-tekst on lause, mida ekraanilugeja pildi asemel ette loeb. Ta on ka see, mida näeb otsingumootor, ja see, mis ilmub ekraanile siis, kui pilt ei laadi.

Siin on nüanss, mida peaaegu keegi ei tea. Kaunistus peab saama tühja alt-teksti, mitte kirjelduse. Kui su lehel on taustal dekoratiivne kaar või ikooniga eraldaja, siis „sinine kaar“ ei aita kuulajat kuidagi, ta ainult segab lugemist. Tühi alt ütleb ekraanilugejale, et selle pildi võib vahele jätta, ja ta jätabki. Sisuline pilt seevastu vajab lauset selle kohta, mida ta siin lehel tähendab, mitte failinime.

Kontroll: ava oma meediakogu ja vaata kümmet viimast pilti. Kui alt-väljal seisab midagi stiilis IMG_2841, siis on see täidetud masina, mitte inimese poolt. Üksikut pilti saab vaadata ka nii: tee pildil paremklõps, vali „Inspect“ või „Uuri elementi“ ja otsi esiletõstetud realt alt.

Vormiväljal peab olema silt

Väga levinud kujundusvõte: väljad on tühjad ja hallid ning sees on kahvatu sõna „E-post“. See sõna on placeholder ja ta kaob sel hetkel, kui inimene kirjutama hakkab. Pool vormi täidetud, telefon heliseb, inimene tuleb tagasi ja ei tea enam, milline väli oli milline.

Ekraanilugeja jaoks on olukord hullem: paljudel juhtudel ei ole seal midagi ette lugeda ja ta ütleb ainult „tekstiväli“.

Kontroll: ava oma kontaktivorm ja klõpsa mitte väljal, vaid sõnal, mis välja juures seisab. Kui kursor hüppab välja sisse, on silt päriselt olemas ja seotud. Kui ei juhtu midagi, on see lihtsalt tekst välja kõrval. See on ka vormi kõige odavam parandus.

Pealkiri on struktuur, mitte kirjastiil

Kui pealkiri on tehtud nii, et tavaline lõik tehti suureks ja paksuks, siis ekraanil ta on pealkiri ja koodis ei ole. Ekraanilugeja kasutaja saab lehe pealkirjade kaupa läbi hüpata, umbes nagu sina kerid silmadega. Kui pealkirju ei ole, ei saa ta hüpata, vaid peab kõik läbi kuulama.

Kontroll: paremklõps oma suure paksu rea peal, „Inspect“. Kui esiletõstetud real on h2, on asi korras. Kui seal on strong lõigu sees, on tegemist paksuks tehtud tekstiga. See on täpselt sama kontroll, mida me teeme otsingu poole pealt, ja see ongi mõte.

Link peab ütlema, kuhu ta viib

Ekraanilugeja oskab lehelt kõik lingid ühte nimekirja tõsta. Kui su blogilehel on üheksa linki ja igaühe tekst on „loe edasi“, siis on selles nimekirjas üheksa korda sõna „loe edasi“ ja mitte ühtegi vihjet.

Kontroll: loe oma lehe linkide tekstid valjusti ette ilma ümbritseva lauseta. Kui mõni neist ei ütle üksinda midagi, kirjuta ta ümber. „Loe edasi“ asemel „Loe, kuidas kontrast päikese käes muutub“. Sama parandus teeb ka otsingu poole tugevamaks, sest lingi tekst on üks tugevamaid vihjeid selle kohta, mis teisel pool ootab.

Video ilma helita

Vaata korraks, kus su videot päriselt vaadatakse: bussis, kontoris, öösel ilma kõrvaklappideta. Nendes kohtades on heli maas. Subtiitrid ei ole siin kellegi eriline vajadus, vaid vaikimisi olukord.

Kontroll: ava oma avalehe video ja keera heli täiesti maha. Kui sa ei saa aru, mis seal räägitakse, siis ei saa aru ka enamik vaatajaid. Enamik videoplatvorme oskab tänapäeval subtiitrid ise genereerida ja need tuleb pärast käsitsi üle lugeda, sest eestikeelse teksti puhul on masina viga tavaliselt just nimedes ja numbrites.

Viis minutit klaviatuuriga

Kaheksas punkt on eraldi, sest ta ütleb rohkem kui ülejäänud seitse kokku. Osa inimesi ei kasuta hiirt üldse. Käte värin, valu randmes, sülearvuti puuteplaat autos: põhjuseid on rohkem, kui arvatakse.

Pane hiir käest. Päriselt käest, mitte kõrvale. Klõpsa aadressiribale, vajuta Tab ja hakka edasi liikuma. Proovi jõuda menüüsse, sealt kontaktivormile, täida vorm ja saada ta ära. Edasi liigub Tab, tagasi Shift ja Tab, vajutamine käib tühiku või Enter-iga.

Katkine tulemus näeb välja ühtemoodi ja me näeme teda tihti:

• Sa ei näe, kus sa oled. Fookuseraam on kujunduses maha võetud, sest ta nägi kole välja. Nüüd liigub midagi mööda lehte, aga mitte miski ei näita, mis.
• Sa jääd kinni. Küpsiseriba või vestlusaken võtab fookuse endale ja sealt välja ei saa. Klaviatuuriga kasutaja jaoks on leht sellel hetkel läbi.
• Menüü ei avane. Ta on tehtud avanema siis, kui hiir liigub selle kohale, ja klaviatuur ei oska hiirt teeselda.
• Nupp ei tee midagi. „Saada“ on kujunduses kastike, mitte päris nupp. Silmale ühesugused, klaviatuurile mitte.
• Järjekord hüppab. Päisest kukud jalusesse ja sealt keskele tagasi, sest kujundus liigutas plokid ümber, aga koodis on nad vanas järjekorras.

Kontrolli veel üht asja: vajuta hüpikakna peal Esc. Ta peab sulguma ja fookus peab minema tagasi sinna, kust ta tuli.

Kui sa selle testi lõpuni ei jõua, on see sinu kõige tähtsam leid. Sellest ei tee ükski aruanne paremat kokkuvõtet kui sinu enda sõrmed.

Skript, mis lubab lehe ühe reaga korda teha

Varem või hiljem jõuab sinuni pakkumine: üks rida koodi lehele ja leht ongi nõuetega kooskõlas. Me neid ei kasuta ja tasub teada, miks.

Selline skript teeb kaht asja. Ta paneb lehe nurka nupu, mille alt avaneb paneel suurema kirja, tugevama kontrasti ja mõne erifondiga. Ja ta üritab automaatselt ära arvata seda, mis lehel puudu on: kirjutada piltidele alt-tekste, oletada pealkirju, siduda silte väljadega.

Esimene osa on pigem kasutu kui kahjulik. Inimene, kes vajab suuremat kirja, on selle oma seadmes juba ammu paika pannud. Ta ei tule sinu lehele oma abivahendeid otsima, ta tuleb nendega kaasa. Sinu paneel pakub talle koopiat sellest, mis tal on, ja aeg-ajalt läheb see koopia tema päris seadistusega tülli.

Teine osa on see, mille pärast me neid ei paigalda. Automaatne arvamine on arvamine. Alt-tekst, mille kirjutas masin pildi kohta, millest ta aru ei saa, ei ole parem kui puuduv alt-tekst. Ta on enesekindel vale lause, ja seda on raskem märgata kui tühja kohta.

Ja üks asi, mida tasub ise kontrollida, enne kui sellise skripti ostad: otsi üles, mida ütlevad selle kohta ekraanilugeja igapäevased kasutajad. Meie oleme neid lugenud ja see luges meie otsuse ära.

Aus osa: paneel ise ei ole kuritegu ja mõni asi selle sees on täitsa kasulik, näiteks lüliti, mis animatsioonid maha võtab. Kahju ei ole nupus. Kahju on lauses, mis sellega kaasa müüakse: et nimekiri on nüüd tehtud. Kontrast on kujunduses. Silt on vormis. Pealkiri on sisus. Ükski neist kolmest ei ole kohas, kuhu skripti saab panna.

Mis see maksab

Kaks väga erinevat vastust, olenevalt sellest, kas leht on olemas või alles tuleb.

Uue lehe puhul on see peaaegu tasuta, sest ta koosneb peamiselt otsustest, mitte tööst. Kaks värvi valitakse kontrasti järgi, mitte ainult silma järgi. Vorm ehitatakse siltidega, sest siltidega ehitamine ei võta rohkem aega kui siltideta. Pealkirjaks tehakse pealkiri. Ainus koht, kus kulu päriselt tekib, on pool tundi vaidlust ühe halli tooni üle. Sellepärast ei ole seda meie pakkumistel eraldi reana: see ei ole lisatöö, see on see, kuidas leht kokku pannakse.

Olemasoleva lehe puhul on see nimekiri väikesi parandusi ja üks ebamugav. Väikesed on alt-tekstid, vormisildid, linkide tekstid, fookuseraami tagasi panemine, menüü klaviatuurile avamine. Igaüks neist on kümne minuti ja tunni vahel, neid saab teha ükshaaval ja nad ei lähe omavahel tülli.

Ebamugav on värv. Kontrast kukub läbi peaaegu alati brändipaletis endas, ja see tähendab, et parandus puudutab asja, mille keegi kunagi kinnitas. Meie tavaline kompromiss: bränditoon jääb alles suurte asjade peale, kus ta töötab (taustad, suured pealkirjad, kaunistused), ja väikese teksti ning nuppude jaoks tehakse sellest tumedam variant. Palett ei kao, ta saab juurde ühe tooni. See vestlus on kujundusvestlus, mitte tehniline, ja just tema jääb tavaliselt seisma.

Kust alustada, kui nimekiri tundub pikk

Ta ongi pikk ja tervet asja korraga ette võtta ei ole vaja. Alusta kahest, mis aitavad kõige rohkem inimesi kõige väiksema töö eest.

Esimene on kontrast. Ta puudutab kõiki: päikest, väsinud silma, vanemat silma, odavat ekraani. Ta on ka ainus punkt, mille parandus paistab kohe välja ka sulle endale.

Teine on vormisildid. Vorm on koht, kus su leht raha teenib. Iga inimene, kes vormi pooleli jätab, on päring, mida sa ei saa, ja sa ei saa kunagi teada, et ta seal oli.

Ülejäänu tee siis, kui sa lehte niikuinii puudutad. Uus pilt saab alt-teksti üleslaadimise hetkel. Uus leht saab päris pealkirjad. Järgmine kord, kui videot lõigatakse, tulevad subtiitrid. Nii ei teki sellest projekti, mis kunagi ei alga. Ligipääsetavus triivib täpselt samamoodi nagu kiirus ja vastavus: iga üksik muudatus on väike ja keegi ei vaata pärast üle. Just sellepärast on tema koht veebihalduse sees, kus keegi vaatab regulaarselt, mitte ühe korra.

Kui sa tahad enne alustamist teada, kus sa praegu oled, siis meie vastavuse audit on tasuta ja käib lehe läbi. Ja siia käib juurde piir, mida tasub teada iga masina kohta, mis lehte kontrollib: automaatne kontroll näeb ainult ühte poolt. Ta näeb, et alt-tekst on puudu. Ta ei näe, et alt-tekstis seisab „pilt“. Ta mõõdab kontrasti numbri ära. Ta ei näe, et sinu Tab hüppab päisest jalusesse.

Teine pool oledki sina, viis minutit klaviatuuriga ja üks kord telefoniga päikese käes. Need kaks kokku annavad peaaegu terve pildi, ja kumbki neist ei maksa midagi.