Məzmuna keçid keçidi yalnız klaviatura istifadəçilərinə əsas məzmuna birbaşa çatmaq üçün naviqasiya menyuları və ya axtarış çubuqları kimi təkrarlanan başlıq elementlərini yan keçməyə imkan verən gizli naviqasiya alətidir. Əsas məlumata birbaşa yol təmin etməklə siz TAB düymələrinə və ya ekran oxuyucularına güvənən ziyarətçilər üçün təcrübəni yaxşılaşdırırsınız. Bu mexanizm birdən çox səhifədə təkrarlanan məzmun bloklarını yan keçməyin üsulunu tələb edən WCAG Uğur Meyarı 2.4.1 tərəfindən tələb olunur.
Niyə məzmuna keçid keçidi istifadəçiləriniz üçün zəruridir?
Əksər müasir veb-saytlarda loqolar, əsas naviqasiya, sosial media nişanları və axtarış daxiletmələri olan böyük başlıqlar var. Siçandan istifadə edən görən istifadəçi üçün bu elementlərdə naviqasiya sürətli və təbiidir. Lakin naviqasiya üçün klaviaturaya güvənən istifadəçi üçün başlığdakı hər bir interaktiv element TAB dayanacağı tələb edir. Başlığınızda on beş keçid varsa, ziyarətçi səhifənizin ilk abzasınıza çatmaq üçün sadəcə TAB düyməsini on beş dəfə basmalıdır. Bu proses motor pozğunluğu olan insanlar üçün əhəmiyyətli sürtünmə və məyusluq yaradır.
Məzmuna keçid keçidinin tətbiqi istifadəçinin fokus nöqtəsini effektiv şəkildə sıfırlayır. İstifadəçi səhifədə ilk dəfə TAB düyməsini basdıqda, bu keçid onların qarşılaşdığı ilk interaktiv elementə çevrilir. Onu seçmək fokusu dərhal adətən #main-content kimi ID ilə müəyyən edilmiş əsas məzmun sahəsinə köçürür. Bu sadə tənzimləmə üstünlük verdikləri aparat və ya daxiletmə üsulundan asılı olmayaraq saytınızın hər kəs üçün istifadə edilə bilən olmasını təmin edir. Bu, peşəkar veb dizaynda standart təcrübədir.
Məzmuna keçid keçidini necə qurursunuz?
Texniki tətbiq iki əsas komponentə əsaslanır: HTML-də anker nöqtəsi və klaviatura fokusunu alana qədər keçidi gizlətmək üçün tələb olunan CSS. Anker keçidini body teqinizin içindəki ən birinci element kimi yerləşdirməlisiniz. Bu, səhifəni yükləyərkən ekran oxuyucusunun və ya klaviatura istifadəçisinin qarşılaşdığı ilk şeyin olmasını təmin edir. Keçidin özü əsas məzmun konteynerinizdə mövcud olan ID-yə işarə etməlidir.
Addım-addım tətbiq planı
- HTML strukturunuzda açılış teqindən dərhal sonra anker teqi yerləşdirin.
- Href atributunu əsas məzmun sahənizin ID-sinə işarə etmək üçün təyin edin, məsələn: Məzmuna keç.
- Mövqeyi mütləq olaraq təyin etmək və ekrandan kənara köçürmək kimi keçidi susmaya görə vizual olaraq gizlətmək üçün CSS tətbiq edin.
- Görünən rənglərdən və yüksək kontrastlı konturdan istifadə edərək :focus statusunu alanda keçidi aydın şəkildə göstərmək üçün CSS qaydası əlavə edin.
- Əsas məzmun konteynerinizin müvafiq ID atributuna malik olduğundan əmin olun, məsələn
.
Alien Road əlçatanlıq standartlarını necə tətbiq edir?
Alien Road-da əlçatanlığa yanaşmamız hər bir inkişaf sprintinə inteqrasiya olunub. B2B SaaS şirkəti üçün yenidən dizayn kimi bir layihəni öhdəmizə götürəndə mövcud kodun struktur auditini həyata keçiririk. Keçid keçidinin ilk interaktiv element kimi düzgün yerləşdirilməsini təmin etmək üçün Sənəd Obyekt Modelini (DOM) yoxlayırıq. Biz həmçinin hədəf anker nöqtəsinin düzgün şəkildə təyin olunduğunu yoxlayırıq
Tipik iş zamanı biz həmçinin əllə klaviatura testi həyata keçiririk. Keçid keçidinin ilk TAB basıldıqdan sonra görünməsini və keçidin düzgün şəkildə işə salınmasını yoxlayırıq. Əgər fokusun itirildiyini və ya məzmunu ötürdüyünü müəyyən etsək, ardıcıllığı düzəltmək üçün hədəf ID-ni və ya tabindex atributlarını tənzimləyirik. Komandamız saytı bütün istifadəçilər üçün yüngül və sürətli saxlayan həddindən artıq mühəndislik əvəzinə funksionallığa və standartlara uyğunluğa diqqət yetirir.
Keçid keçidləri əlavə edərkən ümumi səhvlər hansılardır?
Tərtibatçıların etdiyi ümumi səhv keçid keçidini display: none və ya visibility: hidden ilə gizlətməkdir. Siz bu CSS xüsusiyyətlərindən istifadə etdikdə, klaviatura istifadəçiləri elementə diqqət yetirə bilmirlər və keçid keçidini tamamilə yararsız hala gətirirlər. Bunun əvəzinə, elementi ekrandan kənara köçürən və ya tək pikselə endirən üsullardan istifadə etməlisiniz ki, o, fokuslanana qədər görən istifadəçilər üçün görünməz qalmaqla yanaşı, brauzerin TAB dövrü üçün əlçatan qalsın.
Digər xəta zəif vizual rəy ilə bağlıdır. Keçid işləsə belə, əgər diqqət mərkəzində olduqda görünmürsə, istifadəçi ona çatdığını bilməyəcək. CSS-də həmişə aydın :focus vəziyyəti təyin etməlisiniz. Buraya səhifə fonundan fərqlənən sərhəd, fon rəngi və ya aydın kontur əlavə etmək daxildir. Bu vizual təsdiq zəif görmə qabiliyyətinə malik olan, lakin hələ də vizual işarələrə etibar edən istifadəçilər üçün vacibdir.
Əlçatanlıq naviqasiya üsullarının müqayisəsi
| Üsul | Əsas İstifadə Halları | Əlçatanlıq səviyyəsi |
|---|---|---|
| Məzmuna keç | Klaviatura naviqasiyası | Yüksək (WCAG 2.4.1) |
| Landşaftlar | Ekran oxuyucusu naviqasiyası | Yüksək (ARIA) |
| Standart TAB Sıralaması | Standart axın | Aşağı (Əllə) |
Keçid keçidinizi necə effektiv şəkildə sınaya bilərsiniz?
Keçid keçidinin sınaqdan keçirilməsi mürəkkəb proqram təminatı tələb etmir. Yalnız klaviaturadan istifadə edərək əsas test həyata keçirə bilərsiniz. Veb saytınızı yeni brauzer tabında açın və ‘Tab’ düyməsini basın. Keçid görünərsə, əsas tələbi uğurla yerinə yetirmisiniz. Sonra ‘Enter’ düyməsini basmaq fokusunuzu səhifənin əsas məzmun sahəsinə köçürməlidir. Fokus düzgün sıçrayırsa, tətbiqiniz nəzərdə tutulduğu kimi işləyir.
Daha hərtərəfli yoxlama üçün NVDA və ya VoiceOver kimi ekran oxuyucusundan istifadə edin. Bu alətlər diqqətinizi cəmlədiyiniz zaman keçidi elan edəcək. Əgər ekran oxuyucusu keçidi atlayırsa, DOM sifarişinizi yoxlamalı ola bilərsiniz. Unutmayın ki, keçid digər naviqasiya elementlərindən əvvəl HTML işarəsində mövcud olmalıdır. Səhifə yüklendikten sonra başlığınız JavaScript tərəfindən daxil edilərsə, keçid keçidinin son rendered sənəddə hələ də ilk element olmasını təmin edin.
Bu həftə haradan başlamaq lazımdır
- Yalnız klaviaturadan istifadə edərək cari ana səhifənizi və bir daxili səhifənizi yoxlayın.
- Keçid keçidinin artıq mövcud olub olmadığını görmək üçün mənbə kodunuzu yoxlayın.
- Yüksək görünürlüğü təmin etmək üçün fokus vəziyyətiniz üçün sadə CSS snippet hazırlayın.
- WordPress və ya Shopify kimi CMS-də baza şablon fayllarınıza keçid əlavə edin.
- Keçid keçidinin birinci olmasını təmin etmək üçün TAB sırasını yenidən yoxlayın.
Tez-tez Verilən Suallar
Məzmuna keçid keçidi bütün veb-saytlar üçün məcburidirmi?
WCAG Uğur Meyarı 2.4.1 birdən çox səhifədə təkrarlanan məzmun bloklarını yan keçmək üçün mexanizm tələb edir. Məzmuna keçid keçidi bu tələbi yerinə yetirməyin ən çox yayılmış yolu olsa da, naviqasiyanı yan keçmək üçün hansısa üsul təqdim etməlisiniz. Saytınızda çox az keçid olan kiçik başlığınız varsa, digər landşaft strategiyalarından istifadə edə bilərsiniz, lakin keçid keçidi uyğunluq üçün ən təhlükəsiz seçimdir.
Keçid keçidinin hər zaman görünməsi lazımdırmı?
Xeyr, siçandan istifadə edən görən istifadəçilər üçün keçidin görünməsinə ehtiyac yoxdur. CSS istifadə edərək onu susmaya görə gizli saxlamalısınız. O, yalnız klaviatura istifadəçisindən fokus aldıqda görünən olmalıdır. Bu, məzmununuzda səmərəli şəkildə naviqasiya etmək üçün ona ehtiyacı olanlar üçün funksionallığın əlçatan olmasını təmin edərkən dizaynınızı təmiz saxlayır.
Bir səhifədə bir neçə keçid ola bilərmi?
‘Axtarışa keç’ və ya ‘Altbilgiyə keç’ kimi bir neçə keçid daxil edə bilərsiniz, lakin onu sadə saxlayın. Çoxlu keçid keçidlərinin olması istifadəçiləri çaşdıra bilər. İstifadəçini birbaşa əsas məzmuna aparan etibarlı keçiddən başlayın. Bu, əsas tələbi əhatə edir və sayt strukturunuza lazımsız mürəkkəblik əlavə etmədən ən geniş auditoriyaya ən çox fayda təmin edir.
Niyə keçid keçidim işləmir?
Keçidiniz işləmirsə, ID uyğunluğunu yoxlayın. Keçidinizin href atributu hədəf elementinizin ID-sinə dəqiq uyğun olmalıdır. Həmçinin hədəf elementin etibarlı konteyner olduğunu yoxlayın. Hədəfinizdə mənfi tabindex varsa, brauzer fokusu ora köçürməkdə çətinlik çəkə bilər. Əllə tabindex parametrlərinin silinməsi tez həll edir, çünki bu, brauzerə foksu təbii şəkildə idarə etməyə imkan verir.
Bu mənim SEO performansıma təsir edirmi?
Bütün istifadəçilər üçün daha yaxşı təcrübə təmin etmək müsbət siqnaldır. Keçid keçidi özlüyündə əlçatanlıq xüsusiyyəti olsa da, saytınızın istifadəyə yararlılığını yaxşılaşdırır. Əlçatanlıq ümumi istifadəçi təcrübəsinin bir komponentidir və axtarış sistemləri istifadəsi asan olan saytlara üstünlük verir. WCAG standartlarına cavab verməklə siz rəqəmsal strategiyanızın əsas hissəsi olan saytınızın daha geniş auditoriyaya hazır olmasını təmin edirsiniz.
Oxumağa davam et: Veb Dizayn və İnkişaf · Veb Dizayn