בתקופה האחרונה אני מזהה עלייה משמעותית בדרישת משתמשים וגולשים באינטרנט להנגשת מסמכים וטפסים מקוונים באתרי אינטרנט.

ראשית, חשוב לי להסביר מהו טופס מקוון.

טופס מקוון הוא בעצם טופס המאפשר למשתמש להכניס את פרטיו לצורך קבלת מידע, סיוע, ביצוע פעולות מקוונות כגון תשלום, הרשמה, הצטרפות לחברות מועדון וכן הלאה.

הנגשת טפסים מקוונים זהו חלק חשוב ומהותי בכל אתרי אינטרנט מכיוון שלרוב זו הדרך היחידה של אנשים עם מוגבלות לבצע פעולות מסוימות וליצור קשר מהיר וקל עם בעל האתר ונותן השירות.

שימוש בשדות INPUT במסגרת טופס מקוון

לרוב, טופס מקוון כולל בתוכו מספר שדות הניתנות למילוי ואף מספר שלבים שבסופם המשתמש מקבל הודעה שהפנייה או הרישום שלו בוצע בהצלחה.

הטופס מכיל שדות Input שהם בעצם תיבות פתוחות המאפשרות הזנת נתונים, מידע או תוכן רלוונטי לטופס. שדות לדוגמה: שם פרטי, כתובת דואר אלקטרוני, כתובת וכן הלאה.

לכל שדה כזה לצרף לייבל אשר מסביר למשתמש המסתייע בקורא מסך מה מטרת השדה ומה עליו לעשות בעת הגעתו לשדה זה. האם עליו למלא שם פרטי? או שאולי מספר טלפון? את הנתונים הללו מוסיפים בלייבל של השדה, וברגע שהקורא מסך מגיע לאותו הלייבל הוא מקריא למשתמש מה עליו להכניס באותו שדה. במידה ולא ניתן מסיבה טכנית או ויזואלית להוסיף לייבל לשדה ניתן להשתמש גם בטייטל נפתח במסגרת Input של השדה.

במידה ובאותו הטופס המקוון מדובר בכמה משתמשים, כלומר כמה משתמשים שצריכים למלא את הפרטים שלהם באותו הטופס יש להשתמש ב-Fieldset  .

שימוש בכפתורי רדיו ותיבות בחירה בטופס מקוון

בטפסים מקוונים רבים מלבד השדות הפתוחים שהתייחסתי אליהם בתחילת המאמר ישנו שימוש גם בכפתורי רדיו או תיבות בחירה. השימוש בכפתור רדיו או בתיבות בחירה חייב להיות בצורה נפרדת אחד מהשני ובמרחק סביר כדי שהגולש לא יתבלבל במטרת הבחירה ויעשה את הדבר הנכון עבורו. יישמו כל תיבה בשורה לבד – כלפי מטה.

שימוש בתיבות בחירה select בטופס מקוון

תיבה לחיצה <select>  היא תיבה שבעת לחיצה עליה נפתחת לי אפשרות בחירה בצורת scroll כלפי מטה.

ברגע שיש לי כמה נושאים בתוך אותה תיבת בחירה או תפריט  dropdown ארוך יש להשתמש ב optiongroup:label  שזו בעצם סוג של כותרת המופיעה בתוך התיבה שנפתחת מטה. המטרה העיקרית של כותרת זו לחבר את המשתמש מהו המידע שמופיע שם. בלי שימוש בכותרת זו לאחר מספר פעמים שהגולש ימשיך מטה הוא יאבד את המידע המקורי שלשמו הוא נכנס בעת לחיצה על אותה תיבת בחירה.

חשוב לשים לב – אין ליצור פעולה אוטומטית בעזרת שדה select– כלומר במידה והגענו לשדה בחירה שיש בו dropdown  הנפתח מטה ובעת לחיצה על נושא או כפתור מסוים הוא מקפיץ אוטומטי לעמוד אחר ( דבר שאינו תקין ברוב המקרים) יש להשתמש ב-aria label ולהודיע לגולש שברגע שהוא לוחץ על הבחירה זה מעביר אותה לעמוד אחר בצורה אוטומטית.

כפתור לאיפוס המידע בטופס מקוון

ההמלצה היא ללא להשתמש בכפתור איפוס או בשמו הלועזי reset  בטפסים מקוונים. כפתור זה מאפס את כל המידע המופיע בטופס מה שעלול לגרום לחוסר נוחות רבה לאנשים עם מוגבלות או בטפסים שהם ארוכים במיוחד שנדרש זמן וידע למלא אותם. אם בכל מקרה ישנה חובה ומהות הטופס מאלצת אותנו להשתמש בזה, מומלץ להרחיק כמה שיותר מכפתור האישור.

התייחסות לטופס מקוון המורכב מכמה שלבים

טפסים מקוונים כגון טפסי תשלום, הרשמה לצהרון, הוספת הוראת קבע וכן הלאה לרוב כוללים יותר משלב אחד שבו המשתמש צריך למלא את פרטיו בצורה מסודרת ולפי סדר השדות המופיע בטופס.

במידה והטופס מורכב מיותר משלב אחד, צריך להסביר לגולש על כל שלב באמצעות aria label – המסביר לו מהו השלב שבו הוא נמצא ומה עליו לבצע באותו שלב.

כמה דברים חשובים שיש ליישם בכל טופס מקוון המופיע באתר אינטרנט

• יש לוודא שמתקבל פוקוס בעת מעבר לכל תיבה ותיבה בשדה. כמו כן חשוב לבדוק כי הסדר מתבצע בצורה מלאה ותקינה בהתאם לסדר השדות המופיעים בפועל בטופס.
• יש לציין בצורה מובנת וברורה מהם שדות חובה.
• בכל מקום שיש תקנון או אישור כי המשתמש קרא את המידע והוא מאשר זאת, חייב שיהיה checkbox שפותח תיבה עם הסבר לקורא מסך, אותו הסבר מחויב לקבל פוקוס ולהיות נגיש לקורא מסך.
• אין להשתמש רק בצבע אדום במצב של שגיאה – אלא יש ממש לרשום באיזו תיבה חסר מידע או באיזו תיבה יש שגיאות. שיש הודעת שגיאה מסוימת חשוב שהיא תהיה מפורטת ותכלול בצורה מפורטת מדוע התבצעה שגיאה ומה המשתמש צריך לעשות כדי למלא שוב פעם בצורה תקינה. חשוב שהפוקוס שלאחר הודעת השגיאה יהיה ישירות לאותה תיבה שבה חלה הטעות.