Əlçatan modal dialoq dizaynı istifadəçilərin siçandan istifadə etmədən məzmunla qarşılıqlı əlaqədə olmasını təmin etmək üçün klaviatura qarşılıqlı əlaqə standartlarına ciddi şəkildə riayət olunmasını tələb edir. Modal qurarkən istifadəçilərin yalnız standart düymələrdən istifadə etməklə dialoq daxilində aça, bağlaya və naviqasiya edə bilməsini təmin etməlisiniz. Bu, fokus vəziyyətini idarə etməyi əhatə edir ki, dialoq aktiv olarkən o, modal konteyner daxilində qalsın və köməkçi texnologiya istifadəçilərini qıcıqlandıra biləcək arxa fon məzmunu ilə təsadüfi qarşılıqlı əlaqənin qarşısını alsın.
Modallar üçün W3C WAI-ARIA tələbləri hansılardır?
W3C WAI-ARIA Müəlliflik Təcrübələri müəyyən edir ki, modalın açılması fokusu modala yönəltməli və fokusun tutulmasından istifadə edərək dialoq daxilində klaviatura naviqasiyasını məhdudlaşdırmalıdır. Bu, veb əlçatanlıq standartlarına cavab verməyi hədəfləyən istənilən proqramçı üçün əsas tələbdir. Bu tətbiq olmadan ekran oxuyucusundan istifadə edənlər təsadüfən fokuslarını modalın arxasındakı elementlərə keçirə bilər ki, bu da qüsurlu təcrübə yaradır. Modal konteynerini ‘dialog’ rolu ilə təyin etməli və pəncərənin məqsədini aktivləşdirildiyi anda bildirmək üçün ‘aria-labelledby’ və ya ‘aria-label’ istifadə edərək təsviri etiket təmin etməlisiniz.
Effektiv fokus tutulmasını necə həyata keçirirsiniz?
Fokusun tutulması klaviatura fokusunun səhifə gövdəsinə qaçmaq əvəzinə modal elementləri arasında dövr etməsini təmin edən mexanizmdir. İstifadəçi modalın son interaktiv elementində olarkən Tab düyməsini sıxarsa, fokus ilk interaktiv elementə qayıtmalıdır. Əksinə, ilk elementdən Shift+Tab düymələrini basmaq fokusu son elementə köçürməlidir. Bu dövrə xüsusilə Tab düyməsi üçün keydown hadisəsini izləyən JavaScript hadisə dinləyiciləri vasitəsilə ciddi şəkildə idarə olunmalıdır. Bu hadisələrə müdaxilə etməklə siz istifadəçinin bütün sessiya boyunca nəzərdə tutulmuş qarşılıqlı əlaqə sahəsində qalmasını təmin edirsiniz.
Modalın əsas komponentləri hansılardır?
- Köməkçi texnologiyalar üçün əhatə dairəsini təyin etmək üçün role=’dialog’ olan konteyner elementi.
- Modalın məqsədini müəyyən etmək üçün aria-labelledby istifadə edən aydın başlıq.
- Ekran oxuyucuları üçün açıq şəkildə görünən və düzgün etiketlənmiş bağlama düyməsi.
- Məzmunun vizual düzülüşünə uyğun gələn məntiqi tab sırası.
- Arxa fonu tutqunlaşdıran və modalın aktiv olduğunu göstərən örtük elementi.
Klaviatura dəstəyi niyə dialoqlar üçün vacibdir?
Klaviatura dəstəyi əlçatan modal dialoq dizaynının sütunudur, çünki o, göstərici cihazdan istifadə edə bilməyən istifadəçilər üçün etibarlı alternativ təmin edir. Bir çox istifadəçi forma sahələri, keçidlər və düymələr arasında tullanmaq üçün Tab düyməsinə güvənir. Əgər modal bu hərəkəti düzgün dəstəkləmirsə, o, tərkibindəki məlumatlara və ya funksiyalara giriş effektiv şəkildə bloklayır. Siz Escape düyməsinin modalı bağlamaq üçün proqramlaşdırıldığından əmin olmalısınız, çünki bu, müvəqqəti pəncərələri bağlamaq üçün standart istifadəçi gözləntisidir. Tətbiqinizi yalnız klaviatura ilə sınamaq modal dizaynınızın əsas istifadə ehtiyaclarına cavab verib-vermədiyini yoxlamağın sadə yoludur.
Alien Road əlçatan dizayn standartlarını necə tətbiq edir
Alien Road-da biz müştəri layihələrində modalların tətbiqi üçün standart prosesə əməl edirik. Müştəri üçün Shopify mağazası üçün abunə pop-up-ı kimi xüsusi komponent qurarkən biz mövcud dizaynı W3C nümunələri ilə audit etməklə başlayırıq. Komandamız HTML5 istifadə edərək təmiz, semantik struktur yaradır, sonra fokus idarəçiliyini idarə etmək üçün lazım olan ARIA atributlarını əlavə edir. Daha sonra biz gözlənilən klaviatura davranışını sənədləşdiririk və təcrübəni yoxlamaq üçün ekran oxuyucularından istifadə edərək əllə testlər həyata keçiririk. Bu yanaşma dialoqun sayta daxil olmaq üçün istifadə etdikləri cihazdan və ya köməkçi texnologiyadan asılı olmayaraq bütün istifadəçilər üçün proqnozlaşdırıla bilən təcrübə təmin etməsini təmin edir.
Qarşılıqlı əlaqə nümunələrinin müqayisəsi
| Xüsusiyyət | Standart Modal | Zəif İcra |
|---|---|---|
| Fokusun Tutulması | Aktivdir | Yoxdur |
| Escape Düyməsi | Modali Bağlayır | Heç bir təsiri yoxdur |
| Rol Atributu | dialoq | div |
Hansı ümumi səhvlərdən qaçınmalısınız?
- Modal bağlandıqdan sonra fokusun tətik elementinə qaytarılmaması.
- Modal hələ də açıq ikən səhifənin modalın arxasında sürüşməsinə icazə verilməsi.
- Ekran oxuyucuları üçün sənəd strukturunu pozan uyğunsuz başlıq səviyyələrinin istifadəsi.
- Bağlama düyməsi üçün aydın etiket təmin edilməməsi, tez-tez onu boş ikon kimi buraxması.
- Modal aktiv olduqda arxa fon məzmununun aria-hidden vəziyyətini yeniləməyi unutmaq.
Bu həftə haradan başlamaq lazımdır
Veb saytınızda hazırda istifadə olunan modalları nəzərdən keçirməklə başlaya bilərsiniz. Bir əsas modalı müəyyənləşdirin və yalnız Tab düyməsindən istifadə edərək onun bütün düymələrində naviqasiya edə biləcəyinizi yoxlayın. Fokusun modaldan çıxdığını və ya sıxışdığını görsəniz, fokus idarəetmə məntiqinizin yenilənməsinə üstünlük verin. Fokus vəziyyətini düzgün idarə edib-etmədiyinizi görmək üçün modalın açılıb-bağlanma funksiyaları üçün mövcud JavaScript-i nəzərdən keçirin. Ən çox istifadə olunan modallarınızdakı bu problemləri həll etməklə siz saytınızın istifadəyə yararlılığını daha geniş ziyarətçi dairəsi üçün əhəmiyyətli dərəcədə yaxşılaşdıra bilərsiniz.
Tez-tez Verilən Suallar
Hər bir modal fokus tutmalıdır?
Bəli, istifadəçinin aktiv kontekstdə qalmasını təmin etmək üçün hər bir modal dialoq fokus tutmalıdır. Bu, modal açıq ikən istifadəçinin təsadüfən arxa fon səhifəsi ilə əlaqə qurmasının qarşısını alır. Fokus məhdudlaşdırılmaqla siz veb məzmununuzla qarşılıqlı əlaqə qurmaq üçün ekran oxuyucularına və ya klaviatura naviqasiyasına güvənən istifadəçilər üçün vacib olan sabit təcrübə təqdim edirsiniz.
Bağlama düyməsini idarə etməyin ən yaxşı yolu nədir?
Bağlama düyməsini idarə etməyin ən yaxşı yolu onu əlçatan etiketi olan standart düymə elementinə çevirməkdir. Düymənin Tab düyməsi vasitəsilə əlçatan olmasını və asanlıqla daxil olmaq üçün tab sırasındakı ilk və ya son element olmasını təmin etməlisiniz. Bağla və ya Çıxış kimi aydın, təsviri mətndən istifadə ekran oxuyucularının istifadəçiyə düzgün məlumat verməsini təmin edir.
Modal əlçatanlığını necə sınaya bilərəm?
Modal əlçatanlığını sınamağın ən təsirli yolu siçanınızı ayırmaq və yalnız klaviaturanızdan istifadə edərək modal ilə əlaqə qurmağa çalışmaqdır. Əgər heç bir problem olmadan modaldakı hər bir elementi aça, bağlaya və naviqasiya edə bilirsinizsə, möhkəm təməriniz var. Bundan əlavə, NVDA və ya VoiceOver kimi ekran oxuyucusundan istifadə etmək modalın istifadəçilərə necə elan edildiyini eşitməyə kömək edəcək.
Modallar üçün kitabxanadan istifadə etməliyəmmi?
Kitabxana W3C əlçatanlıq standartlarına əməl etdiyi təqdirdə, kitabxanadan istifadə vaxta qənaət edə bilər. Bir çox müasir UI çərçivələri fokus idarəçiliyini avtomatik idarə edən əlçatan komponentləri ehtiva edir. Əgər kitabxana seçirsinizsə, həmişə çıxışın fokus tutulması və rol atributları üçün tələblərə cavab verdiyini yoxlayın. Əgər özünüz qurursunuzsa, məntiqi sadə saxlayın və standart DOM manipulyasiya üsullarına riayət edin.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn