טיפול והנגשת טפסים מקוונים באתר אינטרנט

הנגשת טפסים מקוונים מחברת כל שדה לתווית ברורה, מאפשרת מילוי מלא במקלדת ובקורא מסך, ומציגה הודעות שגיאה והנחיות בצורה שטכנולוגיות מסייעות קוראות. לפי ת״י 5568, placeholder אינו תחליף ל-label, ותוסף נגישות אינו מתקן טופס שבור בקוד. המדריך מפרט רכיבים נפוצים ורשימת בדיקה לפני עלייה לאוויר.

מהי הנגשת טפסים מקוונים?

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

תוויות לשדות קלט – label, for ו-id

לכל שדה צריכה להיות תווית קבועה שמסבירה את מטרתו. חברו את ה-label ל-id המתאים, אל תסתמכו רק על placeholder, ושמרו על סדר הגיוני במקלדת. אם יש הנחיה נוספת, קשרו אותה לשדה כך שקורא מסך יקבל את ההקשר.

רדיו, צ׳קבוקס ו-fieldset

קבוצת אפשרויות צריכה כותרת ברורה באמצעות fieldset ו-legend. לכל אפשרות נפרדת נדרשת תווית, ואפשר לבחור ולהסיר בחירה במקלדת. אל תעבירו את המשתמש לעמוד אחר מיד אחרי בחירה בלי להודיע על כך.

select ו-optgroup – בלי ניווט אוטומטי ב-onchange

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

הודעות שגיאה ו-aria-describedby

כאשר שליחה נכשלת, הציגו הודעה ליד השדה ובתחילת הסיכום אם יש כמה שגיאות. קשרו את ההודעה באמצעות aria-describedby, ציינו מה צריך לתקן ואל תמחקו את הערכים שכבר הוזנו. חשוב שהשגיאה תהיה טקסט אמיתי, לא רק צבע אדום או אייקון.

טפסים מרובי שלבים

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

רשימת בדיקה לפני פרסום

1. לכל שדה יש label גלוי וברור.
2. אפשר להשלים את הטופס במקלדת בלבד.
3. סדר הפוקוס הגיוני ונראה על המסך.
4. קבוצות רדיו וצ׳קבוקס כוללות הקשר מתאים.
5. שגיאות מתוארות במילים ונקשרות לשדות.
6. אין שליחה או שינוי עמוד מפתיע.
7. הטופס עובד במסך קטן ובזום מוגדל.
8. נבדקו גם קורא מסך, הודעות הצלחה ושלב התודה.

מתי תוסף לא מספיק וצריך הנגשה בקוד?

תוסף יכול לסייע באפשרויות תצוגה, אך הוא לא מתקן markup חסר, תוויות שלא נקשרו, ניהול פוקוס או הודעות שגיאה. כשיש פערים מבניים נדרשת עבודה בקוד ובתבניות. אפשר לקרוא על תוסף נגישות ולהשוות למסלול של הנגשת אתרים.

סיכום ו-CTA

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

רוצים שנבדוק את הטפסים באתר שלכם? צוות WEB-A יכול למפות את הרכיבים, להצביע על תיקונים מעשיים ולהציע מסלול מדורג – בלי התחייבות.

>

רכיב	דרישה	כשל נפוץ
שדה טקסט	label מחובר ל-id	placeholder משמש כתווית יחידה
קבוצת בחירה	fieldset ו-legend	אין הקשר לקבוצת האפשרויות
select	אפשרות ניווט ושליחה ברורות	שינוי שולח טופס בלי אזהרה