Pagerinkite savo svetainės prieinamumą vos 1 spustelėkite – pasitiki daugiau nei 60,000 svetainių visame pasaulyje

Kaip padaryti iššokančiuosius langus pasiekiamus „WordPress“ svetainėse

Iliustracija, kurioje pavaizduoti prieinami iššokančiųjų langų projektavimo būdai, skirti „WordPress“ svetainėms, siekiant pagerinti patogumą ir įtraukties.
paskelbtas

Marlene Fichtner

Įkelta

Gruodžio 11 d., 2024

Nemokamas prieinamumo kontrolinis sąrašas
Gaukite nemokamą kontrolinį sąrašą su svarbiausiais prieinamumo patikrinimais.

Iššokantys langai gali būti galinga priemonė norint atkreipti dėmesį į specialius pasiūlymus, renkant naujienlaiškių registracijas arba teikiant svarbią informaciją. Tačiau nekreipiant dėmesio į prieinamumą, jie gali greitai tapti varginančia kliūtimi vartotojams, kurie naudojasi pagalbinėmis technologijomis. Užtikrinti, kad iššokantieji langai būtų įtraukti, reiškia galvoti ne tik apie vizualinį patrauklumą – sutelkti dėmesį į klaviatūros naudojimą, reikšmingus ARIA atributus, loginį fokusavimo valdymą ir dėmesingas paleidimo strategijas. Laikydamiesi šios geriausios praktikos užtikrinsite teisingesnę naudotojų patirtį, pagerinsite prekės ženklo reputaciją ir, tikėtina, bendrai įsitrauksite.

1. Pradėkite nuo pritaikymo neįgaliesiems fondo

Veiksmas: Pradėkite pasirinkdami įrankius, temas ar iššokančius papildinius, kurie pabrėžia prieinamumą. Ne visi „WordPress“ iššokantys sprendimai yra vienodi. Kodėl: Papildinys, sukurtas atsižvelgiant į pritaikymą neįgaliesiems, suteiks tokias funkcijas, kaip klaviatūros naršymas, sumažinant rankinio darbo poreikį. Patarimas: Peržiūrėkite dokumentus, naudotojų atsiliepimus ir tiesiogiai paklauskite papildinių kūrėjų apie pritaikymo neįgaliesiems atitiktį. Rinkitės tuos, kuriuose minimi ARIA atributai, fokusavimas ir praleidžiamos nuorodos.

2. Užtikrinkite, kad klaviatūra būtų vykdoma nuo pat pradžių

Veiksmas: Naudotojai turėtų turėti galimybę suaktyvinti, sąveikauti ir atmesti jūsų iššokantįjį langą naudodami tik savo klaviatūrą. Kaip: Išbandykite iššokantįjį langą paspausdami tabuliavimo klavišą, kad pereitumėte pirmyn per spustelėjamus elementus, ir Shift + Tab, kad judėtumėte atgal. Įsitikinkite, kad paspaudus Enter arba tarpo klavišą suaktyvinami mygtukai ir nuorodos. Kai pasirodys iššokantis langas, židinys turėtų nedelsiant judėti jo viduje. Kai jis uždarytas, židinys turėtų grįžti į elementą, kuris jį atidarė. Patarimas: Pateikite aiškiai matomą fokusavimo kontūrą, kad vartotojai tiksliai žinotų, kuris elementas pasirinktas. Geros fokusavimo būsenos yra labai svarbios norint orientuotis ir išvengti painiavos.

3. Naudokite ARIA vaidmenis ir atributus apgalvotai

Veiksmas: Pridėkite atitinkamų ARIA atributų, kurie padės pagalbinėms technologijoms interpretuoti iššokantįjį langą. Kaip: Suvyniokite iššokančiojo lango turinį į konteinerį su role="dialog" (bendriesiems iššokantiems langams) arba role="alertdialog" (dėl skubių pranešimų). Nurodykite iššokančiojo lango pavadinimą ir aprašą naudodami aria-labelledby bei aria-describedby. Tai leidžia ekrano skaitytuvo naudotojams iš karto suprasti iššokančiojo lango paskirtį. Patarimas: Atnaujinkite ARIA atributus. Jei iššokančiojo lango turinys keičiasi dinamiškai (pvz., perjungiant veiksmus kelių žingsnių forma), įsitikinkite, kad jūsų ARIA nuorodos vis dar turi prasmę.

4. Valdykite dėmesį, kad išvengtumėte dezorientacijos

Veiksmas: Valdykite, kur nukreipiamas klaviatūros fokusavimas, kai atidaromas ir uždaromas iššokantis langas. Kaip: Kai pasirodys iššokantis langas, programiškai nustatykite .focus() pirmame jo viduje esančiame interaktyviame elemente, pvz., uždarymo mygtuke arba antraštėje. Tai signalizuoja vartotojams, kad jie dabar dirba iššokančiojoje sąsajoje. Kai iššokantis langas uždaromas, grąžinkite židinį į aktyvuojantį elementą (pvz., mygtuką arba nuorodą, kuri jį atidarė). Patarimas: Tinkamas fokusavimo valdymas apsaugo nuo „fokusavimo praradimo“, kai vartotojai staiga nežino, kurioje puslapio vietoje yra. Be jo jie gali netyčia sąveikauti su elementais, paslėptais po iššokančiuoju langu, arba visiškai prarasti navigaciją.

5. Įdiekite fokusavimo gaudymą

Veiksmas: Neleiskite, kad naudotojas pabėgtų iš iššokančiojo lango, kol jis nebus uždarytas. Kodėl: Be židinio fiksavimo, vartotojai gali peržengti iššokančiojo lango ribas ir pereiti prie už jo paslėptų elementų, o tai gali būti painu arba net neįmanoma ekrano skaitytuvo naudotojams suprasti. Kaip: Paprastas „JavaScript“ fragmentas gali aptikti, kada židinys pasiekia paskutinį interaktyvųjį elementą iššokančiajame lange, ir grąžinti jį į pirmąjį. Tai užtikrina uždarą, intuityvią klaviatūros naršymo kilpą.

6. Pateikite aiškų uždarymo mechanizmą

Veiksmas: Pridėkite gerai pažymėtą uždarymo mygtuką ir įsitikinkite, kad pabėgimo klavišas gali uždaryti iššokantįjį langą. Kodėl: Vartotojams reikia greito, intuityvaus būdo atmesti iššokantįjį langą, ypač jei jis buvo suaktyvintas automatiškai. Pasikliauti maža nepažymėta „X“ piktograma gali būti ne visiems aišku. Patarimas: Naudokite su aprašomuoju tekstu, pvz., „Uždaryti“ arba „Atsisakyti“, o ne tik piktogramą. Ekrano skaitytuvo naudotojams tai aiškiai nurodo, kaip išeiti. Be to, įsitikinkite, kad paspaudus klavišą Escape uždaromas iššokantis langas ir siūlomas greitas pabėgimo kelias.

7. Turinys turi būti paprastas ir koncentruotas

Veiksmas: Iššokantieji langai turėtų pateikti glaustą, lengvai suprantamą informaciją. Kodėl: Pernelyg sudėtingas arba ilgas iššokantis turinys pribloškia visus vartotojus, tačiau gali ypač apsunkinti tuos, kurie naudojasi ekrano skaitytuvais. Kaip: Naudokite trumpą antraštę, trumpą aiškinamąją pastraipą ir aiškų raginimą veikti (CTA). Jei reikia papildomos informacijos, susiekite su tam skirtu puslapiu, o ne per daug įstumkite į iššokantįjį langą. Patarimas: Paprastumas sumažina pažinimo apkrovą ir užtikrina, kad vartotojai galėtų greitai veikti arba atmesti iššokantįjį langą be painiavos.

8. Venkite nereikalingų ar automatinių aktyviklių

Veiksmas: Rodyti iššokančiuosius langus pagal vartotojo veiksmus arba pagrįstą delsą. Venkite kelių persidengiančių iššokančiųjų langų arba įkyraus laiko nustatymo. Kodėl: Iššokantys langai, kurie pasirodo iš karto arba per dažnai, gali išgąsdinti vartotojus, padidinti pažinimo įtampą ir priversti juos naršyti nepageidaujamus raginimus. Tai gali būti ypač įtempta tiems, kurie turi dėmesio negalią. Patarimas: Apsvarstykite aktyviklius, pvz., mygtuko „Sužinokite daugiau“ paspaudimą arba slinkimą iki tam tikro taško, o ne automatiškai suaktyvinti iššokančiuosius langus iškart įkeliant puslapį.

9. Pateikite vizualines ir kontekstines nuorodas

Veiksmas: Į iššokantįjį langą įtraukite aprašomąjį pavadinimą arba antraštę ir įsitikinkite, kad jis vizualiai skiriasi. Kodėl: Antraštė padeda visiems vartotojams greitai nustatyti, apie ką yra iššokantis langas. Ekrano skaitytuvo naudotojams – aprašomoji antraštė (susieta su aria-labelledby) iš karto aiškiai parodo iššokančiojo lango paskirtį. Patarimas: Iššokančiajame lange naudokite antraštes (pvz., H2) ir nurodykite jas aria-labelledby todėl ekrano skaitytuvas apie tai praneš, kai tik atsidarys iššokantis langas.

10. Bandymas su pagalbinėmis technologijomis ir keliais įrenginiais

Veiksmas: Rankiniu būdu išbandykite iššokantįjį langą naudodami ekrano skaitytuvus (NVDA sistemoje „Windows“, „VoiceOver“ sistemoje „MacOS“ / „iOS“), tik klaviatūros naršymą ir įvairias naršykles / įrenginius. Kodėl: Kiekvienas įrankis ar įrenginys gali atskleisti unikalius iššūkius. Automatiniai įrankiai gali išryškinti įprastas problemas, tačiau realaus pasaulio testavimas suteikia įžvalgų apie tikrąją naudotojo patirtį. Patarimas: Jei įmanoma, į testavimo procesą įtraukite vartotojus su negalia arba rinkkite atsiliepimus iš internetinių bendruomenių, kurios daugiausia dėmesio skiria prieinamumui. Šis praktinis požiūris užtikrina, kad jūsų teorinė geriausia praktika virstų tikru įtraukimu.

11. Laikui bėgant tobulėkite

Veiksmas: Prieinamumas nėra vienkartinės pastangos. Pertvarkydami svetainės dizainą, įtraukdami naujų iššokančiųjų langų ar patobulindami funkcijas, dar kartą peržiūrėkite šias gaires. Kodėl: Standartai kinta, vartotojų poreikiai keičiasi ir gali keistis jūsų svetainės turinio strategija. Išlaikant pasiekiamumą užtikrinama, kad būsite orientuoti į vartotoją. Patarimas: Suplanuokite periodinius prieinamumo auditus. Kiekvieną kartą, kai pristatote naują iššokantįjį langą arba keičiate jo stilių, iš naujo išbandykite. Plano ir vidinių vadovų atnaujinimas užtikrina ilgalaikę sėkmę.

12. Išmokykite savo komandą ir klientus

Veiksmas: Įsitikinkite, kad dizaineriai, kūrėjai, turinio kūrėjai ir suinteresuotosios šalys supranta, kodėl svarbūs pasiekiami iššokantieji langai. Kodėl: Bendradarbiavimo metodas užtikrina, kad prieinamumas nėra tik kūrėjo darbas. Turinio redaktoriai gali nepamiršti trumpo teksto, dizaineriai gali pabrėžti matomas fokusavimo būsenas, o kokybės užtikrinimo bandytojai tikrins, ar nėra klaviatūros spąstų. Patarimas: Pasidalykite šiomis gairėmis viduje arba sukurkite paprastą kontrolinį sąrašą. Kai visi vertina prieinamumą, pagerėja visa vartotojo patirtis.

Šis tinklaraščio įrašas skirtas tik informaciniams tikslams ir nėra laikomas teisine konsultacija. Mes neteikiame jokių pareiškimų ar garantijų dėl turinio tikslumo, išsamumo ar pritaikomumo. Prieinamumo reikalavimai gali skirtis priklausomai nuo jurisdikcijos ir naudojimo atvejo. Tiek, kiek leidžia įstatymai, mes neprisiimame jokios atsakomybės, kylančios dėl pateiktos informacijos pasikliovimo. 

Susiję straipsniai

Geriausias „WordPress“ viktorinos papildinys

Interaktyvios viktorinos yra viena iš galingiausių priemonių įsitraukimui, potencialių klientų paieškai ir…

Kaip optimizuoti daugiakalbių „WordPress“ svetainių prieinamumą

Prieinamumo užtikrinimas daugiakalbėse „WordPress“ svetainėse yra labai svarbus kuriant įtraukią žiniatinklio patirtį…

Kaip sukurti prieinamas vaizdų karuseles „WordPress“.

Vaizdų karuselės yra vizualiai patrauklūs elementai, kurie gali padidinti jūsų „WordPress“ patrauklumą…

Kaip išspręsti trečiųjų šalių „WordPress“ temų pritaikymo neįgaliesiems problemas

Trečiųjų šalių „WordPress“ temos dažnai pasižymi įspūdingu dizainu, tačiau jose gali trūkti integruotų pritaikymo neįgaliesiems funkcijų.…

Kaip pridėti praleistas naršymo nuorodas į „WordPress“ meniu

Praleidžiamos naršymo nuorodos yra būtinos norint pagerinti prieinamumą jūsų „WordPress“ svetainėje. Jos leidžia…

Kaip užtikrinti „WordPress“ tinklaraščio įrašų prieinamumą

Tinklaraščio įrašų prieinamumas užtikrina, kad jūsų turinys būtų įtraukus ir tinkamas naudoti visiems…

Kaip sukurti prieinamas formas „Elementor“.

Kuriant prieinamas formas „Elementor“ sistemoje užtikrinama, kad visi vartotojai, įskaitant ir neįgaliuosius, galėtų…

Žingsnis po žingsnio: „WooCommerce“ pritaikymo neįgaliesiems problemų sprendimas

„WooCommerce“ yra populiari internetinių parduotuvių kūrimo platforma, tačiau užtikrinti jos prieinamumą yra…

Padarykite savo svetainę prieinamesnę jau šiandien

Pasitiki daugiau nei 60,000 1 svetainių – sukurta Europoje. „OneTap“ yra populiariausias „WordPress“ pritaikymo neįgaliesiems įskiepis. Pagerinkite pritaikymą neįgaliesiems per 1 minutę – nereikia programuoti.
1
Pasirinkite savo paketą
2
Parsisiųsti Plugin
3
Įdiekite vienu spustelėjimu
Baigtas
1
Pasirinkite „Package“
2
Parsisiųsti Plugin
3
įrengti
Baigtas
Nemokamas „WordPress“ prieinamumo kontrolinis sąrašas

Kokias klaidas daro dauguma „WordPress“ svetainių ir kaip jas ištaisyti. Gaukite praktišką, nuoseklų kontrolinį sąrašą, kad galėtumėte pastebėti dažniausiai pasitaikančias pritaikymo neįgaliesiems problemas savo „WordPress“ svetainėje.