→ חזרה לבלוג

נגישות טפסים באתר אינטרנט - מדריך מעשי למפתחים

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

תוויות (Labels) - הבסיס של כל טופס נגיש

הדבר הראשון והחשוב ביותר בנגישות טפסים הוא תוויות מקושרות כראוי. כל שדה קלט חייב להיות מקושר לתווית שמתארת מה צריך להזין בו. הדרך הנכונה ביותר היא שימוש באלמנט <label> עם מאפיין for שמתאים ל-id של השדה.

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

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

קיבוץ שדות עם Fieldset ו-Legend

כשיש קבוצת שדות קשורים - למשל כתובת (רחוב, עיר, מיקוד), או בחירה מתוך קבוצת כפתורי רדיו - יש לקבץ אותם באמצעות <fieldset> ולתת לקבוצה כותרת באמצעות <legend>.

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

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

סימון שדות חובה בצורה נגישה

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

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

הודעות שגיאה נגישות

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

כללים להודעות שגיאה נגישות:

1. הציגו סיכום שגיאות בראש הטופס: לאחר שליחת טופס כושלת, הציגו רשימת שגיאות בראש הטופס עם קישורים לכל שדה בעייתי. העבירו את הפוקוס לאזור הסיכום כדי שמשתמשי קורא מסך ישמעו אותו מיד.
2. קשרו הודעות שגיאה לשדות: השתמשו ב-aria-describedby כדי לקשר כל הודעת שגיאה לשדה המתאים. כך קורא המסך יקריא את ההודעה כשהמשתמש חוזר לשדה.
3. השתמשו ב-aria-invalid="true": סמנו שדות שגויים עם מאפיין זה. קורא המסך יכריז שהשדה "לא תקין", מה שמבהיר למשתמש שיש בעיה.
4. כתבו הודעות ברורות ומועילות: במקום "שגיאה בשדה", כתבו "כתובת אימייל אינה תקינה - ודאו שהכתובת מכילה @". ההודעה צריכה להיות ספציפית ולכלול הנחיה לתיקון.

ולידציה - צד לקוח לעומת צד שרת

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

ולידציה בזמן אמת (Inline Validation): בדיקת שדה ברגע שהמשתמש עוזב אותו (אירוע blur) מאפשרת תיקון מיידי. חשוב שהודעות השגיאה יופיעו ב-live region (aria-live="polite") כך שקורא המסך יכריז עליהן. יחד עם זאת, אל תבדקו בזמן ההקלדה - זה מבלבל ומציף את קורא המסך בהכרזות.

ולידציה בעת שליחה: בדיקת כל השדות בעת לחיצה על כפתור השליחה. כאמור, הציגו סיכום שגיאות בראש הטופס והעבירו פוקוס אליו. HTML5 מספק ולידציה מובנית (required, type="email", pattern) שעובדת גם ללא JavaScript, אך עם הודעות שגיאה פחות מותאמות.

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

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

Autocomplete - חיסכון בזמן ושיפור נגישות

מאפיין autocomplete של HTML הוא לא רק נוחות - הוא דרישת נגישות לפי WCAG 2.1 (קריטריון 1.3.5). מאפיין זה מאפשר לדפדפן למלא שדות אוטומטית ממידע שמור, מה שחוסך למשתמשים עם מוגבלויות קוגניטיביות או מוטוריות את המאמץ של הקלדה חוזרת.

ערכי autocomplete נפוצים שכדאי להכיר:

• name - שם מלא
• given-name - שם פרטי
• family-name - שם משפחה
• email - כתובת אימייל
• tel - מספר טלפון
• street-address - כתובת רחוב
• postal-code - מיקוד
• cc-number - מספר כרטיס אשראי

טיפים נוספים לטפסים נגישים

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

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

הנחיות לפורמט: אם שדה דורש פורמט מסוים (למשל תאריך בפורמט DD/MM/YYYY), ציינו זאת בתווית או בטקסט מקושר עם aria-describedby. אל תסתמכו על placeholder בלבד.

טפסים מרובי שלבים: אם הטופס מחולק למספר שלבים, ציינו בכל שלב את מספר השלב הנוכחי מתוך הסך הכל ("שלב 2 מתוך 4"). השתמשו ב-aria-current="step" לסימון השלב הנוכחי בסרגל ההתקדמות.

איך מנגיש עוזר לנגישות טפסים

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

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

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