הנגשת טפסים מקוונים פירושה שכל אחד יכול למלא את הטופס ולשלוח אותו, גם במקלדת בלבד וגם עם תוכנה להקראת מסך. לכל שדה יש תווית גלויה שמחוברת אליו בקוד. קבוצות של אפשרויות מקבלות כותרת. שגיאות מוסברות במילים, ליד השדה. ושום דבר לא קורה בהפתעה: אין שליחה אוטומטית ואין מעבר עמוד בלי שהמשתמש ביקש.
טופס הוא המקום שבו האתר פוגש את העסק: פנייה, הרשמה, רכישה, תביעת ביטוח. ובבדיקות שאני עושה, הטפסים הם גם המקום שבו אני מוצא הכי הרבה ליקויים לכל סנטימטר מסך. החדשות הטובות: רוב התיקונים פשוטים, וחוזרים על עצמם בכל טופס.
למה דווקא טפסים?
כי מי שלא מצליח למלא טופס לא מקבל את השירות. הוא לא יכול לקבוע תור, להגיש בקשה או לקנות. חברות ביטוח, בנקים ורשויות מחליפים טפסי נייר בטפסים מקוונים, וזה מצוין, בתנאי שהטופס המקוון נגיש. אחרת, החלפתם מחסום אחד במחסום אחר.
7 הכללים לטופס נגיש
- תווית לכל שדה. טקסט גלוי ליד השדה, מחובר אליו ב-label עם for ו-id. placeholder לבד הוא לא תווית: הוא נעלם ברגע שמתחילים להקליד.
- כותרת לכל קבוצה. כפתורי רדיו ותיבות סימון שייכים לשאלה אחת. עוטפים אותם ב-fieldset עם legend, כדי שהשאלה תוקרא יחד עם האפשרויות.
- סימון שדות חובה במילים. כוכבית לבד לא מספיקה. כתבו "שדה חובה", או הסבירו בתחילת הטופס מה הכוכבית אומרת.
- שגיאות במילים, ליד השדה. צבע אדום הוא לא הודעת שגיאה. כתבו מה חסר ואיך לתקן, וחברו את ההודעה לשדה (למשל ב-aria-describedby).
- מקלדת מההתחלה ועד הסוף. סדר Tab הגיוני, סימון פוקוס ברור, ואפשרות לבחור ולבטל כל אפשרות בלי עכבר.
- בלי הפתעות. רשימת בחירה (select) לא שולחת את הטופס ולא מעבירה עמוד ברגע שבוחרים בה. משאירים כפתור שליחה.
- אל תאפסו בטעות. כפתור "נקה טופס" בטופס ארוך הוא מלכודת. אם הוא חייב להיות, בקשו אישור לפני שמוחקים.
רכיב, דרישה, וכשל נפוץ
| רכיב | מה צריך | מה אני רואה בבדיקות |
|---|---|---|
| שדה טקסט | label גלוי ומחובר | placeholder בתור התווית היחידה |
| רדיו ותיבות סימון | fieldset ו-legend | האפשרויות מוקראות בלי השאלה |
| select ארוך | optgroup עם label לקבוצות, כפתור שליחה | בחירה ששולחת את הטופס מיד |
| תקנון או אישור תנאים | תיבת סימון עם תווית, וקישור לתקנון שמקבל פוקוס | קישור שלא מגיעים אליו במקלדת |
| טופס של כמה שלבים | "שלב 2 מתוך 4", כותרת לכל שלב, חזרה בלי לאבד מידע | אין דרך לדעת איפה נמצאים |
| הודעת הצלחה | הודעה שמוקראת או שהפוקוס עובר אליה | הודעה שמופיעה רק חזותית |
רוצים שנבדוק את הטפסים באתר?
נבדוק כל טופס במקלדת ועם תוכנה להקראת מסך, ונמסור רשימת תיקונים מדויקת.
תכננו את הטופס לפני שבונים אותו
הרבה בעיות נפתרות עוד לפני הקוד. כמה שאלות שאני שואל לקוחות:
- איזה מידע אתם באמת צריכים? כל שדה מיותר הוא עוד מקום לטעות.
- איזה סוג שדה מתאים לכל מידע? שדה טקסט, רדיו, תיבת סימון, רשימה.
- מה הפורמט? בשדה טלפון, למשל, הסבירו מראש איך להקליד, במקום לדחות את מה שהוקלד.
בסרטון הקצר הזה אני מראה איך מוסיפים שדות נגישים לטופס במערכת לטפסים מקוונים:
טופס עם חתימה דיגיטלית
הרבה טפסים מסתיימים בחתימה. חתימה שמציירים עם העכבר או האצבע חוסמת את מי שמשתמש במקלדת בלבד, וצריך לתת דרך אחרת לחתום. כתבתי על זה בנפרד במאמר על חתימה דיגיטלית נגישה.
ומה אם הטופס מגיע ממערכת חיצונית?
הרבה עסקים משתמשים במערכת חיצונית ליצירת טפסים. מבחינת המשתמש, זה הטופס שלכם, וההנגשה היא אחריות שלכם. לכן, לפני שבוחרים מערכת, בקשו מהספק התחייבות בכתב שהמערכת וכל טופס שנבנה בה נגישים לפי התקן. ואז תבדקו טופס אחד בעצמכם, במקלדת בלבד. עשר דקות, ותדעו הרבה.
גם תוסף נגישות לא יעזור כאן. הוא לא מחבר תוויות לשדות, לא מנהל פוקוס ולא כותב הודעות שגיאה. את זה מתקנים בטופס עצמו. אם האתר שלכם צריך תיקון כזה בכל הטפסים, זה חלק משירות הנגשת אתרים שלנו.
בדיקה מהירה לפני שמפרסמים טופס
- למלא ולשלוח את כל הטופס במקלדת בלבד.
- לשלוח את הטופס ריק ולקרוא את הודעות השגיאה: האם ברור מה לתקן?
- להגדיל את המסך ל-200% ולבדוק שהכל עדיין עובד.
- לעבור על הטופס עם תוכנה להקראת מסך, כולל הודעת התודה.
טופס שעובר את ארבע הבדיקות האלה כבר טוב יותר מרוב הטפסים שאני פוגש. ואם תרצו בדיקה מלאה, אני כאן.
שאלות נפוצות על הנגשת טפסים
מה צריך כדי שטופס יהיה נגיש?
תווית גלויה ומחוברת לכל שדה, כותרת לקבוצות אפשרויות, הודעות שגיאה במילים ליד השדה, ניווט מלא במקלדת, ואף פעולה אוטומטית שהמשתמש לא ביקש.
אפשר להשתמש ב-placeholder במקום תווית?
לא. placeholder נעלם כשמתחילים להקליד, ולא תמיד מוקרא. אפשר להשתמש בו כרמז נוסף, אבל לכל שדה צריכה להיות גם תווית.
מספיק לסמן שגיאה בצבע אדום?
לא. צריך לכתוב במילים מה השגיאה ואיך לתקן, ליד השדה, ולחבר את ההודעה לשדה כדי שתוכנה להקראת מסך תקריא אותה.
מי אחראי לנגישות של טופס ממערכת חיצונית?
מבחינת המשתמש, זה הטופס שלכם. בקשו מהספק התחייבות בכתב לנגישות, ובדקו בעצמכם לפחות טופס אחד במקלדת.
מומחה להנגשת אתרי אינטרנט וקצין הגנת פרטיות מוסמך (DPO). מעל 9 שנות ניסיון בליווי ארגונים לעמידה בתקנות הנגישות, ת"י 5568 ובחוק הגנת הפרטיות.
חושבים שהאתר שלכם חשוף?
אל תישארו עם התחושה. שלחו כתובת אתר ונחזור אליכם עם תמונת מצב ראשונית, בלי התחייבות.