पहुँच और सहमति अब क्यों ओवरलैप होती है

GDPR के लिए आवश्यक है कि हर उपयोगकर्ता से सहमति प्राप्त की जाए, न केवल उनसे जो बैनर देख और क्लिक कर सकते हैं। यूरोपीय डेटा सुरक्षा बोर्ड ने स्पष्ट किया है कि यदि कोई डेटा विषय सहमति इंटरफेस के साथ सार्थक रूप से संपर्क नहीं कर सकता — किसी विकलांगता के कारण जिसे साइट ने समायोजित नहीं किया — तो सहमति वैध रूप से प्राप्त नहीं हुई। इसका मतलब है कि कुकीज़ को पहली बार में लोड नहीं होना चाहिए था।

पहुँच के पक्ष में, यूरोपीय पहुँच अधिनियम (EAA), जो सभी EU सदस्य राज्यों में राष्ट्रीय कानून में बदल दिया गया है, उपभोक्ता सेवाएं प्रदान करने वाली निजी क्षेत्र की वेबसाइटों और ऐप्स के लिए WCAG 2.1 AA को न्यूनतम बनाता है। दंड व्यवस्था देश के अनुसार भिन्न होती है लेकिन आमतौर पर प्रति उल्लंघन €50,000 से €500,000 के बीच होती है, साथ ही लगातार गैर-अनुपालन के लिए बाजार वापसी आदेश भी होते हैं।

कुकी बैनर के लिए WCAG की मूल आवश्यकताएं

कीबोर्ड परिचालन

प्रत्येक बैनर नियंत्रण — स्वीकार करें, अस्वीकार करें, प्राथमिकताएं प्रबंधित करें, बंद करें — केवल कीबोर्ड से पहुँचने योग्य और संचालित होना चाहिए। उपयोगकर्ताओं को Tab के साथ तार्किक क्रम में बटनों के माध्यम से नेविगेट करने और Enter या Space के साथ उन्हें सक्रिय करने में सक्षम होना चाहिए। पृष्ठभूमि के खिलाफ न्यूनतम 3:1 कंट्रास्ट अनुपात के साथ फोकस दृश्यमान होना चाहिए।

मोडल बैनर में फोकस ट्रैपिंग

यदि बैनर पृष्ठ के बाकी हिस्सों के साथ इंटरैक्शन को ब्लॉक करता है, तो कीबोर्ड फोकस तब तक बैनर के अंदर फंसा होना चाहिए जब तक उपयोगकर्ता कोई विकल्प न चुन ले। उपयोगकर्ताओं को अंतर्निहित पृष्ठ को स्क्रॉल करने के लिए बैनर से बाहर Tab करने में सक्षम नहीं होना चाहिए। जब फोकस फंसा हुआ था और बैनर बंद हो जाता है, तो फोकस उस तत्व पर वापस आना चाहिए जिसने बैनर ट्रिगर किया या किसी उचित डिफ़ॉल्ट पर।

स्क्रीन रीडर घोषणाएं

बैनर को एक सुलभ नाम और भूमिका के साथ डायलॉग के रूप में घोषित किया जाना चाहिए। बैनर हेडिंग की ओर इशारा करते `aria-labelledby` और व्याख्यात्मक पाठ की ओर इशारा करते `aria-describedby` के साथ `role="dialog"` या `role="alertdialog"` का उपयोग करें।

रंग कंट्रास्ट

बॉडी टेक्स्ट को पृष्ठभूमि के खिलाफ 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 — स्वचालित रूप से लगभग 30-40% WCAG विफलताओं को पकड़ता है।
• Windows पर NVDA या JAWS, Mac/iOS पर VoiceOver, Android पर TalkBack — वास्तविक स्क्रीन रीडर के साथ परीक्षण करें। क्या बैनर को केवल स्क्रीन रीडर का उपयोग करके घोषित, नेविगेट और बंद किया जा सकता है?
• केवल कीबोर्ड नेविगेशन — अपना माउस अनप्लग करें। यदि आप स्वीकार नहीं कर सकते, अस्वीकार नहीं कर सकते और प्राथमिकताएं प्रबंधित नहीं कर सकते, तो कीबोर्ड उपयोगकर्ता भी नहीं कर सकते।
• रंग-अंधता सिमुलेशन — Chrome DevTools में अंतर्निहित दृष्टि दोष सिमुलेटर हैं। जांचें कि स्वीकार करें और अस्वीकार करें प्रोटेनोपिया, डेउटेरेनोपिया और ट्रिटेनोपिया के तहत अलग-अलग हैं।
• 400% तक ज़ूम करें — WCAG के लिए आवश्यक है कि सामग्री क्षैतिज स्क्रॉलिंग के बिना 400% ज़ूम पर उपयोग करने योग्य बनी रहे। फिक्स्ड-पोजिशन बैनर अक्सर इस परीक्षण में विफल होते हैं।

सामान्य पहुँच विफलताएं जो हम देखते हैं

• कॉगव्हील आइकन के पीछे छुपा अस्वीकार — डार्क पैटर्न साथ ही पहुँच विफलता (आइकन बटन पर कोई सुलभ नाम नहीं)।
• फोकस कभी बैनर तक नहीं पहुँचता — बैनर जो दृश्य ध्यान आकर्षित करते हैं लेकिन Tab क्रम में छोड़ दिए जाते हैं।
• फोकस ट्रैप के बिना मोडल बैनर — जब बैनर इंटरैक्शन को ब्लॉक करने का दावा करता है तो उपयोगकर्ता बैकग्राउंड पेज पर Tab कर सकते हैं।
• प्राथमिकता परिवर्तनों पर कोई `aria-live` नहीं — स्क्रीन रीडर उपयोगकर्ता यह पुष्टि नहीं सुनते कि उनकी पसंद सहेजी गई।
• `lang` गुण के बिना अनुवादित बैनर — स्क्रीन रीडर अंग्रेजी उच्चारण के साथ स्पेनिश कॉपी पढ़ते हैं।

FlexyConsent पहुँच कैसे प्रदान करता है