Ümumi veb əlçatanlıq səhvləri adətən dizaynerlər istifadəçilərin rəqəmsal məzmunla qarşılıqlı əlaqədə olduğu müxtəlif yolları nəzərdən qaçırdıqda baş verir. Saytınızın qavranıla bilən, işlək, başa düşülən və sabit qalmasını təmin etmək texniki standartlara qəsdən diqqət yetirməyi tələb edir. W3C Veb Məzmunu Əlçatanlıq Təlimatlarına riayət etməklə, siz köməkçi texnologiyalardan istifadə edən ziyarətçilərin məlumatlarınızı effektiv şəkildə istehlak edə biləcəyi bir mühit təmin edirsiniz. İnkişaf dövrünün əvvəlində bu boşluqları aradan qaldırmaq bahalı yenidənqurmanın qarşısını alır və auditoriyanız üçün ümumi istifadə rahatlığını artırır.
Zəif rəng kontrastı niyə əsas maneədir?
Aşağı rəng kontrastı müasir veb dizaynda ən çox rast gəlinən problemlərdən biri olaraq qalır. Mətn rəngi fon rənginə qarşı aydın şəkildə seçilmədikdə, görmə qabiliyyəti zəif olanlar və ya parlaq günəş işığında ekranlara baxanlar məzmununuzu oxumaqda çətinlik çəkirlər. Bu nəzarətsizlik çox vaxt dizaynerlər estetik tendensiyaları funksional aydınlıqdan üstün tutduqda baş verir. Tipik bir hesabda, kontrast nisbətlərinizi müəyyən edilmiş təlimatlara qarşı yoxlamaq, ekran parametrlərindən və ya şəxsi görmə ehtiyaclarından asılı olmayaraq, tipoqrafiyanızın hər kəs üçün oxunaqlı qalmasını təmin edir.
Bunu həll etmək üçün əsas rəng palitranızı yoxlamalısınız. Mətn-fon nisbətinizin W3C tərəfindən müəyyən edilmiş minimum tələblərə cavab verdiyinə əmin olun. Mərhələləndirmə mərhələsində bu nisbətləri yoxlamaq üçün brauzer əsaslı tərtibatçı alətlərindən və ya xarici əlçatanlıq yoxlayıcılarından istifadə edə bilərsiniz. Əgər brend təlimatlarınız aşağı kontrastlı birləşmələri məcbur edirsə, yüksək kontrastlı rejim üçün keçid əlavə etməyi düşünün. Bu kiçik düzəliş istifadəçilərə nəzərdə tutulan vizual kimliyinizi pozmadan daha oxunaqlı interfeysə keçməyə imkan verir.
Yanlış başlıq strukturu naviqasiyaya necə təsir edir?
Ekran oxuyucuları məzmunu dəqiq təhlil etmək üçün məntiqi iyerarxiyadan asılıdır. Bir çox tərtibatçı səhvən şrift ölçüsünə əsaslanaraq başlıq etiketlərindən istifadə edir, semantik əhəmiyyətinə görə deyil. Məsələn, H1-dən H3-ə keçmək köməkçi texnologiya vasitəsilə naviqasiya edən istifadəçilər üçün çaşqınlıq yaradır. Düzgün struktur xətti axını izləməlidir, məsələn, əsas başlıq üçün H1, bölmə başlıqları üçün H2 və alt bölmələr üçün H3. Bu təşkilat istifadəçilərə bölmələr arasında səmərəli şəkildə tullanmağa və səhifə tərtibatını başa düşməyə imkan verir.
İstifadəçinin uzunmüddətli məzmununuzla necə qarşılaşdığını düşünün. İyerarxiyanız pozulubsa, ekran oxuyucusu istifadəçisi əsas mövzunu itirə bilər və ya xüsusi məlumat tapmaqda çətinlik çəkə bilər. Hər bir səhifənin ardıcıl başlıq sırasına əməl etdiyinə əmin olmaq üçün şablonlarınızı nəzərdən keçirməlisiniz. Tipik bir Shopify mağaza mühitində, mövzu faylları çox vaxt əl ilə yeniləmə tələb edən sərt kodlaşdırılmış başlıqları ehtiva edir. HTML-inizi düzgün strukturlaşdırmaq üçün vaxt ayırmaq həm istifadəçilərinizə, həm də axtarış motorunun indeksləşdirmə imkanlarına eyni vaxtda fayda verir.
Şəkillər üçün çatışmayan alt mətnin təsiri
Şəkillər əsas məlumat mənbəyidir, lakin təsviri alternativ mətn olmadan ekran oxuyucusu istifadəçiləri üçün görünməz olurlar. Ümumi bir nümunə alt atributunu boş buraxmaq və ya onu ‘IMG_001.jpg’ kimi əhəmiyyətsiz fayl adları ilə doldurmaqdır. Təsviri alt mətn səhifə kontekstində şəklin məqsədini ümumiləşdirməlidir. Əgər şəkil sırf dekorativdirsə, ekran oxuyucusunun onu görməməzlikdən gəlməsini təmin etmək və lazımsız qarışıqlığın qarşısını almaq üçün boş alt atributundan istifadə etmək düzgün yanaşmadır.
- Vizual elementin mənasını çatdıran qısa təsvirlərdən istifadə edin.
- Alt mətninizə ‘şəkli’ və ya ‘təsviri’ kimi ifadələri daxil etməkdən çəkinin.
- Düymələr və ya keçidlər kimi funksional şəkillərin hərəkəti izah edən təsviri mətni olduğundan əmin olun.
- Əksər ekran oxuyucusu oxuma sürətləri ilə uyğunluğu təmin etmək üçün alt mətni 125 simvoldan aşağı saxlayın.
Klaviatura naviqasiyanız tam işləkdirmi?
Bir çox istifadəçi veb səhifələrdə hərəkət etmək üçün siçan əvəzinə klaviatura qısayollarından istifadə edir. Saytınızda fokus göstəriciləri yoxdursa və ya istifadəçini döngədə saxlayırsa, bu əhəmiyyətli bir maneə yaradır. Fokus göstəricisi ‘Tab’ düyməsi vasitəsilə seçildikdə elementin ətrafında görünən vizual konturdur. Əgər CSS-iniz alternativ təmin etmədən bu konturu silərsə, klaviatura istifadəçiləri səhifədə hazırda hansı keçid və ya düymə ilə qarşılıqlı əlaqədə olduqlarını bilməyəcəklər.
Saytınızı yalnız klaviaturadan istifadə edərək sınaqdan keçirmək hər hansı rəqəmsal komanda üçün praktik bir məşqdir. Əsas menyunuzda naviqasiya etməklə, əlaqə formasını doldurmaqla və siçanınıza toxunmadan ödəniş prosesini tamamlamaqla başlayın. Əgər özünüzü bir element üzərində ilişib qalmış və ya müəyyən bir bölməyə çata bilmədiyinizi görsəniz, kritik bir uğursuzluq müəyyən etmisiniz. Alien Road, gec mərhələdə texniki borcdan qaçmaq üçün dizayn təhvil mərhələsində klaviatura əlçatanlığını prioritet etməyi təklif edir.
Forma dizaynında ümumi tələlər
Formalar konversiyalar üçün vacibdir, lakin aydın etiketləri olmadıqda istifadəsi çox vaxt çətin olur. Ümumi bir səhv, giriş sahələri üçün görünən etiketlər əvəzinə yer tutucu mətndən istifadə etməkdir. İstifadəçi sahəyə kliklədikdən sonra yer tutucu yox olur və sahənin nə tələb etdiyi barədə kontekst olmadan onları tərk edir. Bundan əlavə, xəta mesajları təsviri olmalı və ekran oxuyucusu istifadəçilərinin harada səhv etdiklərini dəqiq müəyyən edə bilmələri üçün xüsusi giriş sahəsi ilə əlaqələndirilməlidir.
- Həmişə etiket elementindən istifadə edin və onu düzgün giriş ID-si ilə cütləşdirin.
- İstifadəçi forma göndərməzdən əvvəl aydın təlimatlar verin.
- Xəta mesajlarının yalnız qırmızı haşiyələr kimi rəng dəyişiklikləri vasitəsilə deyil, mətndə göründüyünə əmin olun.
- İstifadəçilərə ümumi məlumatları tez bir zamanda doldurmağa kömək etmək üçün əlçatan avtomatik tamamlama atributlarından istifadə edin.
Dinamik məzmun niyə əlavə diqqət tələb edir?
Müasir veb saytlar çox vaxt köməkçi texnologiyaları çaşdıra bilən pop-uplar və ya canlı yeniləmələr kimi dinamik məzmundan istifadə edir. Əgər ekranda yeni bir element ekran oxuyucusu tərəfindən elan edilmədən görünürsə, istifadəçi səhifə məzmununun dəyişdiyindən xəbərsiz ola bilər. ARIA canlı bölgələrindən istifadə etmək, dinamik məzmun yeniləndikdə istifadəçiyə bildiriş göndərməyə imkan verir. Bu, istifadəçinin alış-veriş səbətində uğurlu göndərmə bildirişi kimi status dəyişiklikləri haqqında məlumatlı olmasını təmin edir.
Bu yeniləmələrin həyata keçirilməsi diqqətli tarazlıq tələb edir. ARIA-dan həddindən artıq istifadə ekran oxuyucularına güvənən istifadəçilər üçün səs-küyün artmasına səbəb ola bilər. Bu atributlardan qənaətlə və yalnız vacib məlumatları çatdırmaq üçün lazım olduqda istifadə edin. Bu yeniləmələri mərhələli mühitdə sınaqdan keçirməklə, bildirişlərinizin müdaxiləedici deyil, aydın və faydalı olduğunu təsdiqləyə bilərsiniz. Bu yanaşma, istifadəçi təcrübənizə yeni interaktiv funksiyalar əlavə etdikcə saytınızı funksional saxlayır.
Bu həftə haradan başlamaq lazımdır
Veb saytınızda əlçatanlıq auditi üçün yüksək trafikli bir açılış səhifəsi seçməklə başlayın. Çatışmayan alt mətn və zəif rəng kontrastı kimi əsas səhvləri yoxlamaq üçün brauzer genişləndirməsindən istifadə edin. Bu tapıntıları layihə idarəetmə proqramınızda sənədləşdirin və onları inkişaf komandanıza asan tapşırıqlar kimi təyin edin. Bu kiçik elementləri dərhal həll etmək daha böyük əlçatanlıq layihələri üçün təkan yaradır.
Sonra, yalnız klaviaturanızdan istifadə edərək naviqasiyanızı sınaqdan keçirmək üçün bir sessiya planlaşdırın. Böyük bir saytı idarə edirsinizsə, əsas naviqasiya menyusuna və altbilgiyə diqqət yetirin. Ağrılı nöqtələri müəyyən etdikdən sonra fokus göstəricilərini yaxşılaşdırmaq və şablon məntiqinizi yeniləmək üçün bir plan hazırlayın. Ardıcıl kiçik addımlar, bütün sayt infrastrukturunuzu əsaslı şəkildə dəyişdirmədən istifadəçiləriniz üçün daha inklüziv rəqəmsal təcrübəyə aparır.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn