טפסים נגישים מאפשרים לכל המשתמשים למלא פרטים ולהשלים תהליכים בצורה עצמאית ונוחה, וזה בדיוק מה שההנחיות של WCAG 2.2 שואפות לקדם. כשהטופס בנוי נכון, הוא לא רק עומד בתקן, אלא גם משפר את החוויה עבור כולם, עם שדות ברורים, הנחיות מדויקות וחיווי נגיש בכל שלב.
שמירה על קונטרסט
לטקסטים בטפסים נדרש קונטרסט של לפחות 4.5:1 מול הרקע. בורדרים של שדות או חיוויים גרפיים צריכים לעמוד בקונטרסט של לפחות 3:1. זה מבטיח שהטופס יהיה קריא ושמיש גם בתנאי תאורה לא אידיאליים וגם עבור מי שרואה פחות טוב.
WCAG 2.2 סעיף 1.4.3 – Contrast (Minimum) (רמת AA)
יחסי קונטרסט מינימליים בשדות: טקסטים ביחס של 4.5:1 וגבולות שדות ביחס של 3:1 לפחות
לייבל ברור לכל שדה
placeholder (הטקסט בתוך השדה) לא מחליף label. הוא נעלם כשהמשתמש מתחיל להקליד ולא תמיד נגיש לקוראי מסך. לכל שדה צריך להיות לייבל ברור ונגיש, שמסביר מה מצופה מהמשתמש, גם עבור משתמשים עם טכנולוגיות מסייעות וגם למי שחוזר לשדה כדי לתקן.
WCAG 2.2 סעיף 3.3.2 – Labels or Instructions (רמת AA)
לייבל גלוי וברור עדיף על placeholder בלבד
הגדרה נכונה של סוגי שדות
לכל שדה בטופס כדאי להגדיר את סוג הקלט שלו בצורה מפורשת, לדוגמה שדה מספרי, דוא"ל או טלפון. ההגדרה הזו משפיעה לא רק על התנהגות הטופס, אלא גם על הנגישות. היא מאפשרת לקוראי מסך לזהות את סוג השדה בצורה מדויקת, מפעילה מקלדות מסך מותאמות ועוזרת למשתמש להבין מה מצופה ממנו גם בלי רמזים ויזואליים.
WCAG 2.2 סעיף 1.3.5 – Identify Input Purpose (רמת AA) WCAG 2.2 סעיף 4.1.2 – Name, Role, Value (רמת A)
שימוש נכון בסוג שדה (input type) עוזר למשתמשים, מקלדות מסך וקוראי מסך להבין מה נדרש
מעבר תקין בין שדות ומצב פוקוס ברור
משתמשים רבים מסתמכים על ניווט במקלדת כדי לעבור בין שדות בטופס. חשוב לוודא שבכל שלב לאלמנטים האינטרקטיבים בטופס יש חיווי פוקוס ברור. לפי WCAG, אלמנט בפוקוס צריך להיות מוקף בטבעת (outline) בעובי של לפחות 2 פיקסלים, עם קונטרסט של 3:1 מול הרקע. בנוסף, חשוב לוודא שסדר המעבר (tab order) הגיוני ועוקב אחרי מבנה הטופס: מלמעלה למטה ומשמאל לימין.
WCAG 2.2 סעיף 2.4.3 – Focus Order (רמת A) WCAG 2.2 סעיף 2.4.7 – Focus Visible (רמת AA)
חיווי פוקוס תקני לשדה: לפחות 2 פיקסלים בעובי ו-3:1 קונטרסט מול הרקע
הנחיות ברורות לפני המילוי
משתמשים עם לקויות קוגניטיביות או כאלה שמסתמכים על קוראי מסך צריכים לדעת מראש מה הדרישות בכל שדה. הצגת כללים (כמו למשל פורמט תאריך או דרישות בסיסמה) רק אחרי שמתרחשת שגיאה או בתוך טולטיפ, עלולה למנוע מהם למלא את הטופס. לפי WCAG, חשוב לספק תוויות או הוראות ברורות לפני הקלט.
WCAG 2.2 סעיף 3.3.2 – Labels or Instructions (רמת AA)
הפחתת שימוש בשדות או כפתורים לא פעילים (disabled)
כפתורים במצב disabled לא מקבלים חיווי פוקוס באמצעות מקלדת ולעיתים גם לא מזוהים על ידי קוראי מסך. כשאפשר, עדיף לאפשר לחיצה ולהציג חיווי שמסביר מה חסר. אם בכל זאת יש צורך בכפתור או שדה לא פעיל, חשוב שהוא יהיה מובחן ויזואלית ורצוי להוסיף הסבר בסמוך שמבהיר למה הוא אינו זמין כרגע.
WCAG 2.2 סעיף 2.1.1 – Keyboard (רמת A) WCAG 2.2 סעיף 2.4.3 – Focus Order (רמת A) WCAG 2.2 סעיף 4.1.2 – Name, Role, Value (רמת A)
השוואה בין טופס תקני עם כפתור זמין לבין טופס עם כפתור לא פעיל ללא הסבר
חיווי על שגיאות – לא רק צבע
שדות שגויים צריכים לכלול יותר מסימון בצבע. יש להוסיף טקסט שמסביר מה הבעיה ורצוי גם אייקון מתאים. זה חיוני עבור משתמשים עם עיוורון צבעים או מגבלות ראייה ועוזר לזהות בעיות במבט מהיר.
WCAG 2.2 סעיף 1.4.1 – Use of Color (רמת A) WCAG 2.2 סעיף 3.3.1 – Error Identification (רמת A)
הודעות שגיאה עם הסבר מה לתקן
כשמתרחשת שגיאה, חשוב לא רק להצביע עליה, אלא גם לעזור למשתמש להבין איך אפשר לתקן. לדוגמה, אם שדה חובה נותר ריק, אפשר להציג הודעה כמו "נא למלא את שדה כתובת המייל" במקום נוסח כללי ולא ברור. ניסוחים ברורים מסייעים במיוחד למשתמשים עם לקויות קוגניטיביות או שפתיות ומאפשרים להם להמשיך בתהליך בצורה עצמאית.
WCAG 2.2 סעיף 3.3.3 – Error Suggestion (רמת AA)
שדה עם שגיאה – שימוש נכון בצבע, אייקון וטקסט שמסביר מה לתקן
איך ניגשים לנגישות של טפסים בתוך הדיזיין סיסטם?
המאפיינים שקשורים לנגישות בטפסים מתחלקים בין שכבות שונות בדיזיין סיסטם. חלקם מוגדרים ברמת היסודות והאטומים ואחרים מיושמים בפאטרנים ובקומפוננטות מורכבות יותר.
מה להגדיר ברמת היסודות והאטומים
צבעים – טוקנים עם קונטרסט תקני בין טקסט לרקע ובין גבולות שדות לרקע.
מצב פוקוס – סטיילינג עקבי וברור של מצב פוקוס בכל קומפוננטה אינטראקטיבית.
label בתוך קומפוננטות קלט – הקפדה על כך שכל רכיב, כמו שדה טקסט, מגיע מובנה עם label נגיש.
סטייטים של שגיאה – קומפוננטות שכוללות את הווריאציה של מצב שגיאה, כולל אייקון וטקסט נלווה.
שדות וכפתורים לא פעילים (disabled) – מראה עקבי, קונטרסט סביר והמלצה למיקום טקסט מסביר בסמוך.
מה להגדיר ברמת הפאטרנים והקומפוננטות המורכבות
סדר שדות בטופס – תכנון tab order נכון בין השדות לפי סדר קריא והגיוני.
הצגת הנחיות לפני המילוי – הנחיות ברורות מוצגות תמיד כחלק מהטמפלט של שדה, לא מוסתרות בטולטיפ או מופיעות רק לאחר שגיאה.
הודעות שגיאה עם הסבר – הנחיות תוכן לשימוש חוזר כדי לספק הסבר מה לתקן ולא רק לציין שיש שגיאה.
מהניסיון שצברנו 