הטופס שאתם יוצרים מיועד לאנשים. אנשים משתמשים במכשירים שונים. חלקם משתמשים בעכבר, חלק במכשיר מגע, חלק במקלדת, חלק ממכשיר שנשלט על ידי תנועות עיניים. בחלקם יש קורא מסך, חלקם משתמשים במסך קטן ובחלקם יש תוכנה להגדלת טקסט. כולם רוצים להשתמש בטופס. כאן מוסבר איך להפוך את הטופס לנגיש ולשימוש לכולם.
צריך לוודא שהמשתמשים מבינים את המטרה של שדה בטופס
יש הרבה פקדי טפסים שאפשר לבחור מביניהם.
מה משותף לכולן?
לכל פקד טופס חייב להיות רכיב <label> משויך.
ברכיב <label> מתוארת המטרה של פקד הטופס.
הטקסט ב<label> משויך מבחינה חזותית לפקד הטופס, וקוראי מסך מקריאים אותו.
בנוסף, הקשה או לחיצה על <label> מתמקדת בפקד הטופס המשויך,
וכך להפוך אותו ליעד גדול יותר.
להשתמש ב-HTML משמעותי כדי לגשת לתכונות דפדפן מובנות
בתיאוריה, אפשר ליצור טופס עם רכיבי <div> בלבד.
אפשר אפילו לגרום לו להיראות כמו <form> מקורי.
מה הבעיה בשימוש ב-?
לא סמנטיים?
רכיבי צורה מובנים מספקים הרבה תכונות מובנות. נבחן עכשיו דוגמה.
מבחינה חזותית, <input> (הראשון בדוגמה) ו-<div> נראים זהים.
אפשר אפילו להוסיף טקסט לשניהם, כי ב-<div> יש
contenteditable.
עם זאת, יש הרבה הבדלים בין שימוש ברכיב <input> מתאים לבין <div>.
שנראה כמו <input>.
משתמש בקורא מסך לא מזהה את <div> כרכיב קלט,
ואין לו אפשרות למלא את הטופס.
כל מה שמשתמש קורא המסך ישמע הוא 'Name',
ללא סימון לכך שהרכיב הוא פקד טופס להוספת טקסט.
לחיצה על <div>Name</div> לא מתמקדת ב-<div> שנכלל בו, ואילו <label>
ה-<input> מחוברים באמצעות המאפיינים for ו-id.
אחרי שליחת הטופס, הנתונים שהוזנו ב-<div> לא נכללים בבקשה.
אמנם יש אפשרות לצרף את הנתונים באמצעות JavaScript,
<input> עושה את זה כברירת מחדל.
לרכיבי צורה מובנים יש תכונות נוספות.
לדוגמה, באמצעות רכיבי טופס מתאימים ועם inputmode או type הנכונים,
במקלדת שמופיעה במסך מופיעים התווים המתאימים. שימוש במאפיין inputmode ב-<div>
לא ניתן לעשות זאת.
צריך לוודא שהמשתמשים מודעים לפורמט הנתונים הצפוי
תוכלו להגדיר כללי אימות שונים לבקרת טופס.
לדוגמה, נניח ששדה בטופס צריך תמיד להכיל שמונה תווים לפחות.
המאפיין משמש אותך במאפיין minlength, שמציין את כלל האימות לדפדפנים.
איך אפשר לוודא שגם המשתמשים ידעו על כלל האימות? ספר להם.
מומלץ להוסיף מידע על הפורמט הרצוי ישירות מתחת לפקד הטופס.
כדי להבהיר לגבי 'מכשירים מסייעים',
להשתמש במאפיין aria-describedby בפקד הטופס,
ו-id בהודעת השגיאה עם אותו הערך, כדי לחבר את שניהם.
איך לעזור למשתמשים למצוא את הודעת השגיאה בפקד הטופס
במודול הקודם שעוסק באימות, למדת איך להציג הודעות שגיאה במקרה של הזנת נתונים לא חוקית.
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
לדוגמה, אם לשדה מסוים יש מאפיין required, ומוזנים נתונים לא חוקיים, הדפדפן יציג
הודעת שגיאה לצד פקד הטופס כשהטופס יישלח. קוראי מסך מכריזים גם על הודעת השגיאה.
אתם יכולים גם להגדיר הודעת שגיאה משלכם:
בדוגמה הזו נדרשים שינויים נוספים כדי לחבר את הודעת השגיאה לפקד הטופס.
גישה פשוטה היא להשתמש בaria-describedby
בפקד הטופס שתואם ל-id ברכיב של הודעת השגיאה.
לאחר מכן, משתמשים ב-aria-live="assertive" כדי להציג את הודעת השגיאה.
אזורים פעילים מסוג ARIA מודיעים על שגיאה למשתמשים בקורא מסך ברגע שהשגיאה מוצגת.
הבעיה בגישה הזו לטפסים עם כמה שדות,
הוא ש-aria-live יכריז בדרך כלל על השגיאה הראשונה רק במקרה של שגיאות מרובות.
כמו שמוסבר במאמר הזה על כמה הודעות של aria-live לגבי אותה פעולה, אפשר ליצור הודעה אחת על ידי שרשור כל השגיאות. גישה נוספת היא להודיע על שגיאות, ולהכריז על שגיאות ספציפיות כשהשדה ממוקד.
איך לוודא שהמשתמשים מזהים שגיאות
לפעמים מעצבים צובעים את המצב הלא תקין באדום,
באמצעות המחלקה המדומה :invalid.
עם זאת, כדי לציין שגיאה או הצלחה,
אסור להסתמך רק על צבע.
עבור אנשים עם עיוורון צבעים אדום-ירוק,
גבול ירוק ואדום נראים כמעט זהים.
לא ניתן לראות אם ההודעה קשורה לשגיאה.
בנוסף לצבע, אפשר להוסיף סמל או להוסיף להודעות השגיאה את סוג השגיאה שמופיע בתחילת ההודעה.
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
איך לעזור למשתמשים לנווט בטופס
אתם יכולים לשנות את הסדר החזותי של פקדי הטפסים באמצעות CSS. ניתוק בין הסדר החזותי לניווט במקלדת (סדר DOM) בעייתית למשתמשים בקורא מסך ובמקלדת.
מידע נוסף על האופן שבו ניתן לוודא הסדר החזותי בדף תואם לסדר DOM.
אני רוצה לעזור למשתמשים לזהות את פקד הטופס שמתמקד כרגע
משתמשים במקלדת כדי לנווט במסמך
הטופס הזה.
האם ידעת שהעיצוב של פקדי הטפסים השתנה אחרי שהם הופעלו?
זהו סגנון ברירת המחדל של המיקוד.
כדי לשנות את זה אפשר להשתמש במאפיין
:focus מחלקה מדומה של CSS.
בכל סגנון שבחרת בתוך :focus,
חשוב לוודא שניתן לזהות את ההבדל החזותי בין מצב ברירת המחדל לבין מצב המיקוד.
מידע נוסף על לעצב אינדיקטורים למיקוד.
חשוב לוודא שאפשר להשתמש בטופס
כדי לזהות בעיות נפוצות רבות, ממלאים את הטופס במכשירים שונים. יש להשתמש רק במקלדת, באמצעות קורא מסך (כמו NVDA ב-Windows או VoiceOver ב-Mac), או שינוי מרחק התצוגה של הדף ל-200%. תמיד מומלץ לבדוק את הטפסים בפלטפורמות שונות, במיוחד מכשירים או הגדרות שאתם לא משתמשים בהם כל יום. האם אתם מכירים מישהו שמשתמש בקורא מסך? או מישהו שמשתמש בתוכנה להגדלת טקסט? צריך לבקש ממנו למלא את הטופס שלכם. ביקורות על נגישות הן מצוינות – בדיקה עם משתמשים אמיתיים עוד יותר טובה.
מידע נוסף על ביצוע בדיקת נגישות ואיך לבדוק עם משתמשים אמיתיים.