טופס הוא רכיב שמאפשר למשתמש להזין נתונים לשדה או לקבוצת שדות. הטפסים יכולים להיות פשוטים כמו שדה יחיד או מורכבים כמו רכיב טופס עם מספר שלבים, עם מספר שדות בכל דף, אימות קלט ולפעמים גם CAPTCHA.
כשמדובר בטפסים, הם נחשבים לאחד מהאלמנטים שהכי קשה לתרגל בצורה נכונה מבחינת הנגישות, כי הם דורשים ידע לגבי כל הרכיבים שכבר הסברנו, וגם כללים נוספים שספציפיים רק לטפסים. עם קצת הבנה וזמן, תוכלו ליצור טופס נגיש שיתאים לכם ולמשתמשים שלכם.
Forms הוא המודול האחרון הספציפי לרכיב בקורס הזה. המודול הזה יתמקד בהנחיות הספציפיות לטופס, אבל כל ההנחיות האחרות שלמדתם עליהן במודולים הקודמים, כמו מבנה התוכן, מיקוד המקלדת וניגודיות הצבעים, חלות גם על רכיבי הצורה.
שדות
עמוד השדרה של טפסים הוא שדות. שדות הם תבניות אינטראקטיביות קטנות, כמו רכיב קלט או לחצן בחירה, שמאפשרים למשתמשים להזין תוכן או לבחור אפשרות. יש מגוון רחב של שדות טפסים לבחירה.
המלצת ברירת המחדל היא להשתמש בתבניות HTML קיימות במקום לבנות משהו בהתאמה אישית באמצעות ARIA, כי תכונות ופונקציות מסוימות, כמו מצבי שדות, מאפיינים וערכים מסוימים, מובנות ברכיבי ה-HTML, וצריך להוסיף ARIA בהתאמה אישית באופן ידני.
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
HTML
<form id="sundae-order-form"> <!-- form content --> </form>
בנוסף לבחירת הדפוסים הנגישים ביותר של שדות טפסים, כאשר זה רלוונטי, כדאי להוסיף לשדות גם מאפייני השלמה אוטומטית של HTML. הוספת מאפיינים של השלמה אוטומטית מאפשרת הגדרה או זיהוי מדויקים יותר של המטרה לסוכני המשתמש ולטכנולוגיות מסייעות (AT).
מאפייני ההשלמה האוטומטית מאפשרים למשתמשים להתאים אישית מצגות חזותיות, למשל הצגת סמל של עוגת יום הולדת בשדה עם מאפיין ההשלמה האוטומטית של יום ההולדת (bday). באופן כללי, בעזרת מאפיינים של השלמה אוטומטית קל ומהיר יותר. האפשרות הזו שימושית במיוחד לאנשים שסובלים מהפרעות קוגניטיביות והפרעות קריאה, ואנשים שמשתמשים ב-AT, כמו קוראי מסך.
<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>
לבסוף, בשדות הטופס לא יכולים לחול שינויים לפי הקשר כשהם מקבלים התמקדות או קלט של משתמשים, אלא אם המשתמש קיבל אזהרה לגבי ההתנהגות לפני השימוש ברכיב. לדוגמה, אסור לשלוח טופס באופן אוטומטי כשהמיקוד בשדה מסוים או כשמשתמש מוסיף תוכן לשדה.
Labels (תוויות)
בעזרת תוויות אפשר ליידע את המשתמשים לגבי מטרת השדה אם הוא נדרש, וגם לספק מידע על הדרישות לשדה, כמו הפורמט של הקלט. התוויות צריכות להיות גלויות תמיד, ולתאר למשתמשים בצורה מדויקת את שדה הטופס.
אחד מהעקרונות הבסיסיים של טפסים נגישים הוא יצירת חיבור ברור ומדויק בין שדה לבין התווית שלו. זה נכון גם מבחינה חזותית וגם גם מבחינה פרוגרמטית. בלי ההקשר, יכול להיות שהמשתמשים לא יבינו איך למלא את השדות בטופס.
<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>
בנוסף, צריך לקבץ שדות קשורים בטפסים, כמו כתובת למשלוח דואר, ולקבץ אותם באופן פרוגרמטי. אחת השיטות היא להשתמש בתבנית של קבוצת השדות/מקרא כדי לקבץ רכיבים דומים.
תיאורים
תיאורי השדות דומים לתוויות למטרה בכך שהם משמשים כדי לתת הקשר נוסף לגבי השדה והדרישות. תיאורי השדות לא נחוצים לנגישות אם התוויות או ההוראות בטופס תיאוריות מספיק.
עם זאת, יש מצבים שבהם כדאי להוסיף מידע כדי למנוע שגיאות טופס, כמו העברת מידע לגבי האורך המינימלי של קלט לשדה סיסמה או הצגת פורמט היומן שבו צריך להשתמש (למשל MM-DD-YYYY).
יש הרבה שיטות שונות שאפשר להשתמש בהן כדי להוסיף תיאורי שדות לטפסים. אחת השיטות הטובות ביותר היא להוסיף מאפיין aria-describedby לרכיב הטופס, בנוסף לרכיב <label>. קורא המסך יקרא גם את התיאור וגם את התווית.
אם מוסיפים את המאפיין aria-labelledby לרכיב, ערך המאפיין מבטל את הטקסט בתוך השדה <label>. כמו תמיד, הקפידו לבדוק את הקוד הסופי עם כל מעבדי ה-AT שבהם אתם מתכוונים לתמוך.
שגיאות
כשיוצרים טפסים נגישים, יש הרבה דברים שאפשר לעשות כדי למנוע מהמשתמשים שגיאות בטפסים. מוקדם יותר במודול הזה הסברנו בצורה ברורה שדות סימון, יצירת תוויות מזהות ותיאורים מפורטים ככל האפשר. אבל לא משנה עד כמה ברור לכם הטופס, בסופו של דבר המשתמש יטעות.
כשמשתמש נתקל בשגיאה בטופס, השלב הראשון הוא להודיע על השגיאה. השדה שבו אירעה השגיאה צריך להיות מזוהה בבירור, והשגיאה עצמה צריכה להיות מוצגת למשתמש בטקסט.
יש שיטות שונות להצגת הודעות שגיאה, למשל:
- חלון קופץ בתוך השורה, סמוך למקום שבו אירעה השגיאה
- אוסף של שגיאות מקובצות בהודעה אחת גדולה יותר בראש הדף
חשוב לשים לב למיקוד המקלדת ולאפשרויות של האזור הפעיל של ARIA כשמכריזים על שגיאות.
כשאפשר, כדאי להציע למשתמש הצעה מפורטת לתיקון השגיאה. קיימים שני מאפיינים זמינים לשליחת הודעה למשתמשים על שגיאות.
- אפשר להשתמש במאפיין ה-HTML חובה. הדפדפן יספק הודעת שגיאה כללית על סמך הפרמטרים שהוגדרו לאימות.
- לחלופין, אפשר להשתמש במאפיין aria-required (חובה) כדי לשתף הודעת שגיאה מותאמת אישית עם דפי AT. רק ספקי AT יקבלו את ההודעה, אלא אם יתווסף קוד שיהפוך את ההודעה לגלויה לכל המשתמשים.
אחרי שהמשתמש חושב שכל השגיאות נפתרו, אפשרו לו לשלוח מחדש את הטופס ולשלוח משוב על תוצאות השליחה. הודעת שגיאה מציינת שהמשתמשים צריכים לבצע עדכונים נוספים, והודעת הצלחה מאשרת שהם תיקנו את כל השגיאות ושלחו את הטופס בהצלחה.
בדיקת ההבנה
בחינת הידע שלכם לגבי טפסים נגישים
איזו מהתשובות שבהמשך היא הקלט הנגי ביותר ביותר בטופס?
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>