Saytın əlçatanlıq testi: pulsuz alətlər və əl ilə yoxlamalar

Tez-tez eşitdiyimiz bir hekayə: kimsə Lighthouse-u işə salır, əlçatanlıq üçün yaşıl 100 alır və başqa işə keçir. Bir həftə sonra müştəri yazır ki, ödəniş edə bilmədi, çünki kart formasına klaviatura ilə çatmaq mümkün deyil. Hər ikisi doğrudur. Avtomatik yoxlama keçdi, sayt isə yenə də real insanı yarıyolda qoydu.

Bu bələdçi kiçik büdcə ilə necə düzgün test etməyi göstərir: hansı pulsuz alətləri işlətməli, 15 dəqiqəlik əl ilə yoxlama qaydası, ekran oxuyucusu ilə ilk təcrübə və nə vaxt ödənişli audit sifariş etməli.

Avtomatik yoxlama aləti saytımın əlçatan olub-olmadığını deyə bilərmi?

Xeyr. Avtomatik yoxlama alətləri bəzi problemləri tez tapır, amma əlçatanlıqla bağlı bir çox suala yalnız insan cavab verə bilər. Böyük Britaniya Hökumətinin Rəqəmsal Xidməti (GDS) 143 məlum xətası olan səhifədə 10 aləti test edəndə ən yaxşısı onların 41%-ini tapıb. W3C bunu açıq deyir: qiymətləndirmə alətləri “əlçatanlığı müəyyən edə bilməz, yalnız buna kömək edə bilər”.

GDS testi (yeni vərəqdə açılır) 2017-ci ilin fevralına aiddir və 41%-lik nəticəyə (Asqatasun aləti) alətin əl ilə yoxlama üçün verdiyi xəbərdarlıqlar da daxil idi. O vaxtdan alətlər təkmilləşib, amma boşluğun səbəbi eynidir. Proqram şəklin alternativ mətni olmadığını müəyyən edə bilər. Amma göy kostyumun şəkli üçün “qırmızı don” təsvirinin səhv olduğunu və ya fokus ardıcıllığınızın məntiqli olub-olmadığını bilə bilməz.

Ona görə yoxlama alətinə binanın tam ekspertizası kimi yox, tüstü siqnalizasiyası kimi baxın. Onu yenə də işlətməyə dəyər: WebAIM Million 2026 (yeni vərəqdə açılır) ən populyar bir milyon ana səhifənin 95,9%-ində aşkar edilə bilən xətalar tapıb, yəni əksər saytlarda tez düzəldilə bilən problemlər gözləyir. W3C-nin alət seçimi üzrə təlimatında (yeni vərəqdə açılır) deyildiyi kimi: “İnsan mülahizəsi tələb olunur.”

Hansı pulsuz əlçatanlıq test alətlərindən istifadə etməliyəm?

Bir və ya iki avtomatik yoxlama alətindən, kontrast yoxlama alətindən və ekran oxuyucusundan istifadə edin. Alətlər fərqli qaydalar tətbiq edir və nəticələri fərqli göstərir, ona görə iki alət adətən birindən çox şey tapır. Aşağıdakı alətlərin hamısının pulsuz versiyası var. Adlar, funksiyalar və qiymətlər dəyişdiyi üçün hər hansı birinə etibar etməzdən əvvəl onun hazırkı şərtlərinə baxın.

15 dəqiqəyə əl ilə nələri yoxlaya bilərəm?

Kifayət qədər çox şeyi. W3C-nin Easy Checks (yeni vərəqdə açılır) (Asan yoxlamalar) sənədi səhifə adlarını, alternativ mətni, başlıqları, kontrastı, keçid linklərini, görünən klaviatura fokusunu, səhifənin dilini, miqyaslamanı, altyazıları və forma etiketlərini əhatə edir. Məhsul səhifəsi və ya bron forması kimi vacib bir səhifə seçin və hər yoxlamaya bir-iki dəqiqə ayırın. Heç bir yoxlama alətinin göstərmədiyi şeyləri tapacaqsınız.

W3C bildirir ki, bu yoxlamalar “yalnız bir neçə əlçatanlıq problemini əhatə edir”, yəni tam qiymətləndirmə deyil. Yenə də bu, sərf edə biləcəyiniz ən faydalı on beş dəqiqədir:

1. Səhifənin adı (1 dəqiqə). Brauzer vərəqi hər yerdə “Ana səhifə” yazmaq əvəzinə səhifənin nə olduğunu deyirmi, məsələn, “Masa bron edin | Nənəmin Mətbəxi”?
2. Şəkillər (2 dəqiqə). Alternativ mətni WAVE və ya oxşar alətlə görünən hala gətirin. O, dəqiqdirmi? Dekorativ şəkillər ötürülürmü?
3. Başlıqlar (2 dəqiqə). Başlıqları siyahıya alın və onları ayrıca oxuyun. Mündəricat kimi işləyirlərmi?
4. Kontrast (2 dəqiqə). Əsas mətni, xırda boz mətni, düymə mətnini və şəkil üzərindəki mətni yoxlayın.
5. Klaviatura (4 dəqiqə). Siçanı kənara qoyun və səhifədə Tab ilə irəliləyin (növbəti bölməyə baxın).
6. Miqyaslama (2 dəqiqə). 200%-də, sonra 400%-də hər şeyi yenə oxuya və menyudan yana sürüşdürmədən istifadə edə bilirsinizmi?
7. Formalar və dil (2 dəqiqə). Hər sahənin etiketinə klikləyin; yaxşı qurulmuş formada bu, kursoru sahəyə qoyur. Alətin hesabatında səhifə dilinin göstərilmədiyi barədə qeyd olub-olmadığını yoxlayın.

Klaviatura ilə necə test etməli?

Siçanı kənara qoyun. İrəli getmək üçün Tab, geri qayıtmaq üçün Shift+Tab, linkləri açmaq üçün Enter, düymələri basmaq üçün boşluq və ya Enter, menyular və radio düymələri daxilində isə ox düymələrindən istifadə edin. Hər interaktiv elementə çatmaq mümkün olmalı, harada olduğunuzu həmişə görməli və heç yerdə ilişib qalmamalısınız.

Mac-da Safari, “Advanced” (Əlavə) ayarlarında “Press Tab to highlight each item on a webpage” seçimini aktivləşdirməyincə, Tab düyməsini basanda linkləri ötürür. Sonra bunları yoxlayın:

• Harada olduğunuzu həmişə görürsünüzmü? Fokus konturu yox olursa, klaviatura istifadəçisi yolunu azır.
• Ardıcıllıq məntiqlidirmi? Fokus oxu ardıcıllığına uyğun hərəkət etməlidir.
• Nəsə fokusu örtürmü? Fokusdakı elementi gizlədən sabit başlıq və ya kuki bannerı WCAG 2.2-nin Fokus gizlədilmir kriteriyasına cavab vermir.
• Yenidən çıxa bilirsinizmi? Hər menyunu, açılan pəncərəni və tarix seçicisini açın, sonra çıxmağa çalışın. Escape dialoqları bağlamalıdır.
• Bütün ssenari işləyirmi? Siçansız məhsul əlavə edin, sayını dəyişin, promokod tətbiq edin və ödənişə qədər çatın.

Hər xətanı dəqiq yazın: “Məhsul səhifəsindəki ölçü seçicisi Enter və ya boşluq ilə açılmır” qeydi “klaviatura işləmir” qeydindən qat-qat tez düzəldilir.

Ekran oxuyucusu ilə ilk dəfə necə test etməli?

Cihazınızda artıq olan ekran oxuyucusundan və ya Windows-da NVDA-dan başlayın və bir səhifəni dinləyin. Siz ondan ekspert kimi istifadə etməyə çalışmırsınız. Sadəcə başlıqların, linklərin, düymələrin, şəkillərin və forma sahələrinin mənalı adlarla səsləndirildiyini və vacib heç nəyin səssiz qalmadığını yoxlayırsınız.

• Mac: Command+F5 VoiceOver-i işə salır və söndürür; Control+Option+U isə başlıqların, linklərin və forma elementlərinin siyahısı olan rotoru açır.
• Windows: NVDA-da başlıqlar arasında keçmək üçün H, linkləri və başlıqları siyahıya almaq üçün Insert+F7 basın.
• Telefon: VoiceOver-i (iPhone) və ya TalkBack-i (Android) işə salın və elementdən elementə keçmək üçün ekranı sağa sürüşdürün. Əvvəlcə onu necə söndürməyi öyrənin.

Ən vacib olana qulaq asın. WebAIM-in 2024-cü il ekran oxuyucusu sorğusunda (yeni vərəqdə açılır) respondentlərin 71,6%-i uzun səhifədə ilk növbədə başlıqlar üzrə hərəkət etdiyini bildirib, ona görə oradan başlayın. Sonra linklərin siyahısını açın: “Ətraflı” adlı beş link heç kimə heç nə demir. “Səbətə əlavə et, tünd göy sviter” faydalı düymədir, “düymə” isə yox. Sonda formanı doldurun və hər sahənin və hər xətanın səsləndirildiyini yoxlayın.

Nəticələrinizdə təvazökar olun. Sizə qüsurlu səslənirsə, yəqin ki, qüsur var; yaxşı səslənirsə, bu, sübut deyil. Təcrübəli istifadəçilərin əslində necə işlədiyini öyrənmək üçün əlilliyi olan insanların internetdən necə istifadə etdiyi yazısını oxuyun.

Miqyaslamanı, yenidən düzülməni və mətn aralığını necə yoxlamalı?

Brauzeri 200%-ə qədər böyüdün və mətnin kəsilmədən və üst-üstə düşmədən böyüdüyünü yoxlayın. Sonra yenidən düzülməni (reflow) test edin: eni 1280 piksel olan pəncərədə 400% böyütmədə məzmun yana sürüşdürmədən yerləşməlidir. Sonda hərflər, sözlər, sətirlər və abzaslar arasındakı aralığı artırın və heç nəyin pozulmadığını və ya yox olmadığını yoxlayın.

Bunlar WCAG-nin Mətnin ölçüsünün dəyişdirilməsi (1.4.4), Yenidən düzülmə (1.4.10) (yeni vərəqdə açılır) və Mətn aralığı (1.4.12) (yeni vərəqdə açılır) kriteriyalarına uyğundur. Yenidən düzülmə 320 CSS piksel enindən istifadə edir və W3C qeyd edir ki, bu, “400% böyütmədə eni 1280 CSS piksel olan başlanğıc görüntü sahəsinə ekvivalentdir”. Mətn aralığı isə tələb edir ki, oxucu sətir hündürlüyünü şrift ölçüsünün 1,5 mislinə, abzas aralığını 2 mislinə, hərf aralığını 0,12 mislinə və söz aralığını 0,16 mislinə qurduqda heç nə itməsin.

Mətn aralığı üçün əlfəcin skripti (bookmarklet), yəni brauzerdə əlfəcin kimi saxlanılan kiçik skript, dörd dəyərin hamısını bir kliklə tətbiq edir. Düymələrdən daşan mətnə və kənarda kəsilən etiketlərə diqqət edin. 400% böyütmədə noutbuk ekranı təxminən kiçik telefon ekranı kimi görünür, ona görə yaxşı qurulmuş adaptiv (responsive) sayt bu yoxlamaların çoxundan artıq keçir.

Formaları, xətaları və ödəniş mərhələsini necə yoxlamalı?

Hər vacib formanı üç dəfə doldurun: bir dəfə düzgün, bir dəfə bütün sahələri boş, bir dəfə də qəsdən səhvlərlə. Hər sahənin görünən etiketi olmalı, hər xəta öz sahəsinin yanında sözlə izah edilməli, şifrə və təsdiq kodu sahələrinə isə mətn yapışdırmaq mümkün olmalıdır.

• Xətalar. Qırmızı rəngdə “Yanlış daxiletmə” kifayət deyil. Sahənin yanında “Bitmə tarixini AA/İİ formatında daxil edin” yazısı isə kifayətdir. Göndərdikdən sonra fokus xətalar xülasəsinə və ya ilk xətalı sahəyə keçməlidir.
• Giriş və kodlar. WCAG 2.2-nin Əlçatan autentifikasiya kriteriyasına (yeni vərəqdə açılır) görə, başqa giriş yolu olmadıqda yapışdırmanı və ya şifrə menecerlərini bloklamaq tələbə cavab vermir.
• CAPTCHA və vaxt məhdudiyyətləri. WebAIM-in sorğusunda ekran oxuyucusu istifadəçiləri CAPTCHA-nı internetdəki ən problemli element kimi qiymətləndiriblər. Əlçatan alternativin olub-olmadığını və vaxt məhdudiyyətlərinin uzadıla bildiyini yoxlayın.

Saytın əlçatanlığı üzrə yoxlama siyahımızda mağazalar üçün, kuki bannerləri və açılan pəncərələr də daxil olmaqla, daha geniş siyahı var.

Peşəkar əlçatanlıq auditi nələri əhatə edir və o, nə vaxt lazımdır?

Əlçatanlıq auditi mütəxəssisin müəyyən standarta, adətən WCAG 2.1 və ya 2.2 AA səviyyəsinə əsasən apardığı strukturlaşdırılmış yoxlamadır. O, avtomatik skanları əsas şablonlarınızın və ssenarilərinizin əl ilə və yardımçı texnologiyalarla testi ilə birləşdirir və prioritetləşdirilmiş hesabatla yekunlaşır. Qanun sizə şamil olunursa, böyük layihəni işə salmazdan əvvəl və ya müştərilər sübut istədikdə sizə audit lazımdır.

Qiymət barədə razılaşmazdan əvvəl soruşun:

• Hansı standart, versiya və səviyyə üzrə test edəcəksiniz?
• Hansı şablonlar və ssenarilər əhatə olunur? Mağaza üçün: ana səhifə, kateqoriya, məhsul, səbət, ödəniş, hesab səhifələri və formalar.
• Ekran oxuyucuları, klaviatura və miqyaslama ilə əl ilə test aparırsınızmı, hansı brauzer və cihazlarda?
• Hesabat problemləri ciddiliyinə görə sıralayır, onların yerini göstərir və həll yolu təklif edirmi?
• Təkrar test qiymətə daxildirmi?

Qiymətlər provayderdən, ölkədən və əhatə dairəsindən asılı olaraq çox fərqlənir, ona görə nəyin daxil olduğunu müqayisə edin. Avropa Əlçatanlıq Aktı sizə şamil olunursa, audit həm də ictimai bəyanatınızı əsaslandırır; kimin əhatə dairəsində olduğunu EAA bələdçimiz izah edir.

Niyə əlilliyi olan istifadəçilərlə test etməli?

Çünki standarta cavab vermək və istifadəsi asan olmaq eyni şey deyil. Ödəniş prosesi bütün WCAG kriteriyalarından keçə və yenə də ekran oxuyucusu istifadəçisinin iyirmi dəqiqəsini ala bilər. W3C bildirir ki, əlilliyi olan istifadəçilərlə qiymətləndirmə “təkcə uyğunluq qiymətləndirməsi ilə aşkar edilməyən istifadə rahatlığı problemlərini üzə çıxarır”, həm də komandanıza insanların saytdan əslində necə istifadə etdiyini göstərir.

Sizə laboratoriya lazım deyil. Ən vacib tapşırığınız, məsələn, məhsulu tapıb ödəniş etmək üzrə bir neçə sessiya sizə növbəti skan raundundan daha çox şey öyrədəcək. İştirakçıları əlillər təşkilatları, tədqiqat agentlikləri və ya öz müştəriləriniz vasitəsilə tapın və vaxtları üçün onlara ödəniş edin. Öz cihazlarından və ayarlarından istifadə etmələrinə imkan verin. W3C-nin istifadəçilərin qiymətləndirməyə cəlb edilməsi (yeni vərəqdə açılır) üzrə təlimatı işin praktik tərəfini əhatə edir.

Nəticələrlə nə etməliyəm?

Problemləri insanlara nə qədər mane olmasına və harada baş verməsinə görə sıralayın, saytın öz kodunda və məzmununda düzəldin, yenidən test edin və hələ həll olunmayanları qeyd edin. Ödəniş mərhələsindəki etiketsiz sahə saytın aşağı hissəsindəki kiçik kontrast qüsurundan daha vacibdir, ümumi şablonda edilən düzəliş isə həmin şablondan istifadə edən bütün səhifələri düzəldir.

1. Prioritet müəyyən edin. Əvvəlcə əsas ssenarilərdəki (ödəniş, bron, qeydiyyat) maneələr, sonra ümumi şablonlar, ən sonda ayrı-ayrı səhifələr.
2. Mənbədə düzəldin. Təkcə simptomu yox, şablonu, komponenti və ya məzmunu dəyişin.
3. Yenidən test edin. Eyni yoxlamaları alətlərlə yanaşı əl ilə də təkrarlayın.
4. Sənədləşdirin. Məlum problemləri tarixləri ilə birlikdə əlçatanlıq bəyanatınızda sadalayın. Yeni kriteriyaları WCAG 2.2 bələdçimiz izah edir.
5. Təkrarlayın. Hər buraxılışa klaviatura yoxlaması və skan əlavə edin.

Əlçatanlıq vidcetindən, o cümlədən bizimkindən istifadə edirsinizsə, testi vidcet bağlı halda aparın. SiteAccessible kimi panel ziyarətçilərə səhifəni tənzimləmək üçün əlavə imkanlar verir, amma WCAG səhifənin standart vəziyyətində işləyib-işləmədiyini yoxlayır. Bəzi audit sistemləri overlay skripti işləyən səhifələri qiymətləndirmir, ona görə əvvəlcə auditorunuzla dəqiqləşdirin.