קריטריון 3.3.2: תוויות או הוראות רמה A

פרטי הקריטריון

מה דורש קריטריון 3.3.2?

כאשר ממשק דורש קלט מהמשתמש - בין אם טופס ליצירת קשר, עמוד הרשמה, שדה חיפוש, או כל פקד אינטראקטיבי אחר - יש לספק תוויות (labels) או הוראות המסבירות מה נדרש. הקריטריון מכסה מספר מקרים:

• שדות חובה - יש לציין אילו שדות נדרשים, ולא רק לסמן אותם בכוכבית ללא הסבר.
• פורמטים מיוחדים - אם נדרש פורמט מסוים (כגון "DD/MM/YYYY" לתאריך, או "קידומת ארצית" לטלפון), יש להסביר זאת לפני מילוי השדה.
• מגבלות קלט - הגבלות על מספר תווים, סוגי תווים מותרים, או ערכים חוקיים.
• קבוצות פקדים - קבוצת כפתורי רדיו או תיבות סימון צריכה כותרת קבוצתית (fieldset/legend).

למי זה עוזר?

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

איך עומדים בקריטריון?

• השתמשו ב-<label for="..."> המקושר ל-id של שדה הקלט - זהו השיטה המועדפת.
• אל תסתמכו על placeholder בלבד כתווית - הוא נעלם בעת הקלדה ואינו תמיד נגיש לטכנולוגיות מסייעות.
• ציינו שדות חובה בטקסט ברור (למשל "שדה חובה" או "נדרש") ולא בכוכבית בלבד, או הסבירו את משמעות הכוכבית בראש הטופס.
• הוסיפו הוראות לפורמטים מיוחדים לפני השדה, לא רק בהודעת שגיאה לאחר מעשה.
• עטפו קבוצות קשורות (רדיו, checkboxes) ב-<fieldset> עם <legend> מתאר.

איך בודקים?

• בדיקה ידנית: עברו על כל שדות הטופס ובדקו שלכל אחד יש תווית גלויה ומקושרת. ודאו שהוראות לפורמט מיוחד מופיעות לפני השדה.
• קורא מסך (NVDA / VoiceOver): עברו שדה-שדה ובדקו שהשם המוקרא לכל שדה מתאר בבירור את מטרתו.
• בדיקת קוד: ודאו שכל <input>, <select> ו-<textarea> מקושרים ל-<label> תואם, או שיש להם aria-label / aria-labelledby.
• כלים אוטומטיים (axe, WAVE): יזהו שדות ללא תווית, אך לא יבדקו אם הניסוח ברור ומועיל.