טפסים נגישים: תוויות, שגיאות והשלמה אוטומטית

טופס הוא המקום שבו אתר פוגש את העסק: פנייה, הרשמה, רכישה. טופס לא נגיש הוא ליד שלא הגיע. אלה העקרונות שאנחנו בודקים בכל טופס, ושיישמנו גם בטופס של האתר הזה.

תוויות

לכל שדה צריכה להיות תווית גלויה, מעל השדה, שמקושרת אליו בקוד (label עם for). טקסט placeholder בתוך השדה לא מספיק: הוא נעלם בהקלדה, בדרך כלל בניגודיות נמוכה, ולא תמיד מוקרא.

שדות חובה

סמנו שדות חובה במילים, למשל ״(חובה)״, ולא רק בכוכבית אדומה. כוכבית בלבד לא מובנת לכולם, וצבע אדום לבד לא מעביר מידע לכל המשתמשים.

הודעות שגיאה

• הציגו את השגיאה ליד השדה, וקשרו אותה אליו עם aria-describedby.
• סמנו את השדה כלא תקין עם aria-invalid.
• הסבירו איך לתקן: ״מספר הטלפון לא נראה תקין. לדוגמה: 050-1234567״.
• בטופס ארוך, הוסיפו בראשו רשימת שגיאות עם קישור לכל שדה, והעבירו אליה את הפוקוס.

השלמה אוטומטית

המאפיין autocomplete עם ערכים כמו name, email, tel ו-street-address מאפשר לדפדפן למלא פרטים בשביל המשתמש. זה חוסך הקלדה לאנשים עם מוגבלות מוטורית, וזה גם דרישה של WCAG (קריטריון 1.3.5).

ומה עם CAPTCHA?

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