دسترسپذیری رضایت کوکی: انطباق WCAG 2.2 برای배너های رضایت
یک배너 کوکی که کاربران صفحهکلید نمیتوانند آن را رد کنند، صفحهخوانها نمیتوانند آن را اعلام کنند، یا بازدیدکنندگان رنگکور نمیتوانند آن را بخوانند، تنها تجربه کاربری بدی نیست — بلکه شکست انطباقی در دو جبهه است. از زمانی که قانون دسترسپذیری اروپا در ژوئن ۲۰۲۵ به اجرا درآمد، رابطهای رضایت در وبسایتهای تجاری که به کاربران اتحادیه اروپا خدمت میدهند باید حداقل سطح AA از WCAG 2.1 را برآورده کنند، با توصیه اکید به WCAG 2.2 برای سال ۲۰۲۶. در ترکیب با الزام GDPR مبنی بر اینکه رضایت باید «آزادانه داده شده، خاص، آگاهانه و بدون ابهام» باشد،배너های غیرقابل دسترس اکنون خطر قانونی دوگانه ایجاد میکنند. این راهنما دقیقاً توضیح میدهد که یک배너 کوکی مطابق با WCAG در سال ۲۰۲۶ چگونه به نظر میرسد.
چرا دسترسپذیری و رضایت اکنون با هم همپوشانی دارند
GDPR مستلزم است که رضایت از هر کاربری قابل دریافت باشد، نه فقط کسانی که میتوانند یک배너 را ببینند و روی آن کلیک کنند. هیئت اروپایی حفاظت از دادهها توضیح داده است که اگر یک موضوع داده نتواند بهطور معناداری با رابط رضایت تعامل داشته باشد — به دلیل ناتوانیای که سایت برای آن تدارک ندیده — رضایت بهدرستی اخذ نشده است. این بدان معناست که کوکیها اصلاً نباید بارگذاری میشدند.
از نظر دسترسپذیری، قانون دسترسپذیری اروپا (EAA) که در سراسر کشورهای عضو اتحادیه اروپا به قانون ملی تبدیل شده است، WCAG 2.1 AA را به حداقل برای وبسایتها و برنامههای بخش خصوصی که خدمات مصرفی ارائه میدهند تبدیل میکند. رژیم مجازات بر اساس کشور متفاوت است اما معمولاً از ۵۰٬۰۰۰ تا ۵۰۰٬۰۰۰ یورو به ازای هر تخلف متغیر است، به علاوه دستورهای خروج از بازار برای عدم انطباق مستمر.
الزامات اصلی WCAG برای배너های کوکی
قابلیت کار با صفحهکلید
هر کنترل배너 — پذیرش، رد، مدیریت تنظیمات برگزیده، بستن — باید فقط با صفحهکلید قابل دسترسی و قابل استفاده باشد. کاربران باید بتوانند با Tab از طریق دکمهها به ترتیب منطقی حرکت کنند و آنها را با Enter یا Space فعال کنند. تمرکز باید با حداقل نسبت کنتراست ۳:۱ در برابر پسزمینه قابل مشاهده باشد.
دام تمرکز در배너های مودال
اگر배너 تعامل با بقیه صفحه را مسدود میکند، تمرکز صفحهکلید باید در داخل배너 محبوس شود تا زمانی که کاربر انتخابی انجام دهد. کاربران نباید بتوانند با Tab از배너 خارج شوند تا صفحه زیرین را اسکرول کنند. وقتی تمرکز محبوس بود و배너 بسته میشود، تمرکز باید به عنصری که배너 را راهاندازی کرد یا به یک پیشفرض معقول بازگردد.
اعلامهای صفحهخوان
배너 باید به عنوان یک دیالوگ با نام و نقش قابل دسترس اعلام شود. از `role="dialog"` یا `role="alertdialog"` با `aria-labelledby` که به عنوان배너 اشاره میکند و `aria-describedby` که به متن توضیحی اشاره میکند استفاده کنید.
کنتراست رنگ
متن اصلی باید کنتراست ۴٫۵:۱ در برابر پسزمینه را برآورده کند؛ متن بزرگ (۱۸ نقطه+ یا ۱۴ نقطه ضخیم) به ۳:۱ نیاز دارد. متن دکمه، آیکونها و نشانگرهای تمرکز همه حداقلهای کنتراست خاص خود را دارند. دکمه «رد» به رنگ خاکستری روشن روی پسزمینه سفید یک شکست رایج WCAG است که در بررسیها مشاهده میکنیم.
عدم استفاده صرف از رنگ به عنوان نشانه
برای تمایز پذیرش از رد، تنها به رنگ متکی نباشید. از برچسبها، آیکونها یا اشکال متمایز استفاده کنید تا کاربران رنگکور بتوانند دکمهها را از هم تشخیص دهند.
الگوهای تاریک و دسترسپذیری
WCAG 2.2 معیارهای جدیدی را معرفی میکند که مستقیماً الگوهای تاریک را هدف قرار میدهند — بهویژه مرتبط با رضایت:
- ۳٫۳٫۸ احراز هویت قابل دسترس — معماهای شناختی را به عنوان اصطکاک رضایت ممنوع میکند.
- ۳٫۳٫۷ ورودی مضاعف — کاربران نباید فقط برای لغو رضایت مجبور به وارد کردن مجدد اطلاعات شوند.
- ۲٫۴٫۱۱ تمرکز پنهان نشده — خود배너 نباید نشانگر تمرکز عناصر پشت آن را پنهان کند.
- ۲٫۵٫۷ حرکات کشیدن — اگر배너 شما از تعامل کشیدن برای پذیرش استفاده میکند، یک جایگزین تکنشانگر باید وجود داشته باشد.
RTL و بینالمللیسازی
دسترسپذیری به زبانهای راستبهچپ (عربی، عبری، فارسی، اردو) و تلفظ صفحهخوان گسترش مییابد:
- `dir="rtl"` را روی배너 تنظیم کنید وقتی زبان سند RTL است تا ترتیب دکمه و جریان تمرکز با جهت خواندن مطابقت داشته باشد.
- از ویژگیهای `lang` صحیح استفاده کنید روی نسخه배너 ترجمهشده تا صفحهخوانها کلمات را با آواشناسی صحیح تلفظ کنند.
- آیکونوگرافی را آینهای کنید — شورونها، فلشها و نشانگرهای پیشرفت باید برای محلیهای RTL برگردانده شوند.
آزمایش배너 برای انطباق با WCAG
به یک ابزار تکیه نکنید. اسکن خودکار را با آزمایش فناوری کمکی واقعی ترکیب کنید:
- axe DevTools یا Lighthouse — تقریباً ۳۰-۴۰٪ از شکستهای WCAG را بهطور خودکار میگیرد.
- NVDA یا JAWS روی Windows، VoiceOver روی Mac/iOS، TalkBack روی Android — با صفحهخوانهای واقعی آزمایش کنید. آیا배너 میتواند تنها با استفاده از صفحهخوان اعلام، پیمایش و رد شود؟
- ناوبری فقط با صفحهکلید — ماوس را جدا کنید. اگر نمیتوانید پذیرفتن، رد کردن و مدیریت تنظیمات برگزیده را انجام دهید، کاربران صفحهکلید هم نمیتوانند.
- شبیهسازی کوری رنگ — Chrome DevTools شبیهسازهای نقص بینایی داخلی دارد. بررسی کنید که پذیرش و رد در پروتانوپیا، دوترانوپیا و تریتانوپیا قابل تمایز هستند.
- بزرگنمایی به ۴۰۰٪ — WCAG مستلزم است که محتوا در بزرگنمایی ۴۰۰٪ بدون اسکرول افقی قابل استفاده بماند. باnerهای با موقعیت ثابت اغلب در این آزمایش شکست میخورند.
شکستهای رایج دسترسپذیری که مشاهده میکنیم
- رد پشت آیکون چرخ دنده پنهان شده — الگوی تاریک به علاوه شکست دسترسپذیری (هیچ نام قابل دسترسی در دکمه آیکون وجود ندارد).
- تمرکز هرگز به배너 نمیرسد — باnerهایی که توجه بصری را میدزدند اما در ترتیب Tab نادیده گرفته میشوند.
- 배너 مودال بدون دام تمرکز — کاربران میتوانند به صفحه پسزمینه Tab بزنند در حالی که배너 ادعا میکند تعامل را مسدود میکند.
- هیچ `aria-live` روی تغییرات تنظیمات برگزیده نیست — کاربران صفحهخوان تأییدیهای که انتخابشان ذخیره شده است نمیشنوند.
- باnerهای ترجمهشده بدون ویژگی `lang` — صفحهخوانها متن اسپانیایی را با آواشناسی انگلیسی تلفظ میکنند.
چگونه FlexyConsent دسترسپذیری را ارائه میدهد
FlexyConsent از همان ابتدا با WCAG 2.2 AA مطابقت دارد:
- همه کنترلها با نشانگرهای تمرکز قابل مشاهده ۳:۱ با صفحهکلید قابل استفاده هستند.
- `role="dialog"` مناسب با `aria-labelledby` و `aria-describedby`.
- دام تمرکز با بستن با Escape برای바너های اختیاری.
- کنتراست ۴٫۵:۱+ روی هر عنصر متنی، از جمله رد.
- چرخش RTL خودکار برای محلیهای عربی، عبری، فارسی و اردو.
- ویژگی `lang` برای هر ترجمه برای تلفظ صحیح صفحهخوان تنظیم شده است.
- طرحبندی مقاوم در برابر زوم که در ۴۰۰٪ قابل استفاده میماند.