טפסים

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

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

 

הנחיות נגישות רלוונטיות

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

טכניקות לבניית טפסים נגישים

יש לשים לב כי הטכניקות המופיעות בסעיף זה מיועדות ל-HTML בלבד. בניית טפסים בטכנולוגיות אחרות דורשת התייחסות לאותם אתגרי נגישות, ויש לספק פתרונות עבור כל אתגר. היעזרו במומחה נגישות על מנת להגדיר את הפתרונות.
קישור בין שדה בטופס לטקסט שמתאר אותו
יש ליצור קשר בין כותרת השדה (label) לבין השדה עצמו על מנת להבטיח את הנגשת הטופס עבור משתמשים עוורים. קורא המסך יקרא את הlabel בעת הכניסה לשדה רק אם יצרתם קישור נכון בין השניים. בצורה כזאת המשתמש יבין במהירות איזה מידע עליו להזין בשדה.
למשל: קישור תווית "שם פרטי" לתיבת הטקסט המתאימה בטופס.
1
2

במידה והעיצוב החזותי מונע שימוש ב-label על מנת לתאר את הקשר לשדות השתמשו ברכיב title. (לדוגמא כאשר לא מופיע על המסך טקסט שיכול להיות מזוהה כ label, או במקרה שהוספת label תגרום לבלבול)
1
2
3
4
5
6
Phone number



סימון שדות חובה
הסימון של שדות החובה צריך להיות ויזואלי וטקסטואלי על מנת שתכנת קורא המסך תוכל לזהותו.
בנוסף יש לספק מקרא בתחילת הטופס עבור הסימון. למשל- " שדות המסומנים באדום הם שדות חובה".
אין למנוע את אפשרות שליחת הטופס במידה ולא הושלמו כל שדות החובה. המשתמשים לא תמיד שמים לב שלא מלאו שדות חובה ואינם מאתרים את השדות שפספסו. כדי למנוע תקלות מסוג זה יש לאפשר למשתמש ללחוץ על כפתור "שליחה" בכל מצב ולאחר מכן להציג הודעת שגיאה במידה שלא הושלמו שדות חובה, תוך ציון השדות שלא הושלמו.
ארגון הטופס
כאשר הטופס ארוך וכולל יותר מעשרה שדות יש לקבץ שדות בעלי זיקה אחד לשני. יש להשתמש ב-
Fieldset על מנת לקבץ שדות. למשל- השתמשו בfieldset פרטים אישיים על מנת לקבץ שדות: שם, מצב משפחתי, מספר ילדים וכתובת.1
2
3
4
פרטים אישיים

— השדות: שם, מצב משפחתי, מספר ילדים, וכתובת יופיעו פה —

עבור תיבות בחירה (combo boxes) – יש להשתמש ב-optgroup כדי לקבץ קבוצות של options (לדוגמה: בית ספר יסודי, תיכון, אוניברסיטה, השכלה גבוהה אחרת)עבור לחצני אפשרויות (radio buttons) או תיבות סימון -(checkboxes) יש להשתמש ב legend כדי לתאר קבוצות של שדות מסוג זה. ככלל, radio buttons או checkboxes יהיו קשורים זה לזה במערכת אחת, כאשר ערך ה- name שלהם זהה. אנשים המשתמשים בקוראי-מסך יוכלו להעיזר בקישור זה על מנת לשמוע את התיאור בנוסף לאפשרויות הבחירה. כאשר קבוצה מצומצמת של radio buttons מכילה הוראות ברורות ובחירה מובחנת, אין צורך להשתמש ב- legend.
הודעות שגיאה
מומלץ לקרוא את המאמר אודות הודעות שגיאה. (לינק פנימי)

הנחיות נגישות רלוונטיות
הנחיה 1.3 ניתן להתאמה: עליכם לבנות תכנים שניתן להציג במגוון אפשרויות אך ללא החסרת מידע או פגיעה במבנה.
הנחיה 3.3 עזרה בקלט : סייעו למשתמשים להימנע משגיאות ולתקן אותן.
טכניקות לבניית טפסים נגישים
יש לשים לב כי הטכניקות המופיעות בסעיף זה מיועדות ל-HTML בלבד. בניית טפסים בטכנולוגיות אחרות דורשת התייחסות לאותם אתגרי נגישות, ויש לספק פתרונות עבור כל אתגר. היעזרו במומחה נגישות על מנת להגדיר את הפתרונות.
קישור בין שדה בטופס לטקסט שמתאר אותו
יש ליצור קשר בין כותרת השדה (label) לבין השדה עצמו על מנת להבטיח את הנגשת הטופס עבור משתמשים עוורים. קורא המסך יקרא את הlabel בעת הכניסה לשדה רק אם יצרתם קישור נכון בין השניים. בצורה כזאת המשתמש יבין במהירות איזה מידע עליו להזין בשדה.
למשל: קישור תווית "שם פרטי" לתיבת הטקסט המתאימה בטופס.
1
2

במידה והעיצוב החזותי מונע שימוש ב-label על מנת לתאר את הקשר לשדות השתמשו ברכיב title. (לדוגמא כאשר לא מופיע על המסך טקסט שיכול להיות מזוהה כ label, או במקרה שהוספת label תגרום לבלבול)
1
2
3
4
5
6
Phone number



סימון שדות חובה

הסימון של שדות החובה צריך להיות ויזואלי וטקסטואלי על מנת שתכנת קורא המסך תוכל לזהותו.
בנוסף יש לספק מקרא בתחילת הטופס עבור הסימון. למשל- " שדות המסומנים באדום הם שדות חובה".
אין למנוע את אפשרות שליחת הטופס במידה ולא הושלמו כל שדות החובה. המשתמשים לא תמיד שמים לב שלא מלאו שדות חובה ואינם מאתרים את השדות שפספסו. כדי למנוע תקלות מסוג זה יש לאפשר למשתמש ללחוץ על כפתור "שליחה" בכל מצב ולאחר מכן להציג הודעת שגיאה במידה שלא הושלמו שדות חובה, תוך ציון השדות שלא הושלמו.
ארגון הטופס
כאשר הטופס ארוך וכולל יותר מעשרה שדות יש לקבץ שדות בעלי זיקה אחד לשני. יש להשתמש ב-
Fieldset על מנת לקבץ שדות. למשל- השתמשו בfieldset פרטים אישיים על מנת לקבץ שדות: שם, מצב משפחתי, מספר ילדים וכתובת.1
2
3
4
פרטים אישיים

— השדות: שם, מצב משפחתי, מספר ילדים, וכתובת יופיעו פה —

עבור תיבות בחירה (combo boxes) – יש להשתמש ב-optgroup כדי לקבץ קבוצות של options (לדוגמה: בית ספר יסודי, תיכון, אוניברסיטה, השכלה גבוהה אחרת)עבור לחצני אפשרויות (radio buttons) או תיבות סימון -(checkboxes) יש להשתמש ב legend כדי לתאר קבוצות של שדות מסוג זה. ככלל, radio buttons או checkboxes יהיו קשורים זה לזה במערכת אחת, כאשר ערך ה- name שלהם זהה. אנשים המשתמשים בקוראי-מסך יוכלו להעיזר בקישור זה על מנת לשמוע את התיאור בנוסף לאפשרויות הבחירה. כאשר קבוצה מצומצמת של radio buttons מכילה הוראות ברורות ובחירה מובחנת, אין צורך להשתמש ב- legend.
הודעות שגיאה
מומלץ לקרוא את המאמר אודות הודעות שגיאה. (לינק פנימי)

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

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

בשדה זה המשתמש בוחר נתונים או מזין נתונים. השדה מופיע בצורות שונות: תיבת סימון (checkbox) לחצן אפשרויות (radio button),  שדה קלט (input) ועוד. במידה והטופס לא נבנה באמצעות שדות התומכים בשימוש במקלדת על פי סטנדרטים, הוא יעמיס קשיים על אנשים המשתמשים רק במקלדת.

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

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

(בעיקר כאשר מדובר בהודעות Ajax ). בעיות נוספות עולות מעיצוב ההודעה ומיקומה. על מנת להציג הודעות שגיאה בצורה נגישה היעזר במאמר נגישות הודעות שגיאה. (לינק פנימי)

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

 

 

הנחיות נגישות רלוונטיות

הנחיה 1.3 ניתן להתאמה: עליכם לבנות תכנים שניתן להציג במגוון אפשרויות אך ללא החסרת מידע או פגיעה במבנה.
הנחיה 3.3 עזרה בקלט : סייעו למשתמשים להימנע משגיאות ולתקן אותן.
טכניקות לבניית טפסים נגישים
יש לשים לב כי הטכניקות המופיעות בסעיף זה מיועדות ל-HTML בלבד. בניית טפסים בטכנולוגיות אחרות דורשת התייחסות לאותם אתגרי נגישות, ויש לספק פתרונות עבור כל אתגר. היעזרו במומחה נגישות על מנת להגדיר את הפתרונות.
קישור בין שדה בטופס לטקסט שמתאר אותו
יש ליצור קשר בין כותרת השדה (label) לבין השדה עצמו על מנת להבטיח את הנגשת הטופס עבור משתמשים עוורים. קורא המסך יקרא את הlabel בעת הכניסה לשדה רק אם יצרתם קישור נכון בין השניים. בצורה כזאת המשתמש יבין במהירות איזה מידע עליו להזין בשדה.
למשל: קישור תווית "שם פרטי" לתיבת הטקסט המתאימה בטופס.
1
2

במידה והעיצוב החזותי מונע שימוש ב-label על מנת לתאר את הקשר לשדות השתמשו ברכיב title. (לדוגמא כאשר לא מופיע על המסך טקסט שיכול להיות מזוהה כ label, או במקרה שהוספת label תגרום לבלבול)
1
2
3
4
5
6

Phone number



 

סימון שדות חובה

הסימון של שדות החובה צריך להיות ויזואלי וטקסטואלי על מנת שתכנת קורא המסך תוכל לזהותו.
בנוסף יש לספק מקרא בתחילת הטופס עבור הסימון. למשל- " שדות המסומנים באדום הם שדות חובה".
אין למנוע את אפשרות שליחת הטופס במידה ולא הושלמו כל שדות החובה. המשתמשים לא תמיד שמים לב שלא מלאו שדות חובה ואינם מאתרים את השדות שפספסו. כדי למנוע תקלות מסוג זה יש לאפשר למשתמש ללחוץ על כפתור "שליחה" בכל מצב ולאחר מכן להציג הודעת שגיאה במידה שלא הושלמו שדות חובה, תוך ציון השדות שלא הושלמו.
ארגון הטופס
כאשר הטופס ארוך וכולל יותר מעשרה שדות יש לקבץ שדות בעלי זיקה אחד לשני. יש להשתמש ב-
Fieldset על מנת לקבץ שדות. למשל- השתמשו בfieldset פרטים אישיים על מנת לקבץ שדות: שם, מצב משפחתי, מספר ילדים וכתובת.

1
2
3
4

פרטים אישיים

— השדות: שם, מצב משפחתי, מספר ילדים, וכתובת יופיעו פה —

עבור תיבות בחירה (combo boxes) – יש להשתמש ב-optgroup כדי לקבץ קבוצות של options (לדוגמה: בית ספר יסודי, תיכון, אוניברסיטה, השכלה גבוהה אחרת)

עבור לחצני אפשרויות (radio buttons) או תיבות סימון -(checkboxes) יש להשתמש ב legend כדי לתאר קבוצות של שדות מסוג זה. ככלל, radio buttons או checkboxes יהיו קשורים זה לזה במערכת אחת, כאשר ערך ה- name שלהם זהה. אנשים המשתמשים בקוראי-מסך יוכלו להעיזר בקישור זה על מנת לשמוע את התיאור בנוסף לאפשרויות הבחירה. כאשר קבוצה מצומצמת של radio buttons מכילה הוראות ברורות ובחירה מובחנת, אין צורך להשתמש ב- legend.
הודעות שגיאה
מומלץ לקרוא את המאמר אודות הודעות שגיאה. (לינק פנימי)

שינוי גודל גופנים