טפסים נגישים: תוויות, שגיאות ושדות חובה

תווית לכל שדה

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

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

<label for="phone">טלפון נייד</label>
<input id="phone" name="phone" type="tel" inputmode="tel" dir="ltr" autocomplete="tel">

<fieldset>
  <legend>איך נחזור אליכם?</legend>
  <label><input type="radio" name="via" value="phone"> בטלפון</label>
  <label><input type="radio" name="via" value="email"> במייל</label>
</fieldset>

שדות חובה

• סמנו שדה חובה גם בטקסט (למשל "(חובה)"), לא רק בכוכבית אדומה.
• הוסיפו required או aria-required="true" כדי שקורא המסך יכריז.
• אם רוב השדות חובה, כתבו בתחילת הטופס "כל השדות חובה חוץ מ...".

הודעות שגיאה

הודעה טובה אומרת מה לא בסדר ואיך לתקן, בעברית, ליד השדה. היא מקושרת לשדה עם aria-describedby, והשדה מסומן aria-invalid="true". אחרי שליחה, העבירו את המיקוד לשדה הראשון עם שגיאה או לסיכום שגיאות בראש הטופס.

<label for="id-num">מספר תעודת זהות</label>
<input id="id-num" inputmode="numeric" dir="ltr"
       aria-invalid="true" aria-describedby="id-num-err">
<p id="id-num-err">מספר תעודת זהות צריך להכיל 9 ספרות.</p>

מקור: W3C WAI: מדריך טפסים נגישים (נפתח בחלון חדש)

עברית, כיוון ומספרים

• שדות טלפון, מייל, כתובת אתר ות"ז: dir="ltr", כדי שהסדר יישאר נכון בזמן ההקלדה.
• inputmode="numeric" או type="tel" פותחים מקלדת מספרים בטלפון.
• autocomplete (name, email, tel, street-address) חוסך הקלדה, ומומלץ לפי 1.3.5 ב-WCAG 2.1.
• גודל גופן בשדות של 16 פיקסלים לפחות, כדי שאייפון לא יגדיל את הדף.

CAPTCHA ומגבלות זמן

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

אם יש ניתוק אחרי זמן, הציגו אזהרה לפני שהוא קורה ואפשרו להאריך (2.2.1).