Iššokantieji langai yra veiksmingas įrankis pritraukti potencialius klientus, reklamuoti pasiūlymus arba padidinti vartotojų įtraukimą į „WordPress“ svetaines. Tačiau prastai suprojektuoti iššokantys langai gali sukurti didelių kliūčių neįgaliesiems pasiekti. Užtikrinant, kad jūsų „WordPress“ iššokantys langai būtų pasiekiami, ne tik pagerinama vartotojo patirtis, bet ir suderinama su žiniatinklio turinio prieinamumo gairėmis (WCAG). Šiame vadove išnagrinėsime, kaip sukurti prieinamus „WordPress“ iššokančiuosius langus, kurie būtų įtraukūs ir patogūs vartotojui.
Kodėl prieinamumas svarbus „WordPress“ iššokantiems langams
Prieinamumas yra labai svarbus iškylančiiesiems langams, nes jie gali sutrikdyti naršymą, jei jie nebus tinkamai įdiegti. Pagrindinės priežastys, kodėl iššokantys langai tampa prieinami, yra šios:
- Įtraukiantis dizainas: Užtikrina, kad naudotojai su negalia galėtų sąveikauti su jūsų turiniu.
- SEO pranašumai: Paieškos sistemos mėgsta prieinamas svetaines.
- Teisinė atitiktis: Sumažina prieinamumo įstatymų, tokių kaip ADA arba EN 301 549, nesilaikymo riziką.
Dažnos pritaikymo neįgaliesiems problemos iškylančiuose languose
Prieš diegiant sprendimus, būtina suprasti įprastas iššokančiųjų langų pasiekiamumo problemas:
- Iššokantieji langai, kuriuose nėra dėmesio, todėl vartotojai negali efektyviai bendrauti.
- Trūksta klaviatūros naršymo norint atidaryti, sąveikauti ir uždaryti iššokančiuosius langus.
- Trūksta ARIA vaidmenų ir ekrano skaitytuvų etikečių.
- Iššokantys langai su prastu spalvų kontrastu arba neįskaitomais šriftais.
Geriausia prieinamų iššokančiųjų langų praktika
Vykdykite šią geriausią praktiką, kad „WordPress“ iššokantys langai būtų pasiekiami:
1. Pridėkite ARIA vaidmenis ir etiketes
Naudokite ARIA (Accessible Rich Internet Applications) vaidmenis ir etiketes, kad padėtumėte ekrano skaitytuvams suprasti iššokančiųjų langų struktūrą:
- naudojimas
role="dialog"iššokančiam konteineriui. - Įtraukti
aria-labelledbybeiaria-describedbyapibūdinti iššokančiojo lango paskirtį.
Prenumeruokite mūsų naujienlaiškį Gaukite naujausius atnaujinimus tiesiai į gautuosius.
2. Įdiekite dėmesio valdymą
Užfiksuokite židinį iššokančiajame lange, kai jis aktyvus, kad vartotojai negalėtų sąveikauti su fono elementais:
- Perkelkite židinį į pirmąjį interaktyvųjį elementą (pvz., uždarymo mygtuką), kai atsidarys iššokantis langas.
- Uždarius iššokantįjį langą, atkurkite paleidimo elementą.
Norėdami efektyviai valdyti fokusą, naudokite JavaScript.
3. Įjunkite klaviatūros navigaciją
Užtikrinkite, kad vartotojai galėtų atidaryti, sąveikauti ir uždaryti iššokančiuosius langus naudodami tik klaviatūrą:
- Pateikite a
tabindexatributas visiems interaktyviems elementams iššokančiajame lange. - Įtraukite matomą ir veikiantį uždarymo mygtuką, kurį galima suaktyvinti naudojant
EnterorSpaceRaktas.
4. Užtikrinkite tinkamą kontrastą ir skaitomumą
Palaikykite tinkamą kontrastą tarp teksto ir fono, kad iššokančiojo lango turinys būtų skaitomas:
- Laikykitės WCAG gairių dėl spalvų kontrasto (mažiausiai 4.5:1 įprastam tekstui).
- Norėdami geriau skaityti, naudokite didelius, įskaitomus šriftus.
5. Pateikite alternatyvų ne „JavaScript“ naudotojams
Ne visi vartotojai įgalino „JavaScript“. Pateikite atsarginį mechanizmą, užtikrinantį, kad kritinis turinys iššokančiajame lange vis tiek būtų pasiekiamas.
6. Prieinamumo testas
Įdiegę aukščiau nurodytus veiksmus, išbandykite iššokančiuosius langus naudodami pritaikymo neįgaliesiems įrankius:
- naudojimas BANGA or AX nustatyti prieinamumo problemas.
- Imituokite tik klaviatūros naršymą, kad užtikrintumėte patogumą.
- Išbandykite naudodami ekrano skaitytuvą, kad patikrintumėte ARIA vaidmenis ir etiketes.
Populiariausi „WordPress“ iššokantys papildiniai su pritaikymo neįgaliesiems funkcijomis
Štai keletas „WordPress“ papildinių, palaikančių prieinamą iššokančiųjų langų kūrimą:
| Prijungti | Pritaikymo neįgaliesiems funkcijos |
|---|---|
| Popup Maker | ARIA palaikymas, fokusavimo valdymas, klaviatūros navigacija. |
| OptinMonster | Tinkinami šablonai su kontrasto parinktimis ir ARIA etiketėmis. |
| Stumdymasis | Interaktyvus dizainas su pasiekiamais nustatymais. |
| Ninja Iššokantys langai | Pagrindiniai pritaikymo neįgaliesiems nustatymai ir mobiliesiems pritaikytas dizainas. |
DUK
Kodėl iššokančiųjų langų pasiekiamumas yra svarbus?
Prieinami iššokantys langai užtikrina įtraukimą, sumažina atmetimo rodiklius ir atitinka teisinius standartus, taip pagerindami naudotojo patirtį visiems lankytojams.
Kas yra ARIA vaidmenys ir kodėl jie reikalingi iššokantiems langams?
ARIA vaidmenys, pvz role="dialog", padeda ekrano skaitytuvams atpažinti ir interpretuoti iššokančiųjų langų turinį, kad jis būtų prieinamas regėjimo negalią turintiems naudotojams.
Kaip padaryti, kad mano iššokančiųjų langų klaviatūra būtų prieinama?
Įgalinkite klaviatūros naršymą nustatydami tabindex visiems interaktyviems elementams ir užtikrina, kad iššokantįjį langą būtų galima atidaryti ir uždaryti naudojant klavišus.
Ar visi „WordPress“ iššokantys papildiniai palaiko pritaikymą neįgaliesiems?
Ne, ne visi papildiniai teikia pirmenybę prieinamumui. Pasirinkite papildinius, pvz., „Popup Maker“ arba „OptinMonster“, kad pagerintumėte pasiekiamumo funkcijas.
Ar iššokantys langai gali paveikti SEO?
Taip, prastai sukurti iššokantys langai gali padidinti atmetimo rodiklius ir pakenkti naudotojų patirčiai, o tai neigiamai paveikti SEO. Prieinami iššokantys langai sumažina šią riziką.
Kaip patikrinti iššokančiųjų langų pasiekiamumą?
Naudokite tokius įrankius kaip WAVE, Lighthouse ir rankinio klaviatūros naršymo testus, kad įvertintumėte iššokančiųjų langų pasiekiamumą.
