טפסים

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

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

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

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

מרכיבי הטופס ובעיות נגישות
שם מרכיב תיאור מרכיב אתגרי נגישות
תיאור שדה תיאור השדה כולל את שם השדה ולפעמים גם הנחיה למילוי. לדוגמה: "תעודת זהות (9 ספרות)". לפעמים מופיע בנוסף סימון המגדיר את השדה כשדה-חובה, כלומר חובה למלא אותו. לכל שדה חייב להיות שם ברור וייחודי. שם השדה מהווה הוראה למשתמש, לכן רצוי מאוד שהוא יופיע על המסך כל הזמן, גם אחרי שהמשתמש מילא את השדה. אין להשתמש בשום אופן בהזנת תוכן בררת מחדל (placeholder) במקום בתיאור שדה. אל תחסכו מקום – חיסכון במקום עלול לפגוע בהבנה של המשתמשים ולגרום להפסד שלכם.
שדה קֶלט
שדה המאפשר למשתמש להזין נתונים, או לבחור נתונים. שדה כזה בא בצורות שונות: תיבת סימון (checkbox), לחצן אפשרויות (radio button), שדה קלט (input) ועוד. אנשים המשתמשים רק במקלדת, כיוון שהם המתקשים להפעיל עכבר, יתקשו להזין נתונים לטופס הנבנה באמצעות שדות שאינם תומכים בשימוש במקלדת על פי הסטנדרטים. שימו לב! שימוש ב controls לא סטנדרטיים ייצור ברוב המקרים בעיות נגישות למשתמשי מקלדת. עליכם לטפל בבעיות אלה מראש.
ארגון הטופס שיטת הארגון של הטופס – איגוד של מספר שדות תחת כותרות. טופס שמאורגן בצורה לא תקינה עלול לגרום בלבול לאנשים עם קשיי התמצאות ולאלה שמשתמשים בקורא-מסך. שימוש בכותרות, ואיגוד השדות לקבוצות מוגדרות, מסייעים להתמצאות.
הודעות שגיאה לאחר שהמשתמש ממלא את השדה, או לוחץ על כפתור "שליחה", מתבצעות בדיקות לתכנים שהוזנו במטרה למנוע טעויות. כאשר נמצאה טעות בהזנת הנתונים האתר יציג הודעת שגיאה. הודעות שגיאה הן מרכיב חשוב מאוד בטופס. הודעות שגיאה מציבות מספר קשיים מבחינת הנגישות. הקושי המרכזי הוא חוסר-היכולת של תוכנות קורא-מסך לזהות הופעה של הודעות שגיאה (הבעיה חמורה בעיקר כאשר מדובר בהודעות Ajax). יש בעיות נוספות קשורות בעיצוב הודעות השגיאה ומיקומן. לאור מורכבות הנושא הקדשנו מאמר שלם לנגישות הודעות שגיאה.
לחצן "שליחה" כפתור שלחיצה עליו שולחת את הנתונים. יטפסים בלי לחצן "שליחה", או טפסים שבהם הלחצן אינו פעיל עד שהמשתמש מזין את כל הנתונים, אינם נגישים לאנשים הגולשים באמצעות מקלדת, לאנשים המשתמשים בקורא-מסך ולאנשים עם לקויות למידה.

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

הנחיה 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 .

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