טופס הוא רכיב שמאפשר למשתמש לספק נתונים בשדה או בקבוצה של שדות. טפסים יכולים להיות פשוטים כמו שדה יחיד או מורכבים כמו אלמנט מרובה-שלבים בטופס עם שדות מרובים לכל דף, אימות קלט לפעמים 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) שהוקצה לו. באופן כללי, מאפייני ההשלמה האוטומטית
למלא טפסים בקלות ובמהירות. זה מועיל במיוחד לאנשים
עם הפרעות קוגניטיביות וקריאה ואנשים שמשתמשים בהפרעות קוגניטיביות, כמו
לקוראים.
<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>
בנוסף, שדות קשורים בטופס, כמו כתובת למשלוח דואר, צריכים להיות באופן פרוגרמטי ובקיבוץ חזותי. אחת מהשיטות היא להשתמש במערך השדות/מקרא לקיבוץ רכיבים דומים.
תיאורים
תיאורי השדות דומים לתוויות מבחינת המטרה שלהם. לספק הקשר נוסף לגבי התחום והדרישות. תיאורי השדות נדרשת לנגישות אם התוויות או ההוראות בטופס תיאוריות מספיק.
עם זאת, יש מצבים שבהם כדאי להוסיף עוד מידע כדי להימנע משגיאות בטופס, כמו ממסר מידע לגבי האורך המינימלי של שהוזן בשדה סיסמה או ליידע את המשתמש באיזה פורמט יומן להשתמש (למשל כ-MM-DD-YYYY).
יש הרבה שיטות שונות שבהן אפשר להשתמש כדי להוסיף תיאורי שדות
הטפסים. אחת מהשיטות הטובות ביותר היא להוסיף
aria-describedby
לרכיב הטופס, בנוסף לרכיב <label>. במסך
קורא יקרא גם את התיאור וגם את התווית.
אם מוסיפים את
ARIA
לרכיב שלך, ערך המאפיין מבטל את הטקסט בתוך הרכיב
<label>. כמו תמיד, חשוב לבדוק את הקוד הסופי עם כל
כדי לתמוך בכם.
שגיאות
במהלך יצירת טפסים נגישים, יש פעולות רבות שאפשר לבצע כדי למנוע ממשתמשים שגיאות בטופס. מוקדם יותר ביחידה הזו דיברנו בבירור על סימון וליצור תוויות מזהות, ולהוסיף תיאורים מפורטים בכל פעם ככל האפשר. אבל לא משנה עד כמה הטופס שלכם ברור לדעתכם, בסופו של דבר טועה.
כשמשתמש נתקל בשגיאת טופס, השלב הראשון הוא להודיע על השגיאה. השדה שבו אירעה השגיאה חייב להיות מזוהה בבירור, כולל השגיאה עצמו חייב להיות מתואר בטקסט למשתמש.
יש שיטות שונות להצגת שגיאה הודעות, למשל:
- חלון קופץ בתוך השורה ליד המקום שבו אירעה השגיאה
- אוסף של שגיאות שמקובצות בהודעה אחת גדולה יותר בחלק העליון של הדף
כדאי לשים לב למיקוד המקלדת ואפשרויות של אזור פעיל ב-ARIA כשאתם מכריזים על שגיאות.
כשהדבר אפשרי, הציעו למשתמש הצעה מפורטת לפתרון הבעיה שגיאה. יש שני מאפיינים שזמינים להודיע למשתמשים על שגיאות.
- אפשר להשתמש במאפיין ה-HTML חובה. הדפדפן יציג הודעת שגיאה כללית על סמך הפרמטרים לאימות הקובץ.
- לחלופין, אפשר להשתמש במאפיין aria-required כדי לשתף הודעת שגיאה מותאמת אישית עם ATs. רק מנהלי פלטפורמות יקבלו את ההודעה, אלא אם יתווסף קוד נוסף שיהפוך את ההודעה לגלויה לכל המשתמשים.
ברגע שהמשתמש חושב שכל השגיאות נפתרו, אפשר לאפשר לו לשלוח מחדש את הטופס ולספק משוב על תוצאות השליחה. שגיאה הודעה למשתמש שאומרת למשתמש שיש לו עוד עדכונים לבצע, אבל יש הודעה על הצלחה מאשר שהוא פתר את כל השגיאות ושלח את הטופס בהצלחה.
בדיקת ההבנה
בוחנים את הידע שלכם לגבי טפסים נגישים
איזו מהתשובות הבאות היא טופס הקלט הנגיש ביותר?
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>