რატომ ემთხვევა ახლა ხელმისაწვდომობა და თანხმობა

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

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

Cookie-ბანერების WCAG-ის ძირითადი მოთხოვნები

კლავიატურის ოპერაბელობა

ბანერის ყველა კონტროლი — მიღება, უარყოფა, პრეფერენციების მართვა, დახურვა — მხოლოდ კლავიატურით მიღწევადი და ოპერირებადი უნდა იყოს. მომხმარებლებს უნდა შეეძლოთ Tab-ით ღილაკებზე ლოგიკური თანმიმდევრობით გადასვლა და Enter ან Space-ით გააქტიურება. ფოკუსი უნდა იყოს ხილული ფონთან მინიმუმ 3:1 კონტრასტის თანაფარდობით.

ფოკუსის ხაფანგი მოდალ ბანერებში

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

ეკრანის მკითხველის განცხადებები

ბანერი უნდა გამოცხადდეს, როგორც დიალოგი ხელმისაწვდომი სახელითა და როლით. გამოიყენეთ `role="dialog"` ან `role="alertdialog"` `aria-labelledby` ბანერის სათაურზე მიმთითებელი და `aria-describedby` განმარტებით ტექსტზე მიმთითებელი.

ფერის კონტრასტი

ძირითად ტექსტს ფონთან 4.5:1 კონტრასტი უნდა ჰქონდეს; დიდ ტექსტს (18pt+ ან 14pt მუქი) 3:1 სჭირდება. ღილაკის ტექსტს, ხატულებს და ფოკუსის ინდიკატორებს ყველას საკუთარი კონტრასტის მინიმალური მნიშვნელობები აქვს. ღია-ნაცრისფერი "უარყოფა" ღილაკი თეთრ ფონზე ხშირად ნახული WCAG-ის ხარვეზია აუდიტებში.

მხოლოდ ფერზე დამყარებული მინიშნებები არ გამოიყენება

მხოლოდ ფერს ნუ დაეყრდნობით მიღების და უარყოფის განსარჩევად. გამოიყენეთ განსხვავებული ლეიბლები, ხატულები ან ფიგურები, რათა ფერბრმა მომხმარებლებმა შეძლონ ღილაკების გარჩევა.

მუქი შაბლონები და ხელმისაწვდომობა

WCAG 2.2 წარმოადგენს ახალ კრიტერიუმებს, რომლებიც პირდაპირ მიზნად ისახავს მუქ შაბლონებს — განსაკუთრებით რელევანტური თანხმობისთვის:

• 3.3.8 ხელმისაწვდომი ავთენტიფიკაცია — კრძალავს კოგნიტიურ თავსატეხებს, როგორც თანხმობის ხახუნს.
• 3.3.7 ზედმეტი შეყვანა — მომხმარებლებს ინფორმაციის ხელმეორედ შეყვანა მხოლოდ თანხმობის გასაუქმებლად არ უნდა მოუწიოთ.
• 2.4.11 ფოკუსი დახშული არ არის — ბანერმა თავად არ უნდა დახუროს მის უკან მდებარე ელემენტების ფოკუსის ინდიკატორი.
• 2.5.7 გადატანის მოძრაობები — თუ თქვენი ბანერი მოიცავს გადათრევა-მისაღებად ინტერაქციას, ერთი მაჩვენებლის ალტერნატივა უნდა არსებობდეს.

RTL და ინტერნაციონალიზაცია

ხელმისაწვდომობა ვრცელდება მარჯვნიდან მარცხნივ ენებზე (არაბული, ებრაული, სპარსული, ურდუ) და ეკრანის მკითხველის გამოთქმაზე:

• ბანერზე `dir="rtl"` დაყენება დოკუმენტის ენა RTL-ის შემთხვევაში, რათა ღილაკების თანმიმდევრობა და ფოკუსის ნაკადი კითხვის მიმართულებას შეესაბამებოდეს.
• სწორი `lang` ატრიბუტების გამოყენება თარგმნილ ბანერის ტექსტზე, რათა ეკრანის მკითხველებმა სიტყვები სწორი ფონეტიკით გამოთქვან.
• ხატვის სარკისებური ასახვა — ისრები და პროგრეს ინდიკატორები RTL ლოკალებისთვის უნდა მოტრიალდეს.

ბანერის ტესტირება WCAG შესაბამისობაზე

ერთ ინსტრუმენტს ნუ დაეყრდნობით. შეაერთეთ ავტომატიზებული სკანირება რეალური დამხმარე ტექნოლოგიების ტესტირებასთან:

• axe DevTools ან Lighthouse — ავტომატურად ამოიცნობს WCAG-ის ხარვეზების დაახლოებით 30-40%-ს.
• NVDA ან JAWS Windows-ზე, VoiceOver Mac/iOS-ზე, TalkBack Android-ზე — ტესტი რეალური ეკრანის მკითხველებით. შეიძლება ბანერი გამოცხადდეს, ნავიგირდეს და დაიხუროს მხოლოდ ეკრანის მკითხველის გამოყენებით?
• მხოლოდ კლავიატურის ნავიგაცია — მაუსი გამოიღეთ. თუ ვერ შეგიძლიათ მიღება, უარყოფა და პრეფერენციების მართვა, კლავიატურის მომხმარებლებიც ვერ შეძლებენ.
• ფერბრმობის სიმულაცია — Chrome DevTools-ს ჩაშენებული მხედველობის დეფიციტის სიმულატორები გააჩნია. შეამოწმეთ, შეიძლება თუ არა მიღება და უარყოფა განიმარტოს პროტანოპიის, დეიტერანოპიის და ტრიტანოპიის პირობებში.
• 400%-ზე გადიდება — WCAG მოითხოვს, რომ კონტენტი 400% გადიდებაზე ჰორიზონტალური გადახვევის გარეშე გამოსაყენებელი დარჩეს. ფიქსირებული პოზიციის ბანერები ხშირად ვერ ასრულებს ამ ტესტს.

ჩვეულებრივი ხელმისაწვდომობის ხარვეზები, რომლებსაც ვხედავთ

• უარყოფა კოქოსის ხატულის მიღმა დამალული — მუქი შაბლონი და ხელმისაწვდომობის ხარვეზი ერთდროულად (ხატულის ღილაკზე ხელმისაწვდომი სახელი არ არის).
• ფოკუსი ბანერს ვერასდროს მიაღწევს — ბანერები, რომლებიც ვიზუალური ყურადღებას იპარავენ, მაგრამ Tab-ის თანმიმდევრობაში გამოტოვებულია.
• მოდალ ბანერი ფოკუსის ხაფანგის გარეშე — მომხმარებლებს Tab-ით ფონის გვერდზე გადასვლა შეუძლიათ, ხოლო ბანერი ამტკიცებს, რომ ბლოკავს ინტერაქციას.
• არ არის `aria-live` პრეფერენციის ცვლილებებზე — ეკრანის მკითხველის მომხმარებლები ვერ ისმენენ დადასტურებას, რომ მათი არჩევანი შენახული იყო.
• თარგმნილი ბანერები `lang` ატრიბუტის გარეშე — ეკრანის მკითხველები ესპანური ტექსტს ინგლისური ფონეტიკით გამოთქვამენ.

როგორ უზრუნველყოფს FlexyConsent ხელმისაწვდომობას