טפסים

טפסים הם מרכיב חשוב ביותר באתר האינטרנט שלכם. יש להם כמה שימושים:

• קניית מוצרים.
• הרשמה לדפי מידע.
• יצירת קשר.

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

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

הנחיות נגישות רלוונטיות

הנחיה 1.3 ניתן להתאמה: יש לבנות תכנים הניתנים להצגה בדרכים שונות (למשל מתווה פשוט יותר) ללא איבוד מידע או מבנה.

הנחיה 3.3 עזרה בקלט: יש לסייע למשתמשים להימנע משגיאות ולתקנן.

טכניקות לבניית טפסים נגישים

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

קישור בין שדה בטופס לטקסט שמתאר אותו

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

לדוגמה: קישור תווית "שם פרטי" לתיבת הטקסט המתאימה בטופס.

<label for="firstname">First name:</label>
<input id="firstname" name="firstname" type="text" />

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

</pre>
<fieldset><legend>Phone number</legend> <input id="areaCode" title="Area Code" name="areaCode" size="3" type="text" value="" /> <input id="exchange" title="First three digits of phone number" name="exchange" size="3" type="text" value="" /> <input id="lastDigits" title="Last four digits of phone number" name="lastDigits" size="4" type="text" value="" /></fieldset>
<pre>

סימון שדות חובה

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

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

ארגון הטופס

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

</pre>
<fieldset><legend>כתובת</legend> --- השדות: עיר, רחוב, מספק בית, ומיקוד יופיעו פה ---</fieldset>
<pre>

עבור תיבות בחירה (combo boxes) – השתמשו ב-optgroup כדי לקבץ קבוצות של options (לדוגמה: אזור המרכז, אזור הדרום, אזור הצפון).

עבור לחצני אפשרויות (radio buttons) או תיבות סימון (checkboxes) – השתמשו ב legend כדי לתאר קבוצות של שדות ממין זה. ככלל, radio buttons או של checkboxes ייחשבו קשורים זה לזה במערכת אחת, כאשר ערך name שלהם זהה. קישור זה מאפשר לאנשים המשתמשים בקוראי-מסך לשמוע את תיאור בנוסף לאפשרויות הבחירה. כאשר קבוצה קטנה של radio buttons כוללת הוראות ברורות ובחירה מובחנת, אין חובה להשתמש ב legend.

הודעות שגיאה

על מנת שמשתמשי תוכנות קוראות מסך יוכלו לקבל מידע אודות ערכים שגויים שהוזנו בטופס, יש לספק להם הודעות שגיאה נגישות. מאמר מקיף בנושא הודעות שגיאה ניתן למצוא באתר WEBAIM במאמר Usable and Accessible Form Validation and Error Recovery .

עודכן ע"י אילנה בניש בתאריך 05.06.2017