טופס הוא רכיב שמאפשר למשתמש לספק נתונים בשדה או בקבוצה של שדות. טפסים יכולים להיות שדה יחיד או טופס מורכב עם כמה שלבים, כמה שדות בכל דף, אימות קלט ו-CAPTCHA.
טפסים נחשבים לאחד הרכיבים שהכי קשה להנגיש, כי צריך להכיר את כל הרכיבים שכבר הזכרנו, וגם כללים נוספים שספציפיים רק לטפסים. בעזרת קצת ידע וזמן, תוכלו ליצור טופס נגיש שמתאים לכם ולמשתמשים שלכם.
המודול בנושא טפסים הוא המודול האחרון בקורס הזה שמתמקד ברכיב ספציפי. המודול הזה מתמקד בהנחיות ספציפיות לטפסים, אבל ההנחיות הקודמות שמופיעות במודולים קודמים, כמו מבנה התוכן, התמקדות במקלדת וניגודיות הצבעים, רלוונטיות גם לרכיבי טפסים.
שדות
הבסיס של טפסים הוא שדות. שדות הם דפוסים אינטראקטיביים קטנים, כמו רכיב של קלט או לחצן רדיו, שמאפשרים למשתמשים להזין תוכן או לבחור אפשרות. יש מגוון רחב של שדות טופס שאפשר לבחור מתוכם.
ההמלצה שמוגדרת כברירת מחדל היא להשתמש בתבניות HTML קיימות במקום ליצור משהו מותאם אישית באמצעות ARIA, כי תכונות ופונקציות מסוימות – כמו מצבי שדה, מאפיינים וערכים – מובְנות ברכיבי ה-HTML. בשדות מותאמים אישית צריך להוסיף את ה-ARIA באופן ידני.
לא מומלץ – HTML מותאם אישית עם ARIA
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
מומלץ – HTML רגיל
<form id="sundae-order-form">
<!-- form content -->
</form>
בנוסף לבחירת דפוסי שדות טופס שהגישה אליהם היא הכי קלה, כדאי גם להוסיף מאפייני השלמה אוטומטית של HTML לשדות, איפה שרלוונטי. הוספה של מאפייני השלמה אוטומטית מאפשרת הגדרה או זיהוי מדויקים יותר של המטרה לסוכני משתמש ולטכנולוגיות מסייעות (AT).
מאפייני ההשלמה האוטומטית מאפשרים למשתמשים להתאים אישית את התצוגה החזותית,
למשל להציג סמל של עוגת יום הולדת בשדה עם מאפיין ההשלמה האוטומטית של יום ההולדת (bday) שמוקצה לו. באופן כללי יותר, מאפייני ההשלמה האוטומטית מקלים ומזרזים את מילוי הטפסים. האפשרות הזו שימושית במיוחד לאנשים עם הפרעות קוגניטיביות והפרעות קריאה, ולאנשים שמשתמשים בטכנולוגיות מסייעות, כמו קוראי מסך.
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
בנוסף, שדות בטופס לא צריכים ליצור שינויים לפי הקשר כשהם מקבלים מיקוד או קלט של משתמשים, אלא אם המשתמש קיבל אזהרה לגבי ההתנהגות לפני השימוש ברכיב. לדוגמה, אסור לשלוח טופס באופן אוטומטי כששדה מקבל מיקוד או אחרי שמשתמש מוסיף תוכן לשדה.
תוויות
התוויות מספקות למשתמש מידע על מטרת השדה, אם השדה הוא שדה חובה, ויכולות גם לספק מידע על הדרישות של השדה, כמו פורמט הקלט. התוויות צריכות להיות גלויות תמיד ולתאר למשתמשים בצורה מדויקת את השדה בטופס.
אחד מעקרונות היסוד של טפסים נגישים הוא יצירת קשר ברור ומדויק בין שדה לבין התווית שלו. הדבר נכון גם מבחינה חזותית וגם מבחינה פרוגרמטית. בלי ההקשר הזה, יכול להיות שהמשתמש לא יבין איך למלא את השדות בטופס.
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
בנוסף, צריך לקבץ באופן תוכניתי וחזותי שדות קשורים בטופס, כמו כתובת למשלוח דואר. שיטה אחת היא להשתמש בתבנית fieldset ו-legend כדי לקבץ רכיבים דומים.
תיאורים
תיאורי השדות דומים לתוויות במטרה שלהם, כי הם משמשים כדי לספק יותר הקשר לשדה ולדרישות. תיאורי שדות לא נדרשים לצורך נגישות אם התוויות או ההוראות בטופס מספיק תיאוריות.
עם זאת, יש מצבים שבהם כדאי להוסיף מידע נוסף כדי למנוע שגיאות בטופס, למשל, להעביר מידע על האורך המינימלי של קלט בשדה סיסמה או להסביר למשתמש באיזה פורמט תאריך להשתמש (למשל, DD-MM-YYYY).
יש הרבה שיטות שונות להוספת תיאורי שדות לטפסים. אחת מהשיטות הטובות ביותר היא להוסיף מאפיין aria-describedby לאלמנט של הטופס, בנוסף לאלמנט <label>. קורא המסך יקריא גם את התיאור וגם את התווית.
אם מוסיפים את המאפיין aria-labelledby לרכיב, ערך המאפיין מבטל את הטקסט בתוך התג <label>. כמו תמיד, חשוב לבדוק את הקוד הסופי עם כל הטכנולוגיות המסייעות שאתם רוצים לתמוך בהן.
שגיאות
כשיוצרים טפסים נגישים, יש הרבה דברים שאפשר לעשות כדי למנוע ממשתמשים לעשות טעויות בטופס. מוקדם יותר במודול הזה, הסברנו איך לסמן בבירור שדות, ליצור תוויות מזהות ולהוסיף תיאורים מפורטים כשזה אפשרי. אבל לא משנה כמה ברור הטופס שלכם, בסופו של דבר, משתמש יעשה טעות.
כשהמשתמש נתקל בשגיאה בטופס, השלב הראשון הוא לעדכן אותו לגבי השגיאה. צריך לציין בבירור את השדה שבו התרחשה השגיאה, ולתאר את השגיאה עצמה למשתמש בטקסט.
יש שיטות שונות להצגת הודעות שגיאה, למשל:
- חלון קופץ, מוטבע במיקום שבו אירעה השגיאה
- אוסף של שגיאות שמקובצות בהודעה גדולה אחת בחלק העליון של הדף
חשוב לשים לב למיקוד במקלדת ולאפשרויות של אזור פעיל ב-ARIA כשמכריזים על שגיאות.
במידת האפשר, כדאי להציע למשתמש הצעה מפורטת לפתרון השגיאה. יש שני מאפיינים שזמינים כדי להודיע למשתמשים על שגיאות.
- אפשר להשתמש במאפיין required של HTML. הדפדפן מספק הודעת שגיאה כללית על סמך פרמטרי האימות של הקובץ.
- אפשר גם להשתמש במאפיין aria-required כדי לשתף הודעת שגיאה בהתאמה אישית עם טכנולוגיות מסייעות. רק טכנולוגיות מסייעות מקבלות את ההודעה הזו, אלא אם מוסיפים קוד כדי שההודעה תהיה גלויה לכל המשתמשים.
אחרי שהמשתמש חושב שכל השגיאות נפתרו, מאפשרים לו לשלוח מחדש את הטופס ולספק משוב על תוצאות השליחה. הודעת שגיאה מודיעה למשתמש שיש לו עוד עדכונים לבצע, והודעת הצלחה מאשרת שהוא פתר את כל השגיאות ושלח את הטופס בהצלחה.
קריטריונים נוספים להצלחה
ב-WCAG 2.2 הוצגו הקריטריונים הבאים להצלחה, שמתמקדים בשיפור הנגישות של טפסים: