מדוע נגישות והסכמה חופפות כיום

ה-GDPR מחייב שניתן יהיה לקבל הסכמה מכל משתמש, לא רק מאלה שיכולים לראות כרזה וללחוץ עליה. המועצה האירופית להגנה על מידע הבהירה כי אם נושא נתונים אינו יכול לקיים אינטראקציה משמעותית עם ממשק ההסכמה — בשל מוגבלות שהאתר לא התאים לה — ההסכמה לא התקבלה כדין. פירוש הדבר שהעוגיות לא היו אמורות להיטען כלל.

מצד הנגישות, חוק הנגישות האירופי (EAA), שהוטמע בחוק הלאומי בכל מדינות חברות האיחוד האירופי, הופך את WCAG 2.1 AA לרף המינימום עבור אתרי ואפליקציות המגזר הפרטי המציעים שירותי צרכנות. משטר העונשים משתנה לפי מדינה, אך בדרך כלל נע בין 50,000 ל-500,000 אירו לכל הפרה, בנוסף להוראות נסיגה מהשוק במקרי אי עמידה מתמשכת.

דרישות 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 — מאתר אוטומטית כ-30-40% מכשלי WCAG.
• NVDA או JAWS על Windows, VoiceOver על Mac/iOS, TalkBack על Android — בדוק עם קוראי מסך אמיתיים. האם ניתן להכריז על הכרזה, לנווט בה ולסגור אותה באמצעות קורא המסך בלבד?
• ניווט באמצעות מקלדת בלבד — נתק את העכבר. אם לא ניתן לקבל, לדחות ולנהל העדפות, גם משתמשי מקלדת לא יוכלו.
• סימולציה של עיוורון צבעים — ל-Chrome DevTools יש סימולטורי ליקויי ראייה מובנים. בדוק שקבל ודחה ניתנים להבחנה בפרוטנופיה, דאוטרנופיה וטריטנופיה.
• זום ל-400% — WCAG מחייב שתוכן יישאר שמיש ב-400% זום ללא גלילה אופקית. כרזות במיקום קבוע לרוב נכשלות במבחן זה.

כשלי נגישות נפוצים שאנו רואים

• דחה מוסתר מאחורי סמל גלגל שיניים — תבנית חשוכה בנוסף לכשל נגישות (אין שם נגיש על כפתור הסמל).
• המיקוד לעולם לא מגיע לכרזה — כרזות שגונבות תשומת לב חזותית אך מדולגות בסדר Tab.
• כרזה מודאלית ללא לכידת מיקוד — משתמשים יכולים ל-Tab לדף הרקע בזמן שהכרזה טוענת לחסימת אינטראקציה.
• אין `aria-live` על שינויי העדפות — משתמשי קורא מסך לא שומעים אישור ששינוי ההעדפה נשמר.
• כרזות מתורגמות ללא תכונת `lang` — קוראי מסך מהגים טקסט ספרדי עם פונטיקה אנגלית.

כיצד FlexyConsent מספקת נגישות