טופס הוא רכיב שמאפשר למשתמש לספק נתונים בשדה או בקבוצה של שדות. טפסים יכולים להיות פשוטים כמו שדה יחיד או מורכבים כמו רכיב טופס בן כמה שלבים עם כמה שדות בכל דף, אימות קלט ולפעמים גם בדיקת 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 כדי לקבץ רכיבים דומים.
תיאורים
מטרת התיאורים של השדות דומה למטרת התוויות, כי הם משמשים להוספת הקשר לשדה ולדרישות. תיאורי שדות לא נדרשים לשמירה על נגישות אם התוויות או ההוראות בטופס מספיקות לתיאור.
עם זאת, יש מצבים שבהם כדאי להוסיף מידע נוסף כדי למנוע שגיאות בטופס. למשל, להעביר מידע על האורך המינימלי של הקלט בשדה הסיסמה או להודיע למשתמש באיזה פורמט קלנדרי להשתמש (למשל, YYYY-MM-DD).
יש הרבה שיטות שונות להוספת תיאורי שדות לטופס. אחת מהשיטות הטובות ביותר היא להוסיף את המאפיין aria-describedby לאלמנט הטופס, בנוסף לאלמנט <label>. קורא המסך יקרא גם את התיאור וגם את התווית.
אם מוסיפים את המאפיין aria-labelledby לרכיב, ערך המאפיין מבטל את הטקסט ב-<label>. כמו תמיד, חשוב לבדוק את הקוד הסופי בכל אמצעי התקשורת שאתם מתכננים לתמוך בהם.
שגיאות
כשאתם יוצרים טפסים נגישים, יש הרבה דברים שאתם יכולים לעשות כדי למנוע ממשתמשים לבצע שגיאות בטופס. מוקדם יותר במודול הזה, דיברנו על סימון שדות בבירור, יצירת תוויות מזהות והוספת תיאורים מפורטים כשהדבר אפשרי. אבל לא משנה כמה ברור לדעתכם שהטופס שלכם, בסופו של דבר משתמש יעשה טעות.
כשמשתמש נתקל בשגיאה בטופס, השלב הראשון הוא להודיע על השגיאה. צריך לציין בבירור את השדה שבו אירעה השגיאה, ולתאר את השגיאה עצמה למשתמש בטקסט.
יש כמה שיטות להצגת הודעות שגיאה, למשל:
- חלון קופץ, בתוך הדף, ליד המיקום שבו אירעה השגיאה
- אוסף של שגיאות שמקובצות בהודעה אחת גדולה יותר בחלק העליון של הדף
חשוב לשים לב למיקוד המקלדת ולאפשרויות של אזור פעיל ב-ARIA כשמקריאים שגיאות.
כשהדבר אפשרי, כדאי להציע למשתמש הצעה מפורטת לפתרון השגיאה. יש שני מאפיינים שאפשר להשתמש בהם כדי להודיע למשתמשים על שגיאות.
- אפשר להשתמש במאפיין ה-HTML required. הדפדפן יציג הודעת שגיאה כללית על סמך הפרמטרים של אימות הבקשה.
- לחלופין, אפשר להשתמש במאפיין aria-required כדי לשתף הודעת שגיאה בהתאמה אישית עם כלי העזר. רק משתמשים עם הרשאת אדמין יקבלו את ההודעה, אלא אם תוסיפו קוד נוסף כדי שההודעה תהיה גלויה לכל המשתמשים.
אחרי שהמשתמש יסיים לתקן את כל השגיאות, אפשר לאפשר לו לשלוח מחדש את הטופס ולספק משוב על התוצאות של השליחה. הודעה על שגיאה תודיע למשתמש שיש עדכונים נוספים שהוא צריך לבצע, ואילו הודעה על הצלחה תאשר לו שהוא פתר את כל השגיאות ושלח את הטופס בהצלחה.
קריטריונים נוספים להצלחה
בגרסה 2.2 של WCAG הוגדרו הקריטריונים הבאים להצלחה, שמתמקדים בחוויית שימוש נגישה יותר בטפסים:
בדיקת ההבנה
בודקים את הידע שלכם בנושא טפסים נגישים
איזו מהאפשרויות הבאות היא האפשרות הכי נגישה להזנת טופס?
Email address: <input type="email" required><label>Email address: <input type="email" required></label><label>Email address: <input type="email" required autocomplete="email"></label><label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>