טפסים נגישים
בקצרה
טופס נגיש דורש תווית (label) מקושרת לכל שדה, הודעות שגיאה ברורות שמסבירות איך לתקן, סימון שדות חובה בטקסט (לא רק בכוכבית אדומה), והנחיות מילוי זמינות לפני השליחה. טפסים הם נקודת כשל נפוצה - וקריטית, כי דרכם מתבצעות פעולות (הרשמה, רכישה, יצירת קשר).
תוויות (label)
לכל שדה צריכה להיות <label> מקושרת (דרך for/id). כך קורא מסך יודע מה השדה. placeholder אינו תחליף לתווית - הוא נעלם כשמתחילים להקליד.
הודעות שגיאה
כשיש שגיאה, ההודעה צריכה: (1) לזהות את השדה הבעייתי, (2) להסביר מה השגיאה, ו-(3) איך לתקן. למשל: "תאריך לא תקין - יש להזין בפורמט dd/mm/yyyy". כדאי לקשר את ההודעה לשדה כך שקורא מסך יקריא אותה.
שדות חובה
סמנו שדות חובה בטקסט ("חובה") או ב-aria-required, לא רק בכוכבית אדומה (שזה צבע בלבד). למה לא צבע בלבד.
הנחיות מילוי
אם שדה דורש פורמט מסוים, ספקו הנחיה לפני השליחה (לא רק כשגיאה), ושייכו אותה לשדה. הימנעו ממגבלות זמן קצרות למילוי טופס.
טעות נפוצה
שימוש ב-placeholder כתחליף לתווית - הוא נעלם בהקלדה, בעל ניגודיות נמוכה, וקורא מסך לא תמיד מקריא אותו.
שאלות נפוצות
האם placeholder מספיק כתווית?
לא. צריך label אמיתי מקושר לשדה.
איך מסמנים שדה חובה?
בטקסט ('חובה') או aria-required, לא רק בכוכבית/צבע.
מה צריכה לכלול הודעת שגיאה?
זיהוי השדה, מה השגיאה, ואיך לתקן.
מקורות
- W3C - Forms Tutorial (w3.org/WAI)