תוויות בטפסים בוורדפרס: למה label חיוני ולא placeholder

שדה <input>, <select> או <textarea> ללא <label> מקושר הוא חידה. הקורא מסך משמיע "edit text" או "combo box" - ללא רמז למה השדה מבקש. גם תוסף ההשלמה של הדפדפן לא יודע מה להציע.

למה זה משנה

זוהי דרישה מפורשת ב-תקני נגישות בינלאומיים רמה A, תקן 3.3.2 Labels or Instructions. עיוור שמגיע לטופס יצירת קשר עם NVDA או VoiceOver שומע: "שם פרטי, ערוך טקסט" - ויודע מה למלא. בלי label - הוא שומע "ערוך טקסט" וזהו. אם בטופס יש 5 שדות, הוא שומע "ערוך טקסט" 5 פעמים בלי לדעת איזה שייך למה. תופעה דומה: placeholder נראה לסיינטד כמו label, אבל ברגע שהמשתמש מתחיל להקליד הוא נעלם - והמשתמש נשאר בלי תזכורת מה ביקשו ממנו.

מעבר לנגישות, label תקין מאפשר השלמה אוטומטית של דפדפנים. <label for="email">Email</label><input id="email" type="email" autocomplete="email"> מאפשר ל-Chrome להציע את כתובת המייל ששמרת. בלי קישור, autocomplete לא עובד או מציע את הערכים השגויים. גם UX-wise: לחיצה על label ממקדת את ה-input - חוויה מהירה יותר במובייל.

איך לזהות

הרץ WAVE או axe DevTools על דפים עם טפסים - הם מסמנים "missing form label". ידנית: View Source > חפש <input בלי id או בלי <label for="..."> מקושר. RankPlus סורק את ה-DOM של דפי טפסים ובודק קיום קישור.

איך לתקן

1. לכל שדה קיים, ודא שיש id ייחודי וש-<label> מקושר עם for:

   <label for="contact-email">כתובת מייל</label>
   <input id="contact-email" type="email" name="email" required>

2. חלופה: <label>כתובת מייל <input type="email"></label> - גם תקני אבל פחות גמיש.
3. אם אתה חייב להסתיר את ה-label ויזואלית (חיפוש בתפריט, למשל), השתמש ב-CSS למסתיר נגיש (לא display:none!):

   .visually-hidden {
       position: absolute;
       width: 1px; height: 1px;
       padding: 0; margin: -1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       border: 0;
   }

   וב-HTML: <label for="search" class="visually-hidden">חפש</label>.
4. חלופה ל-label מוסתר: aria-label="חפש" ישירות על ה-input. עובד טוב, אבל אם אפשר label אמיתי - עדיף.
5. בתוסף טפסים פופולרי (Contact Form 7, Gravity Forms, Forminator, WPForms): בדוק את ההגדרה "Show Labels" או "Display Field Labels" - לעיתים מסירים מסיבות עיצוביות. הפעל מחדש.
6. הוסף autocomplete מתאים: email, tel, name, street-address. הם מתועדים ב-MDN ועוזרים גם ל-UX וגם לאוטומציה.
7. הרץ NVDA/VoiceOver עם הטופס: לחיצת Tab על שדה אמורה להשמיע "שם פרטי, ערוך טקסט" ולא "ערוך טקסט".

טעויות נפוצות

• placeholder במקום label: "הקלד את שמך כאן" כפלייסהולדר נעלם ברגע שמתחילים להקליד. השאר label.
• label בלי for: <label>Email</label><input> - לא מקושר, לא נגיש.
• שני שדות עם אותו id: HTML לא תקני, label יקושר רק לראשון. השתמש ב-id ייחודי כמו contact-email.
• display:none על label: גם הקורא מסך לא רואה אותו. השתמש ב-visually-hidden.
• תווית ללא הוראת required ברורה: "שדה חובה" צריך להיות חלק מ-label או ב-aria-required. כוכבית * אדומה לבדה לא מספיקה.

בדיקה לאחר תיקון

פתח NVDA/VoiceOver, גש לטופס, לחץ Tab. כל שדה אמור להישמע עם תיאור: "שם פרטי, ערוך טקסט, חובה". הרץ axe DevTools - הקטגוריה Forms אמורה להיות נקייה. RankPlus יחזור לירוק.