Tərtibatçılar üçün veb əlçatanlıq yoxlama siyahısı rəqəmsal məzmunun hər bir ziyarətçi üçün istifadəyə yararlı qalmasını təmin etmək üçün funksional bələdçi rolunu oynayır. World Wide Web Consortium (W3C) Veb Məzmunu Əlçatanlıq Təlimatları (WCAG) dərk edilə bilən, işlək, başa düşülən və etibarlı veb məzmun üçün texniki standartları təmin edir. Bu müəyyən edilmiş standartlara riayət etməklə, tərtibatçılar saytların ekran oxuyucuları, keçid cihazları və ya səsli əmrlər kimi köməkçi texnologiyalara güvənən istifadəçilər üçün düzgün işləməsini təmin edirlər. Bu bələdçi bu tələblərə səmərəli şəkildə cavab vermək üçün tələb olunan texniki addımları əks etdirir.
WCAG tətbiqinə necə başlayırsınız?
Hər hansı əlçatan saytın təməli düzgün HTML strukturu ilə başlayır. Brauzerlər və köməkçi texnologiya məzmunu şərh etmək üçün teqlərin semantik mənasına güvənir. Başlıqlar (h1-h6), naviqasiya teqləri və landşaftlar kimi düzgün elementlərdən istifadə ekran oxuyucusu istifadəçilərinə bölmələr arasında tullanmağa imkan verir. Semantik teqlərdən istifadə etdikdə, brauzer üçün hər bir blokun əhəmiyyətini və funksiyasını təsvir edən bir xəritə təqdim edirsiniz. Hər şey üçün ümumi div teqlərinə güvənirsinizsə, brauzer konteksti itirir və bu, siçandan istifadə etməyən istifadəçilər üçün naviqasiyanı çətinləşdirir.
Strukturdan kənarda, hər bir interaktiv element klaviatura ilə əlçatan olmalıdır. İstifadəçi yalnız tab düyməsindən istifadə edərək istənilən düyməyə, linkə və ya forma sahəsinə çata bilməlidir. İstifadəçi bir elementə diqqət yetirə bilmirsə, onunla qarşılıqlı əlaqədə ola bilməz. Tərtibatçılar tab sırasının məntiqi bir yolu izlədiyinə, ümumiyyətlə yuxarıdan aşağıya və soldan sağa doğru olduğundan əmin olmalıdırlar. Bunu siçanınızı ayıraraq və əlaqə formasını doldurmaq və ya e-ticarət mağazasında yoxlamaq kimi standart istifadəçi axınını tamamlamağa çalışaraq yoxlaya bilərsiniz.
Rəng kontrastı və mətn görünürlüğü niyə vacibdir?
Vizual oxunaqlılıq əlçatanlığın, xüsusən də görmə qabiliyyəti zəif olan və ya rəng korluğu olan istifadəçilər üçün əsas komponentidir. WCAG mətn və onun fonu arasında minimum kontrast nisbətini tələb edir. Standart mətn üçün 4.5:1 nisbəti ümumi meyardır. Xüsusi elementləri yoxlamaq və onların kontrast nisbətlərini avtomatik yoxlamaq üçün brauzer əsaslı tərtibatçı alətlərindən istifadə edə bilərsiniz. Bu standartları dizayn mərhələsinin əvvəlində təyin etməklə, layihənin həyat dövrünün sonrakı mərhələlərində böyük üslub vərəqi yeniləmələrinə ehtiyac qalmır.
Rəng heç vaxt məlumatın yeganə göstəricisi olmamalıdır. Məsələn, forma sahəsindəki səhvi yalnız sərhəd rəngini qırmızıya dəyişməklə vurğulayırsınızsa, rəng koru olan istifadəçi siqnalı qaçıra bilər. Vizual işarələri həmişə mətn etiketləri və ya ikonlarla cütləşdirin. Mətn səhvi mesajı və ya nida işarəsi ikonu əlavə etmək ikili qatlı bildiriş sistemi yaradır. Bu təcrübə rəngi necə qəbul etmələrindən asılı olmayaraq məlumatın hamı üçün əlçatan olmasını təmin edir.
Şəkilləri və media məzmununu necə idarə etmək olar?
- Bütün mənalı şəkillər üçün təsviri alt mətn daxil edin.
- Ekran oxuyucularının onları görməməsi üçün dekorativ şəkillər üçün alt atributlarını boş sətirə təyin edin.
- Karlar və ya eşitmə qabiliyyəti zəif olan istifadəçilərə kömək etmək üçün bütün audio məzmun üçün transkriptlər təqdim edin.
- Standart təcrübə kimi bütün video fayllar üçün qapalı başlıqları tətbiq edin.
- Mətn şəkillərindən istifadə etməkdən çəkinin; oxunaqlılığı təmin etmək üçün mümkün olduqda faktiki mətndən istifadə edin.
Formalarda ümumi texniki tələlər hansılardır?
Formalar çox vaxt saytın əlilliyi olan istifadəçilər üçün naviqasiya etmək üçün ən çətin hissəsidir. Hər bir daxiletmə sahəsinin əlaqəli etiketi olmalıdır. Yer tutucu atributundan etiket kimi istifadə etmək tez-tez baş verən bir səhvdir, çünki istifadəçi yazmağa başladıqda mətn yox olur. Bunun əvəzinə, ‘for’ atributu vasitəsilə daxiletmə ilə əlaqəli açıq etiket teqindən istifadə edin. Bu, istifadəçi sahəyə diqqət yetirdikdə ekran oxuyucusunun hansı məlumatın tələb olunduğunu aydın şəkildə elan etməsini təmin edir.
Səhvlərin idarə edilməsi aydın, təsviri rəy tələb edir. İstifadəçi etibarsız forma təqdim etdikdə, səhifə izahat olmadan sadəcə yenidən yüklənməməlidir. Bunun əvəzinə, formanın yuxarısında səhvlərin xülasəsini təqdim edin və onları xüsusi sahələrlə əlaqələndirin. Doğrulama mesajlarını birbaşa sözügedən daxiletmə sahəsi ilə əlaqələndirmək üçün aria-describedby istifadə edin. Bu, istifadəçi üçün dərhal kontekst təmin edir və onlara məyusluq və ya qarışıqlıq olmadan səhvlərini düzəltməyə imkan verir.
Alien Road əlçatanlıq standartlarını necə tətbiq edir
Alien Road-da əlçatanlığı təmin etmək prosesimiz kod auditi mərhələsində başlayır. Tipik bir əlaqədə, biz çatışmayan etiketlər və ya aşağı kontrastlı mətn kimi yüksək prioritetli problemləri müəyyən etmək üçün mövcud şablonlarda avtomatlaşdırılmış skan işlətməklə başlayırıq. Sonra əl ilə yoxlamaya keçirik. Pərakəndə satış saytındakı yoxlama axını kimi əsas konversiya yollarını gəzmək üçün ekran oxuyucularından istifadə edirik. Bu əl addımı lazımdır, çünki avtomatlaşdırılmış alətlər çox vaxt qeyri-intuitiv tab sırası kimi məntiqi səhvləri qaçırır.
Biz həmçinin bu tapıntıları layihəyə xas yol xəritəsində sənədləşdiririk. Məsələn, müştəri saytının naviqasiyasını yeniləməlidirsə, menyunun tam əlçatan olmasını təmin etmək üçün ARIA etiketlərinin tətbiqinə üstünlük veririk. Biz bu yeniləmələri hazırlıq mərhələsində həyata keçiririk və hər bir interaktiv komponentin aydın fokus vəziyyətini saxladığını yoxlayırıq. Bu təcrübələri qurma prosesimizə inteqrasiya etməklə, son məhsulun canlı yayımlandığı andan etibarən yüksək istifadə standartlarına cavab verməsini təmin edirik.
Dinamik məzmun yeniləmələrini necə idarə etmək olar?
Müasir veb tətbiqləri çox vaxt səhifənin bölmələrini tam yenidən yükləmədən yeniləyir. Bu, sürəti artırsa da, ekran oxuyucularına güvənən istifadəçiləri çaşdıra bilər. Yeni xəbərdarlıq qutusu görünürsə və ya axtarış nəticələri siyahısı yenilənirsə, ekran oxuyucusu dəyişikliyi fərq etməyə bilər. Bunu düzəltmək üçün ARIA canlı bölgələrindən istifadə edin. Bir elementi ‘aria-live=”polite”‘ və ya ‘aria-live=”assertive”‘ olaraq təyin etməklə, brauzerə yeni məzmunu istifadəçiyə avtomatik elan etməsini söyləyirsiniz.
Tərtibatçılar üçün texniki yoxlama siyahısı
- Klaviatura naviqasiyası zamanı bütün interaktiv elementlərin görünən fokus vəziyyətinə malik olduğunu yoxlayın.
- HTML sənədinin ekran oxuyucusu dilinin tanınması üçün lang atributuna malik olduğundan əmin olun.
- İstifadəçilərə naviqasiya bloklarını keçməyə imkan vermək üçün keçid linklərinin mövcud olduğunu yoxlayın.
- Funksiyalarının düzgün müəyyən edildiyinə əmin olmaq üçün bütün xüsusi komponentləri ARIA rolları ilə sınaqdan keçirin.
- Mətn ölçüsünün tərtibatı pozmadan və ya məzmunun üst-üstə düşmədən 200% artırıla biləcəyini təsdiqləyin.
- İstifadəçiləri yayındıra biləcəyi və ekran oxuyucusu çıxışına mane ola biləcəyi üçün avtomatik oynayan video və ya audiodan çəkinin.
Animasiyaların istifadəsi ilə bağlı ciddi siyasət saxlayın. Hərəkət vizual olaraq cəlbedici ola bilsə də, vestibulyar pozğunluqları olan istifadəçilər üçün ciddi narahatlıq yarada bilər. Hərəkətli məzmunu dayandırmaq, saxlamaq və ya gizlətmək üçün həmişə bir yol təqdim edin. Saytınız mürəkkəb animasiyalardan istifadə edirsə, onların sürətlə yanıb-sönmədiyinə əmin olun, çünki yüksək tezlikli yanıb-sönmə tutmalara səbəb ola bilər. Bu məhdudiyyətlərə hörmət etməklə, saytı bütün istifadəçilər üçün təhlükəsiz və əlçatan saxlayırsınız.
Bu həftə haradan başlamaq lazımdır?
Səyahətinizə cari layihənizdə tək bir səhifə seçməklə başlayın. Skan etmək və ilk üç problemi müəyyən etmək üçün brauzer əsaslı əlçatanlıq genişləndirməsindən istifadə edin. Şəkillərə çatışmayan alt mətn əlavə etmək və ya əsas düymələrinizdə kontrast nisbətini artırmaq kimi asan işlərlə başlayın. Tərəqqinizi izləmək üçün bu dəyişiklikləri versiya idarəetmə sisteminizdə sənədləşdirin. Zaman keçdikcə bu kiçik yeniləmələr saytınızın ümumi keyfiyyətində və əhatə dairəsində əhəmiyyətli bir yaxşılaşma yaradacaq.
Ardıcıllıq əlçatan saytı saxlamağın açarıdır. İlkin problemləri həll etdikdən sonra əlçatanlıq yoxlamalarını kod nəzərdən keçirmə prosesinizə inteqrasiya edin. Komandanızdan yeni komponentlərin birləşdirilməzdən əvvəl düzgün semantik işarələməyə və klaviatura dəstəyinə malik olduğunu yoxlamasını xahiş edin. Əlçatanlığı inkişaf dövrünün standart hissəsinə çevirməklə, qurduğunuz hər bir xüsusiyyətin əvvəldən bütün istifadəçilər üçün hazır olmasını təmin edirsiniz. Ardıcıllıq geniş miqyaslı düzəlişlərə ehtiyacı azaldır və kod bazanızı təmiz saxlayır.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn