Igal Husly saidil saab nüüd liikumise peatada ja klaviatuuriga sisu juurde hüpata

Mis muutus ja kellele see loeb

17. oktoobril kontrollisime husly.app saiti ligipääsetavuse nõuete (WCAG 2.2) järgi. Paljud leitud probleemid ei olnud husly.app enda omad, vaid tulid platvormist: päisest, menüüst, vormist ja vidinatest. Seega olid need olemas ka sinu saidil. Parandasime need platvormis, nii et parandused jõudsid kõigile avaldatud saitidele korraga.

Kõige rohkem võidavad külastajad, kes liiguvad lehel klaviatuuriga, kasutavad ekraanilugejat või keda häirib liikumine ekraanil. Kasu on ka sulle: saidi kasutamine on lihtsam kõigile ja kui sinu klient on näiteks avalik asutus, küsitakse neid nõudeid sageli juba hankes.

Peaaegu kõik töötab ise. Sinu jaoks on üks uus lüliti, millest räägime allpool.

Liikumise saab ühe nupuga peatada

Lehel võib olla osi, mis liiguvad lõputult: jooksev tekstiriba, iseenesest liikuv pildisein, helendav nupp või taustavideo. Nõue ütleb, et kõik, mis hakkab ise liikuma ja kestab üle viie sekundi, peab olema peatatav. Varem oli paus ainult fotoslaideril.

Nüüd on igal avaldatud saidil nupp Peata animatsioonid. See on jaluses keele- ja teemavaliku kõrval ning selle koopia tuleb klaviatuuriga liikujale vastu kohe pärast linki „Liigu sisu juurde“. Üks vajutus peatab kõik lõputud ja pikad animatsioonid ning iseenesest mängivad videod. Nupu tekst muutub siis kujule „Käivita animatsioonid“ ja sait mäletab valikut igal lehel, kuni külastaja selle uuesti vajutab. Lehel, kus miski ise ei liigu, nuppu ei ole.

Sinu jaoks on igal vidinal uus lüliti Ära liigu ise, ploki seadetes rühmas „Ligipääsetavus“. Kui see on sees, ei liigu see plokk avaldatud saidil kunagi iseenesest: slaideri automaatne edasiminek peatub, lõputu liikumine seisab ja ploki sees olev taustavideo ei mängi. Külastaja saab plokki endiselt käsitsi liigutada noolte, täppide ja pühkimisega. Lüliti on vaikimisi väljas, nii et ükski olemasolev leht ei muutunud.

Klaviatuuriga liikudes on fookus alati näha

Klaviatuuriga liikuja pidi varem igal lehel läbi käima logo, kõik menüülingid, keelevaliku ja teemalüliti, enne kui jõudis sisuni. Nüüd algab iga avaldatud leht lingiga Liigu sisu juurde. See on esimene koht, kuhu Tab-klahv jõuab, see on nähtav ainult fookuses ja viib fookuse otse lehe sisusse.

• Päis ei kata fookust. Kui külastaja liigub Shift+Tab-iga üles, jätab leht ülaserva päise kõrguse vabaks, nii et fookuses olev element ei jää kinnituva päise alla.
• Küpsiseteade ei kata fookust. Kuni teade on avatud, hoiab leht selle kõrguse all vabaks, ja kui fookus satub siiski teate alla, liigub teade akna ülaserva.
• Telefonimenüü on päris dialoog. Kui menüü avaneb, liigub fookus menüü esimesele lingile ja Tab käib ringi ainult menüü sees, mitte selle taga oleval lehel. Menüü lõpus on nupp „Sulge menüü“, mille ekraanilugeja kasutaja telefonis pühkides üles leiab. Kui menüü suletakse, läheb fookus tagasi menüünupule.

Hiire või sõrmega kasutaja jaoks ei muutunud ekraanil midagi.

Kontaktivorm räägib ekraanilugejaga

Ekraanilugeja ütles varem vormi väljale jõudes ainult „muuda teksti“, sest välja nimi oli lihtsalt tekst selle kohal. Pime külastaja ei saanud aru, kas ta on nime- või e-posti väljal. Nüüd on iga välja nimi väljaga seotud, raadionuppude rühmal on küsimuse nimi ning märkeruut ja iga valik on seotud oma tekstiga.

Ka vormi saatmise tulemus jõuab nüüd ekraanilugejani. Tänuteade loetakse ette, kui ekraanilugeja vabaneb, ja veateade, näiteks puuduv vastus või ebaõnnestunud saatmine, loetakse ette kohe. Varem vajutas pime külastaja „Saada“ ega saanud kunagi teada, kas sõnum läks teele.

Lisaks ütleb vorm nüüd brauserile, mida iga väli küsib: nimi, e-post, telefon, ettevõte, aadress või veebileht. Brauser saab need külastaja eest täita ja abivahendid oskavad neid märgistada. Väli, mis külastaja kohta ei küsi, näiteks teema või sõnum, jääb ilma.

Väiksemad parandused, mida silm märkab

• Slaideri täpid on suuremad sihtmärgid. Kerimisgalerii ja kaanevoo täpid olid 9 x 9 pikslit ja üksteisest 9 piksli kaugusel. Nüüd on iga täpp 24 x 24 piksline nupp, mille sees on sama väike täpp, nii et sõrmega on seda lihtsam tabada.
• Teatekasti nupp on loetav. Rohelise ja kollase teatekasti nupul oli valge tekst, mida oli raske lugeda. Nüüd valitakse nupu tekst samamoodi nagu mujal teemas: valge, kui see on piisavalt kontrastne, muidu tume.
• Tühja gradiendiga bänner sai tausta tagasi. Kui bänneri üks gradiendivärv oli salvestatud tühjana, jäi bänner varem üldse ilma taustata, aga tekst jäi valgeks. Nüüd kasutab tühi värv brändi vaikevärvi ja bänner saab oma gradiendi tagasi.

Näide väikese ettevõtte saidilt

Võtame koristusfirma, kelle avalehel on jooksev tekstiriba klientide logodega, iseenesest vahetuv arvustuste slaider ja hinnapäringu vorm. Firma pakub teenust ka vallaasutustele, kelle hanked küsivad ligipääsetavat saiti.

Klaviatuuriga külastaja hüppab nüüd esimese Tab-vajutusega sisu juurde ja teisega saab liikumise peatada. Ekraanilugejaga külastaja kuuleb iga välja nime ja saatmise järel ka tänuteadet. Firma omanik lülitab arvustuste slaideril sisse „Ära liigu ise“, nii et slaider seisab, kuni külastaja ise noolt vajutab.

Mida me veel ei teinud

Hiirega kasutaja, keda liikumine häirib, peab pausinupuni jõudmiseks lehe jaluseni kerima. Klaviatuuri- ja ekraanilugeja kasutajad leiavad selle koopia lehe algusest.

Kerimisega liikuvad osad liiguvad ainult siis, kui külastaja ise kerib, seega paus neid ei peata. Vanemate vidinate kohandamine brauseri seadele „Vähenda liikumist“ on eraldi töö.