הטופס שאתם בונים מיועד לאנשים. אנשים משתמשים במכשירים שונים. בחלקם משתמשים בעכבר, בחלקם במכשיר מגע ובחלקם במקלדת, בחלקם במכשיר שנשלט באמצעות תנועות עיניים. בחלקם משתמשים בקורא מסך, בחלקם במסך קטן ובחלקם משתמשים בתוכנה להגדלת טקסט. כולם רוצים להשתמש בטופס שלכם. כאן מוסבר איך יוצרים טופס נגיש ומועיל לכולם.
מוודאים שהמשתמשים מבינים את המטרה של שדה בטופס
יש הרבה פקדי טפסים לבחירה.
מה משותף לכולם?
לכל פקד בטופס חייב להיות רכיב <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%. חשוב לבדוק את הטפסים בפלטפורמות שונות, במיוחד במכשירים או בהגדרות שאתם לא משתמשים בהם כל יום. מכיר מישהו שמשתמש בקורא מסך, או מישהו שמשתמש בתוכנה להגדלת טקסט? מבקשים ממנו למלא את הטופס. ביקורות על נגישות הן מצוינות, והרבה יותר טוב לבדוק עם משתמשים אמיתיים.
למידע נוסף על בדיקת נגישות ועל ביצוע בדיקות מול משתמשים אמיתיים.