נגישות טפסים אומרת שכל אחד יכול למלא ולשלוח את הטופס באתר — גם בלי עכבר, גם עם קורא מסך, גם עם הגדלה של 200% וגם מי שמתקשה לזכור הוראות. בפועל זה מסתכם בכמה דברים: לכל שדה יש תווית אמיתית, ההוראות מופיעות לפני השדה, שגיאות מוסברות במילים ובמקום שבו רואים ושומעים אותן, ואין מכשול כמו CAPTCHA שחוסם אנשים. טופס הוא המקום שבו נגישות שווה כסף: לקוח שלא מצליח לשלוח פנייה פשוט עוזב.
כמה זה נפוץ
לפי WebAIM Million 2026, ב-51% מעמודי הבית של מיליון האתרים הפופולריים יש שדות טופס בלי תווית. בממוצע יש בעמוד בית 6.9 שדות, ו-33.1% מהם לא מתויגים כראוי. כלומר — בעיה של כמעט כל אתר שני.
1. תווית אמיתית לכל שדה
הטעות הקלאסית: טקסט בתוך השדה (placeholder) במקום תווית. הוא נראה נקי, אבל:
- הוא נעלם ברגע שמתחילים להקליד, ואז לא זוכרים מה השדה דורש.
- הניגודיות שלו בדרך כלל נמוכה.
- חלק מקוראי המסך לא מתייחסים אליו כאל שם השדה.
הפתרון הוא אלמנט label גלוי שמקושר לשדה. קריטריון 3.3.2 ב-WCAG (תוויות או הוראות) דורש שיהיו תוויות או הוראות כשהטופס מבקש קלט מהמשתמש.
<label for="phone">טלפון</label> <input id="phone" name="phone" type="tel" autocomplete="tel">
שדות חובה
כוכבית אדומה לבד לא מספיקה — לא כולם מבינים אותה, וצבע לבד לא מעביר מידע לכולם. כותבים בתחילת הטופס "שדות המסומנים ב-* הם חובה", ומוסיפים לשדות עצמם את התכונה required, שקוראי מסך מקריאים.
2. קבוצות של שדות
כפתורי בחירה ותיבות סימון שעונים על אותה שאלה ("איך נוח לחזור אליכם? טלפון / מייל / וואטסאפ") צריכים להיות עטופים ב-fieldset עם legend. אחרת קורא המסך מקריא "טלפון, כפתור בחירה" בלי השאלה.
3. הודעות שגיאה שאפשר להבין ולתקן
קריטריון 3.3.1 (זיהוי שגיאות) דורש שכשהמערכת מזהה שגיאה, השדה הבעייתי יזוהה והשגיאה תתואר למשתמש בטקסט. בפועל:
- בטקסט, לא רק בצבע. מסגרת אדומה לא מספיקה.
- ספציפי. "מספר הטלפון צריך להכיל 9 או 10 ספרות" עדיף על "שדה לא תקין".
- ליד השדה, ומקושר אליו (למשל ב-
aria-describedby), כדי שקורא המסך יקריא את השגיאה כשחוזרים לשדה. - הפוקוס עובר לשגיאה אחרי שליחה — לשדה הראשון השגוי או לסיכום שגיאות בראש הטופס. אחרת משתמש קורא מסך לוחץ "שלח" ולא יודע שמשהו קרה.
- לא מוחקים את מה שהוקלד. טופס שמתאפס אחרי שגיאה מתיש את כולם.
4. השלמה אוטומטית
התכונה autocomplete (למשל name, email, tel) מאפשרת לדפדפן למלא פרטים שמורים. זה חוסך הקלדה לכולם, ובמיוחד לאנשים עם מוגבלות מוטורית או קוגניטיבית. קריטריון 1.3.5 הוא חלק מ-WCAG 2.1 ומעלה — לא מ-WCAG 2.0 שעליו מבוסס התקן הישראלי — אבל זה שינוי של שורה אחת שכדאי לעשות בכל מקרה.
5. CAPTCHA — המכשול הגדול
CAPTCHA שמבקש לזהות אותיות מעוותות או ללחוץ על "כל התמונות עם רמזור" חוסם אנשים עיוורים, כבדי ראייה ואנשים עם לקויות קוגניטיביות. WCAG 2.2 הוסיף קריטריון (3.3.8, אימות נגיש) שמגביל מבחנים קוגניטיביים בתהליכי התחברות. גם אם התקן הישראלי עוד לא מחייב אותו, הכיוון ברור: הגנה מספאם שלא דורשת מהמשתמש לפתור חידה. אפשרויות כאלה — שדה מלכודת נסתר, הגבלת קצב, בדיקה בצד השרת — פירטתי בספאם בטפסים.
6. מקלדת וזמן
- אפשר לעבור על כל השדות בסדר הגיוני עם Tab, ולשלוח עם Enter.
- רואים בבירור באיזה שדה הפוקוס. ראו ניווט במקלדת.
- תפריטים נפתחים מותאמים אישית (במקום
selectרגיל) הם מקור קבוע לבעיות. אם אין סיבה טובה — משתמשים ברכיב המובנה. - טופס עם הגבלת זמן צריך להזהיר לפני שהזמן נגמר ולאפשר הארכה.
בדיקה של חמש דקות לטופס שלכם
- ממלאים את הטופס במקלדת בלבד, בלי עכבר.
- שולחים אותו ריק: האם השגיאות מוסברות במילים? האם הפוקוס זז אליהן?
- מגדילים את הדפדפן ל-200%: האם התוויות וההודעות עדיין נראות?
- עוברים עליו עם קורא מסך: האם כל שדה מוקרא עם השם שלו? ראו בדיקה עם קורא מסך.
- שולחים בהצלחה: האם ההודעה "נשלח" מוקראת, או רק מופיעה בצד?
שאלות נפוצות
טופס של מערכת חיצונית (CRM, זימון תורים) — גם עליו אני אחראי?
מבחינת הגולש הוא חלק מהאתר. לפני שבוחרים רכיב כזה כדאי לבדוק אותו במקלדת ובקורא מסך, ואם הוא לא נגיש — להציע דרך חלופית ולציין זאת בהצהרת הנגישות.
מספיק לכתוב את שם השדה בתוך השדה?
לא. placeholder לא מחליף תווית — הוא נעלם, ולעיתים קרובות לא מוקרא כשם השדה.
וטופס קצר עם שדה אחד, כמו הרשמה לניוזלטר?
גם לו צריך תווית — אפשר להסתיר אותה ויזואלית ולהשאיר אותה לקוראי מסך, אבל עדיף שתהיה גלויה.
בטפסים שאני בונה אני מקפיד על תוויות גלויות, הודעות שגיאה מקושרות והגנה מספאם בלי חידות. על עמוד יצירת הקשר כולו כתבתי בדף צור קשר, ופרטים על ההנגשה בעמוד הנגשת אתרים.
אהבתם את המאמר?
