Modalo pritaikymas prieinamumui

Modalas, dar žinomas kaip „pop-upas“, „confirmationas“, dialogas ar „iššokanti lentelė“, yra svarbus vartotojo sąsajos elementas sutinkamas kiekvieną dieną. Modalai dažnai naudojami norint gauti patvirtinimą iš vartotojo, informuojant apie paslaugas, pvz. pasiryžimą atlikti ištrynimo veiksmą arba skatinant užsiregistruoti naujienlaiškiui. Tačiau, jei šis paprastas elementas nėra tinkamai sukonfigūruotas, jis gali tapti dideliu skausmu vartotojams naudojantiems ekrano skaitymo programas.

Puslapio testavimo su neregiu metu pastebėjau, kad iššokęs netvarkingas modalas vartotojams yra paprasčiausiai nematomas. Tokiu atveju vartotojas nesupranta, kodėl anksčiau veikę mygtukai nustoja veikti ir gali ilgai užtrukti, kol su skaitykle netikėtai pavyks surasti patį modalą ir jo uždarymo mygtuką (modalas techniškai dažnai atsiranda pačiame puslapio gale, įsivaizduokit kiek laiko gali trukti kol bus praeinamas visas turinys pavyzdžiui naujienų puslapyje).

Pavyzdys ekrano skaityklės judėjimo puslapyje

Norint tinkamai paruošti modalą, būtina atkreipti dėmesį į kelis pagrindinius dalykus:

• Už modalo esanti informacija turėtų būti vizualiai atskirta (pvz. patamsinta ar „sublurinta“), kad būtų aišku jog ji neprieinama.
• Paspaudus už modalo kortelės ribų, modalas turėtų užsidaryti, nebent sprendimas yra būtinas atlikti.
• Modale turi būti sutvarkyti spąstai tiek klaviatūros, tiek ekrano skaityklės naudotojams.
• Labai svarbus tinkamas fokuso suvaldymas

Apie pastaruosius du pašnekėkime detaliau

Fokusas

Tvarkingas modalo fokuso valdymas yra labai svarbus tiek vartotojams su motorikos ar regėjimo sutrikimais, tiek įprastiens lankytojams. Pagrindinės taisyklės yra:

1. Mygtukas, kuris iškvietė modalą, jį uždarius, turėtų vėl gauti fokusą.
2. Atidarius modalą, jame esantis elementas turi gauti fokusą.

Tik gali kilti klausimas, kuriam modalo elementui skirti fokusą? O gal uždėti fokusą pačiam modalui? ARIA Authoring Practices Guide mini, kad nors dažniausiai verta dėti fokusą ant pirmo fokusuojamo modale elemento, bet yra visokiausių išimčių:

1. Jei modale yra sąrašai, lentelės ar keletas paragrafų teksto, fokusą reikėtų uždėti ant pirmo statinio elemento (pvz., <H1> ar <p>).
   
   

   Statiniai elementai (kaip pavyzdžiui <H1> ar <p>) paprastai negali gauti fokuso, bet nedidelis ,,hack'as" - atributas tabindex="-1" leidžia kodo pagalba sufokusuoti tokį elementą.
2. Jei modalas prašo patvirtinimo dėl svarbių veiksmų (pavyzdžiui duomenų ištrinimo), fokusą reikėtų dėti ant mažiausiai destruktyvaus mygtuko.
3. Jei modalas yra informacinis, fokusą reikėtų dėti ant dažniausiai naudojamo elemento, pvz., „Ok“ ar „Continue“.

Tačiau eksperimentuojant su skirtingomis ekrano skaityklėmis ir operacinėmis sistemomis, panašu, kad yra šiek tiek daugiau niuansų. Mano siūlymas būtų visuomet dėti fokusą ant modalo pavadinimo, nes:

• Vartotojas naudojantis ekrano skaitykle visuomet bus informuotas kokiu tikslu modalas atsirado (ypač TalkBack atveju).
• Vartotojai naviguojantys klaviatūra turės papildomai paspausti tik vieną TAB mygtuką norėdami pažymėti pirmą interaktyvų elementą, bet tuo tarpu ekrano skaityklių naudotojams puslapio bei modalo veikimas būtų žymiai suprantamesnis ir jiems nereikėtų naviguoti po visą modalą norint suprasti apie ką jis.
• Vartotojas nebus suklaidintas dėl fokuso vietos, kadangi naudojant VoiceOver (iOS) ir NVDA jie pirmiausai nuskaito modalo pavadinimą, o ne tai kas tuo metu yra fokusuojama.
• Tokiu atveju <dialog> komponentas (apie kurį skaitykite žemiau) tinkamai ir prognozuojamai veikia visose aplinkose ir skaityklėse.

Norėdami sužinoti daugiau informacijos kodėl toks pasiūlyms duotas, peržiūrėkite ekrano skaityklės testavimo rezultatus.

Modalo spąstai ir valdymas

Turint fokusą modale yra labai svarbu to fokuso nepamesti iš pačio modalo. Naudotojai, kurie kurie naviguoja klaviatūra arba ekrano skaitykle gali nežinoti kur čia yra modalo pradžia ar pabaiga, dėl to yra svarbu integruoti klaviatūros ir skaityklės fokuso spąstus (focus trap). Jie, paprastai tariant, neleidžia išeiti iš modalo nepasirinkus mygtuko ar nepaspaudus Escape.

Norėdami išbandyti ar teisingai veikia klaviatūros spąstai, esant modale paspauskite TAB, kad šokinėtumėte komponentais į priekį ir SHIFT-TAB - atgal. Jeigu fokusas neišeina už modalo ribų, šaunu! O jeigu ne, skaitykite toliau kaip galite jį gana lengvai pas save pasidaryti.

Modalo HTML atributai

Modalas gali turėti skirtingus HTML ir ARIA atributus ir juos norėčiau trumpai apžvelgti.

Atributų ir palaikymo suvestinė

VoiceOver (Mac Chrome ir Safari), NVDA (Chrome)

TalkBack (Chrome)

VoiceOver (iOS Safari)

Beveik išgelbėtojas Dialog elementas

<dialog> elementas yra gana naujas, bet jau plačiai palaikomas naršyklių elementas (95%), kuris gali stipriai padėti supaprastinti kodo eilučių kiekį. Pagrindiniai jo pliusai:

1. Užtikrina klaviatūros ir ekrano skaityklės spąstus.
2. Automatiškai uždeda rolę (dažniausiai).
3. Leidžia „Escape“ mygtuku išjungti modalą.
4. Turi integruotą užsklandą kurią galima keisti su ::backdrop CSS.
5. Uždėjus modalo viduje esančiam elementui autofocus atributą, jis automatiškai gaus fokusą iškvietus patį modalą.

Ekrano skaityklių elgsena su dialogo elementu

Apibendrinant

Norint, kad modalai būtų prieinami visiems vartotojams svarbu tinkamai juos sukonfigūruoti. Tai apima vizualinį atskyrimą, kad už modalo esanti informacija būtų aiškiai pavaizduota kaip neprieinama, teisingą fokuso valdymą, klaviatūros spąstų sukūrimą, ir reikalingų ARIA atributų, tokių kaip aria-labelledby, aria-describedby, role="alertdialog" naudojimą. Naujas HTML <dialog> elementas gali labai supaprastinti modalo kūrimą, nes jis automatiškai suteikia daugelį reikalingų funkcijų.

Kilus klausimams ar atradus kokių straipsnyje netikslumų susisiekite su manimi - tomas@gecevicius.lt

Ačiū!

Papildoma informacija

Atrasti niuansai

• Norint iškviesti <dialog> patariu naudoti funkciją showModal(), tik tokiu atveju modalas gali būti išjungiamas su Esc mygtuku (su show() funkcija tai neveikia).
• Firefox naršyklėje neveikia <dialog> autofokusas. Autofokusas užsideda ant pačio modalo, o ne ant to elemento kuris buvo nurodytas.
• VoiceOver (Mac) skaityklė nepasako aria-labelledby informacijos jeigu nėra uždėtas role=alertdialog atributas.
• VoiceOver (iOS) uždėjus role=alertdialog atributą skaityklė nusako visus iš eilės elementus, nesvarbu ar yra uždėtas aria-labelledby atributas ar ne.
• TalkBack skaityklėje <dialog> elementas yra naudingas tik spąstams. Rolės ir aria-labelledby atributai neveikia. Standartiniuose modaluose rolės pasakymas esant role atributui veikia tik fokusą dedant į patį modalą.

Testuota su

• Windows - Chrome - 127.0.6533.100
• Android - Chrome - 127.0.6533.103
• Mac - Chrome - 127.0.6533.120
• iOS - Safari - 16.7.8

Testavimo rezultatai

Ekrano skaityklės elgsena su skirtingais fokusavimo metodais naudojant <dialog>

Ekrano skaityklės elgsena su skirtingais fokusavimo metodais naudojant įprastą modalą.