როგორ შევამოწმოთ ვებსაიტის ხელმისაწვდომობა: ხელსაწყოები და ხელით ტესტი

აი, ამბავი, რომელიც ხშირად გვესმის. ვიღაც Lighthouse-ს უშვებს, ხელმისაწვდომობაში მწვანე 100-ს იღებს და სხვა საქმეს უბრუნდება. ერთი კვირის შემდეგ მომხმარებელი წერს, რომ გადახდა ვერ შეძლო, რადგან ბარათის ფორმამდე კლავიატურით ვერ მიაღწია. ორივე ფაქტი მართალია. ავტომატურმა შემოწმებამ ჩაიარა, საიტმა კი რეალურ ადამიანს მაინც ვერ მოემსახურა.

ეს სახელმძღვანელო გაჩვენებთ, როგორ ჩაატაროთ სათანადო ტესტირება მცირე ბიუჯეტით: რომელი უფასო ხელსაწყოები გაუშვათ, როგორ გაიაროთ 15-წუთიანი ხელით შემოწმება, როგორ სცადოთ პირველად ეკრანის წამკითხველი და როდის ღირს ფასიანი აუდიტი.

შეუძლია თუ არა ავტომატურ შემმოწმებელს თქვას, ხელმისაწვდომია თუ არა ჩემი ვებსაიტი?

არა. ავტომატური შემმოწმებლები ზოგიერთ პრობლემას სწრაფად პოულობს, მაგრამ ხელმისაწვდომობის ბევრ კითხვაზე პასუხის გაცემა მხოლოდ ადამიანს შეუძლია. როცა გაერთიანებული სამეფოს მთავრობის ციფრულმა სამსახურმა (Government Digital Service, GDS) 10 ხელსაწყო 143 ცნობილი შეცდომის მქონე გვერდზე გამოსცადა, საუკეთესომ 41% იპოვა. W3C ამას პირდაპირ ამბობს: შეფასების ხელსაწყოებს „ხელმისაწვდომობის დადგენა არ შეუძლიათ, მათ მხოლოდ ამაში დახმარება შეუძლიათ“.

GDS-ის ტესტი (იხსნება ახალ ჩანართში) 2017 წლის თებერვლით თარიღდება, და მისი 41% (Asqatasun-ის შედეგი) იმ პუნქტებსაც მოიცავდა, რომლებსაც ხელსაწყო ხელით შესამოწმებლად სთავაზობდა. მას შემდეგ ხელსაწყოები გაუმჯობესდა, მაგრამ ხარვეზს იგივე მიზეზი აქვს. პროგრამას შეუძლია დაადგინოს, რომ სურათს ალტერნატიული ტექსტი არ აქვს. მას არ შეუძლია დაადგინოს, რომ „წითელი კაბა“ არასწორი აღწერაა ლურჯი კოსტიუმის ფოტოსთვის, ან აქვს თუ არა აზრი თქვენი ფოკუსის თანმიმდევრობას.

ასე რომ, შემმოწმებელი განიხილეთ, როგორც კვამლის დეტექტორი და არა შენობის სრული ექსპერტიზა. მისი გაშვება მაინც ღირს: WebAIM Million 2026-ის (იხსნება ახალ ჩანართში) მონაცემებით, მილიონი წამყვანი საიტის მთავარი გვერდების 95,9%-ს აღმოჩენადი შეცდომები ჰქონდა, ამიტომ საიტების უმეტესობაზე ადვილად გამოსასწორებელი პრობლემები გელოდებათ. როგორც W3C-ის სახელმძღვანელო ხელსაწყოების შერჩევის შესახებ (იხსნება ახალ ჩანართში) ამბობს, „ადამიანური განსჯა აუცილებელია“.

რომელი უფასო ხელსაწყოები გამოვიყენოთ ხელმისაწვდომობის შესამოწმებლად?

გამოიყენეთ ერთი ან ორი ავტომატური შემმოწმებელი, კონტრასტის შემმოწმებელი და ეკრანის წამკითხველი. ხელსაწყოები სხვადასხვა წესს იყენებს და შედეგებს სხვადასხვაგვარად აჩვენებს, ამიტომ ორი შემმოწმებელი, როგორც წესი, ერთზე მეტს პოულობს. ქვემოთ ჩამოთვლილ ყველა ხელსაწყოს უფასო ვერსია აქვს. სანამ რომელიმეს დაეყრდნობით, მისი მიმდინარე პირობები გადაამოწმეთ, რადგან სახელები, ფუნქციები და ფასები იცვლება.

რისი შემოწმება შეიძლება ხელით 15 წუთში?

საკმაოდ ბევრის. W3C-ის Easy Checks (იხსნება ახალ ჩანართში) („მარტივი შემოწმებები“) მოიცავს გვერდის title-ებს, ალტერნატიულ ტექსტს, სათაურებს, კონტრასტს, მთავარ შიგთავსზე გადასვლის ბმულებს, კლავიატურის ხილულ ფოკუსს, გვერდის ენას, მასშტაბირებას, სუბტიტრებსა და ფორმის წარწერებს. აირჩიეთ ერთი მნიშვნელოვანი გვერდი, მაგალითად პროდუქტის გვერდი ან ჯავშნის ფორმა, და თითოეულ შემოწმებას ერთი-ორი წუთი დაუთმეთ. იპოვით პრობლემებს, რომლებზეც ვერცერთი შემმოწმებელი ვერ გაგაფრთხილებთ.

W3C ამბობს, რომ ეს შემოწმებები „ხელმისაწვდომობის მხოლოდ რამდენიმე საკითხს მოიცავს“, ამიტომ სრული შეფასება ისინი არ არის. მაინც ეს არის საუკეთესო თხუთმეტი წუთი, რომელიც შეგიძლიათ ამ საქმეს დაუთმოთ:

1. გვერდის title (1 წუთი). ბრაუზერის ჩანართში წერია თუ არა, რა გვერდია, მაგალითად „მაგიდის დაჯავშნა | როზას სამზარეულო“, და არა ყველგან „მთავარი“?
2. სურათები (2 წუთი). WAVE-ით ან მსგავსი ხელსაწყოთი გამოაჩინეთ ალტერნატიული ტექსტი. ზუსტია? დეკორატიული სურათები გამოტოვებულია?
3. სათაურები (2 წუთი). ჩამოთვალეთ სათაურები და წაიკითხეთ ისინი ცალკე. გამოდგება ისინი სარჩევად?
4. კონტრასტი (2 წუთი). შეამოწმეთ ძირითადი ტექსტი, პატარა ნაცრისფერი ტექსტი, ღილაკების ტექსტი და ტექსტი სურათებზე.
5. კლავიატურა (4 წუთი). მაუსი გვერდზე გადადეთ და Tab-ით გაიარეთ გვერდი (იხილეთ შემდეგი განყოფილება).
6. მასშტაბირება (2 წუთი). 200%-ზე, შემდეგ კი 400%-ზე ისევ შეგიძლიათ ყველაფრის წაკითხვა და მენიუს გამოყენება გვერდულად გადახვევის გარეშე?
7. ფორმები და ენა (2 წუთი). დააწკაპუნეთ თითოეული ველის წარწერაზე; კარგად აწყობილ ფორმაში ეს კურსორს ველში გადაიყვანს. ხელსაწყოს ანგარიშში შეამოწმეთ, ხომ არ აკლია გვერდს ენის მითითება.

როგორ შევამოწმოთ საიტი კლავიატურით?

მაუსი გადადეთ. Tab-ით წინ გადადით, Shift+Tab-ით უკან, Enter-ით ბმულებზე გადადით, Space-ით ან Enter-ით ღილაკებს დააჭირეთ, მენიუებსა და რადიოღილაკებში კი ისრიანი კლავიშები გამოიყენეთ. ყველა ინტერაქტიული ელემენტი მისაწვდომი უნდა იყოს, ყოველთვის უნდა ხედავდეთ, სად იმყოფებით, და არსად უნდა გაიჭედოთ.

Mac-ზე Safari Tab-ის დაჭერისას ბმულებს გამოტოვებს, სანამ მის Advanced (დამატებით) პარამეტრებში არ ჩართავთ ოფციას „Press Tab to highlight each item on a webpage“. შემდეგ შეამოწმეთ:

• ყოველთვის ხედავთ, სად ხართ? თუ ფოკუსის კონტური ქრება, კლავიატურის მომხმარებელი გზას კარგავს.
• თანმიმდევრობა ლოგიკურია? ფოკუსი კითხვის თანმიმდევრობას უნდა მიჰყვებოდეს.
• არაფერი ფარავს? მიმაგრებული ზედა ზოლი ან cookie-ების ბანერი, რომელიც ფოკუსირებულ ელემენტს მალავს, WCAG 2.2-ის კრიტერიუმს „ფოკუსი არ იფარება“ (Focus Not Obscured) ვერ აკმაყოფილებს.
• შეგიძლიათ ისევ გამოსვლა? გახსენით ყველა მენიუ, ამომხტარი ფანჯარა და თარიღის ამრჩევი, შემდეგ კი სცადეთ მათგან გამოსვლა. Escape დიალოგურ ფანჯრებს უნდა ხურავდეს.
• მუშაობს მთელი პროცესი? დაამატეთ პროდუქტი, შეცვალეთ რაოდენობა, გამოიყენეთ ვაუჩერი და მიაღწიეთ გადახდას მაუსის გარეშე.

თითოეული შეცდომა ზუსტად ჩაიწერეთ: „პროდუქტის გვერდზე ზომის ამრჩევი Enter-ით ან Space-ით არ იხსნება“ გაცილებით სწრაფად გამოსწორდება, ვიდრე „კლავიატურა არ მუშაობს“.

როგორ გამოვცადოთ საიტი ეკრანის წამკითხველით პირველად?

დაიწყეთ იმ ეკრანის წამკითხველით, რომელიც თქვენს მოწყობილობას უკვე აქვს, ან Windows-ზე NVDA-თი, და მოუსმინეთ ერთ გვერდს. თქვენი მიზანი არ არის, ის ექსპერტივით გამოიყენოთ. ამოწმებთ, რომ სათაურები, ბმულები, ღილაკები, სურათები და ფორმის ველები გონივრული სახელებით გახმოვანდება და რომ არაფერი მნიშვნელოვანი არ დუმს.

• Mac: Command+F5 VoiceOver-ს რთავს და თიშავს; Control+Option+U ხსნის როტორს, სათაურების, ბმულებისა და ფორმის ელემენტების სიას.
• Windows: NVDA-ში H-ით სათაურებს შორის გადახვალთ, Insert+F7-ით კი ბმულებისა და სათაურების სიას გახსნით.
• ტელეფონი: ჩართეთ VoiceOver (iPhone) ან TalkBack (Android) და ელემენტიდან ელემენტზე გადასასვლელად თითი მარჯვნივ გაუსვით. ჯერ ისწავლეთ, როგორ გამორთოთ.

მოუსმინეთ იმას, რაც ყველაზე მნიშვნელოვანია. WebAIM-ის 2024 წლის გამოკითხვაში ეკრანის წამკითხველის მომხმარებლებს შორის (იხსნება ახალ ჩანართში) რესპონდენტების 71,6%-მა თქვა, რომ გრძელ გვერდზე პირველ რიგში სათაურებით მოძრაობს, ამიტომ იქიდან დაიწყეთ. შემდეგ გახსენით ბმულების სია: ხუთი ბმული სახელით „დაწვრილებით“ არავის არაფერს ეუბნება. „კალათაში დამატება, მუქი ლურჯი სვიტერი“ სასარგებლო ღილაკია; „ღილაკი“ კი არა. ბოლოს შეავსეთ ფორმა და შეამოწმეთ, რომ ყველა ველი და შეცდომა ხმამაღლა იკითხება.

დასკვნებში თავშეკავებული იყავით. თუ თქვენთვის გაუმართავად ჟღერს, ალბათ ასეცაა; თუ კარგად ჟღერს, ეს ჯერ კიდევ არ არის მტკიცებულება. იმის შესახებ, როგორ მუშაობენ გამოცდილი მომხმარებლები სინამდვილეში, წაიკითხეთ როგორ იყენებენ ვებს შეზღუდული შესაძლებლობის მქონე ადამიანები.

როგორ შევამოწმოთ მასშტაბირება, შიგთავსის გადაწყობა და ტექსტის ინტერვალები?

გაადიდეთ ბრაუზერი 200%-მდე და შეამოწმეთ, რომ ტექსტი იზრდება ისე, რომ არ იჭრება და ერთმანეთს არ ედება. შემდეგ შეამოწმეთ გადაწყობა (reflow): 400%-იანი მასშტაბით, 1 280 პიქსელი სიგანის ფანჯარაში, შიგთავსი გვერდულად გადახვევის გარეშე უნდა ეტეოდეს. ბოლოს გაზარდეთ ასოებს, სიტყვებს, სტრიქონებსა და აბზაცებს შორის მანძილი და შეამოწმეთ, რომ არაფერი ირღვევა და არ ქრება.

ეს შეესაბამება WCAG-ის კრიტერიუმებს „ტექსტის ზომის შეცვლა“ (Resize Text, 1.4.4), „გადაწყობა“ (Reflow, 1.4.10) (იხსნება ახალ ჩანართში) და „ტექსტის ინტერვალი“ (Text Spacing, 1.4.12) (იხსნება ახალ ჩანართში). „გადაწყობა“ 320 CSS პიქსელის სიგანეს იყენებს, რაც, W3C-ის შენიშვნით, „400%-იანი მასშტაბით 1 280 CSS პიქსელი სიგანის საწყისი ხედვის არის ექვივალენტურია“. „ტექსტის ინტერვალი“ მოითხოვს, რომ არაფერი დაიკარგოს, როცა მკითხველი სტრიქონის სიმაღლეს შრიფტის ზომის 1,5-ჯერად მნიშვნელობაზე აყენებს, აბზაცებს შორის მანძილს 2-ჯერადზე, ასოებს შორის მანძილს 0,12-ჯერადზე, სიტყვებს შორის კი 0,16-ჯერადზე.

ტექსტის ინტერვალების ბუკმარკლეტი, პატარა სკრიპტი, რომელიც სანიშნედ ინახება, ოთხივე მნიშვნელობას ერთი დაწკაპუნებით აყენებს. მოძებნეთ ღილაკებიდან გადმოსული ტექსტი და კიდეზე მოჭრილი წარწერები. 400%-იანი მასშტაბით ლეპტოპი დაახლოებით იმავეს აჩვენებს, რასაც პატარა ტელეფონი, ამიტომ კარგად აწყობილი ადაპტიური საიტი ამ ტესტის დიდ ნაწილს უკვე გადის.

როგორ შევამოწმოთ ფორმები, შეცდომები და შეკვეთის გაფორმება?

თითოეული მნიშვნელოვანი ფორმა სამჯერ შეავსეთ: ერთხელ სწორად, ერთხელ ყველა ველის ცარიელად დატოვებით და ერთხელ განზრახ შეცდომებით. ყველა ველს ხილული წარწერა უნდა ჰქონდეს, ყველა შეცდომა სიტყვებით უნდა იყოს ახსნილი შესაბამის ველთან, ხოლო პაროლისა და დამადასტურებელი კოდის ველებში ჩასმა უნდა შეგეძლოთ.

• შეცდომები. წითლად დაწერილი „არასწორი მონაცემი“ საკმარისი არ არის. „შეიყვანეთ ვადის გასვლის თარიღი ფორმატით თთ/წწ“ ველის გვერდით კი საკმარისია. გაგზავნის შემდეგ ფოკუსი შეცდომების შეჯამებაზე ან პირველ პრობლემურ ველზე უნდა გადავიდეს.
• შესვლა და კოდები. WCAG 2.2-ის კრიტერიუმის „ხელმისაწვდომი ავთენტიფიკაცია“ (Accessible Authentication) (იხსნება ახალ ჩანართში) მიხედვით, ჩასმის ან პაროლების მენეჯერების დაბლოკვა მოთხოვნის დარღვევაა, თუ შესვლის სხვა გზა არ არსებობს.
• CAPTCHA და დროის ლიმიტები. WebAIM-ის გამოკითხვაში ეკრანის წამკითხველის მომხმარებლებმა CAPTCHA ვებში ყველაზე პრობლემურ ელემენტად დაასახელეს. შეამოწმეთ, არსებობს თუ არა ხელმისაწვდომი ალტერნატივა და შეიძლება თუ არა დროის ლიმიტის გახანგრძლივება.

ჩვენს ვებსაიტის ხელმისაწვდომობის საკონტროლო სიაში ონლაინ მაღაზიებისთვის უფრო სრული ჩამონათვალია, cookie-ების ბანერებისა და ამომხტარი ფანჯრების ჩათვლით.

რას მოიცავს ხელმისაწვდომობის პროფესიული აუდიტი და როდის გჭირდებათ ის?

ხელმისაწვდომობის აუდიტი არის სპეციალისტის მიერ ჩატარებული სტრუქტურირებული შემოწმება კონკრეტული სტანდარტის მიხედვით, ჩვეულებრივ WCAG 2.1-ის ან 2.2-ის AA დონით. ის აერთიანებს ავტომატურ სკანირებას, ხელით შემოწმებასა და დამხმარე ტექნოლოგიებით ტესტირებას თქვენს მთავარ შაბლონებსა და სცენარებზე და მთავრდება პრიორიტეტებად დალაგებული ანგარიშით. ის გჭირდებათ, როცა კანონი თქვენზე ვრცელდება, დიდი გაშვების წინ ან როცა კლიენტები მტკიცებულებას ითხოვენ.

სანამ ფასზე შეთანხმდებით, იკითხეთ:

• რომელი სტანდარტით, ვერსიითა და დონით შეამოწმებთ?
• რომელი შაბლონები და სცენარები შედის სამუშაოში? მაღაზიისთვის: მთავარი გვერდი, კატეგორია, პროდუქტი, კალათა, შეკვეთის გაფორმება, ანგარიშის გვერდები და ფორმები.
• ამოწმებთ თუ არა ხელით, ეკრანის წამკითხველებით, კლავიატურითა და მასშტაბირებით, და რომელ ბრაუზერებსა და მოწყობილობებზე?
• ალაგებს თუ არა ანგარიში პრობლემებს სიმძიმის მიხედვით, მიუთითებს თუ არა მათ ადგილს და გვთავაზობს თუ არა გამოსწორებას?
• შედის თუ არა ფასში ხელახალი შემოწმება?

ფასები მომწოდებლის, ქვეყნისა და სამუშაოს მოცულობის მიხედვით დიდად განსხვავდება, ამიტომ შეადარეთ, რა შედის თითოეულ შეთავაზებაში. თუ ევროპის ხელმისაწვდომობის აქტი თქვენზე ვრცელდება (მაგალითად, თუ ევროკავშირის მომხმარებლებს ემსახურებით), აუდიტი თქვენს საჯარო განცხადებასაც ამყარებს; ჩვენი სახელმძღვანელო EAA-ის შესახებ ხსნის, ვისზე ვრცელდება აქტი.

რატომ უნდა ჩავატაროთ ტესტირება შეზღუდული შესაძლებლობის მქონე მომხმარებლებთან?

იმიტომ, რომ სტანდარტთან შესაბამისობა და მოხერხებულობა ერთი და იგივე არ არის. შეკვეთის გაფორმებამ შეიძლება WCAG-ის ყველა კრიტერიუმი დააკმაყოფილოს და ეკრანის წამკითხველის მომხმარებელს მაინც ოცი წუთი დასჭირდეს. W3C ამბობს, რომ შეზღუდული შესაძლებლობის მქონე მომხმარებლებთან შეფასება „ავლენს გამოყენებადობის პრობლემებს, რომლებიც მხოლოდ შესაბამისობის შეფასებით არ ვლინდება“, და თქვენს გუნდს აჩვენებს, როგორ იყენებენ ადამიანები საიტს სინამდვილეში.

ლაბორატორია არ გჭირდებათ. რამდენიმე სესია თქვენს ყველაზე მნიშვნელოვან ამოცანაზე, მაგალითად პროდუქტის პოვნასა და გადახდაზე, გაცილებით მეტს გასწავლით, ვიდრე სკანირების კიდევ ერთი რაუნდი. მონაწილეები შეზღუდული შესაძლებლობის მქონე ადამიანების ორგანიზაციების, კვლევითი სააგენტოების ან საკუთარი მომხმარებლების მეშვეობით მოიძიეთ და მათ დახარჯული დრო აუნაზღაურეთ. მიეცით საშუალება, საკუთარი მოწყობილობები და პარამეტრები გამოიყენონ. W3C-ის სახელმძღვანელო მომხმარებლების შეფასებაში ჩართვის შესახებ (იხსნება ახალ ჩანართში) საქმის პრაქტიკულ მხარეს განიხილავს.

რა ვუყოთ შედეგებს?

დაალაგეთ პრობლემები იმის მიხედვით, რამდენად სერიოზულად აბრკოლებს ადამიანებს და სად ჩნდება, გამოასწორეთ ისინი საიტის საკუთარ კოდსა და შიგთავსში, ხელახლა შეამოწმეთ და ჩაიწერეთ, რა რჩება გადაუჭრელი. წარწერის გარეშე დატოვებული ველი შეკვეთის გაფორმებაში უფრო მნიშვნელოვანია, ვიდრე კონტრასტის შეცდომა გვერდის ქვედა ნაწილში, ხოლო საერთო შაბლონში შეტანილი გამოსწორება ყველა გვერდს ასწორებს, რომელიც ამ შაბლონს იყენებს.

1. დაალაგეთ პრიორიტეტები. ჯერ ძირითად სცენარებში (შეკვეთის გაფორმება, დაჯავშნა, რეგისტრაცია) არსებული ბლოკერები, შემდეგ საერთო შაბლონები, შემდეგ ცალკეული გვერდები.
2. გამოასწორეთ წყაროში. შეცვალეთ თემა, კომპონენტი ან შიგთავსი და არა მხოლოდ სიმპტომი.
3. ხელახლა შეამოწმეთ. გაიმეორეთ იგივე შემოწმებები, ხელითაც და ხელსაწყოებითაც.
4. დააფიქსირეთ. ცნობილი პრობლემები თარიღებით ჩამოთვალეთ თქვენს ხელმისაწვდომობის განცხადებაში. ჩვენი სახელმძღვანელო WCAG 2.2-ზე ახალ კრიტერიუმებს ხსნის.
5. გაიმეორეთ. ყოველ რელიზს დაუმატეთ კლავიატურით შემოწმება და სკანირება.

თუ ხელმისაწვდომობის ვიჯეტს იყენებთ, ჩვენის ჩათვლით, ტესტირება დახურული ვიჯეტით ჩაატარეთ. SiteAccessible-ის მსგავსი პანელი ვიზიტორებს გვერდის მორგების დამატებით საშუალებებს აძლევს, მაგრამ WCAG ამოწმებს, მუშაობს თუ არა გვერდი ნაგულისხმევ მდგომარეობაში. აუდიტის ზოგიერთი სქემა საერთოდ არ აფასებს გვერდებს, რომლებზეც overlay-სკრიპტი მუშაობს, ამიტომ ეს წინასწარ გაარკვიეთ აუდიტორთან.