בניית טפסים נגישים

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

חשוב להדגיש שיש שלוש רמות של תקן – AAA, AA ו-A. בפשרה בין הרצוי למצוי, אנחנו נסתפק בהגעה לנגישות ברמה A כאשר הגעה ל AAA היא אופציה נהדרת אך עדיין בגדר אופציה.

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

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

תגית label

תגית label משמשת אותנו ליצירת טקסט בצד הפקד (input, radio button). במקום להשתמש ב p או div.

 
<label>שם:</label>
<input id="Text1" type="text" />

וככה זה נראה במציאות. שכמובן את תגית ה label אפשר לשנות ולעצב באמצעות css.

חשוב מאד לציין שהlabel עוזר לנו להוסיף שם או ערך ליד הפקד. אין להוסיף את ה label איפה ששם הפקד נקבע על ידי value

תגית for

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


<label for="Text2">שם:</label>
<input id="Text2" type="text" />

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

תגית ה title

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

בדיוק בשביל זה מגיע לנו ה title. ה title נכנס לשדה עצמו

 
 
    <input title="חפש באתר" id="Text5" type="text" />
    <input id="Button2" type="button" value="חיפוש" />
 

וככה זה נראה בפועל, שימו את העכבר מעל הפקד ותראו את ה title מופיע!

זה כמובן שלא מזיק ל SEO… מומלץ להוסיף title תמציתי לרוב השדות.

תגית fieldset ו legend

לאלו שכותבים קוד נקי ב XHTML 1.0 Strict התגית הזו אמורה להיות מאד מוכרת. אך לרוב אלו שאינם כותבים ב strict mode הגיע הזמן להכיר את התגית הזו שמאגדת בעצם את כל הפקדים לפי קבוצות ואף נותנת להם שם קבוצה.

שוב, חשוב להדגיש כי הכל ניתן לעיצוב על ידי CSS. תגית ה fieldset מקיפה את כל השדות ששייכים לקבוצה מסוימת (גם אם יש רק פקד אחד בכל קבוצה) ותגית ה legend נותנת שם לכל הקבוצה.

 
     
<fieldset>
<legend>פרטים אישיים</legend>
<label for="name">שם ושם משפחה:</label> 
<input id="Text6" type="text" name="name" shave="30">
<label for="idnum">מספר תעודת זהות:</label> 
<input id="Text7" type="text" name="id number" shave="20">
</fieldset>
     
    

שימוש ב Javascript בטופס

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

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

שימוש בוולדיצית צד לקוח

ישנה חשיבות רבה לשימוש בוולדיציה שתתן אינדקציה מיידית על כשלון לקוח באמצעות שימוש בוולדיצית צד לקוח.

יש להמנע מ-alerts ולהשתמש ב DOM על מנת ליצור הודעת שגיאה.

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

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

 
 
<script type="text/javascript">
function errormessage()
{
    if(!document.getElementById("errorid"))
    {
        var a=document.getElementById("Text6").value
        var div = document.createElement('div');
        div.setAttribute("id", "errorid");
        var divError = document.createTextNode("יש למלא 7 ספרות במדויק. למשל 5533456");
        div.appendChild(divError);
        document.getElementById("exampleForm").appendChild(div);
    }
}
</script>
<form id="Form1">
<fieldset>
<legend>שדה שתמיד יציג הודעת שגיאה</legend>
<label for="Text6">הכנס מספר טלפון כלשהו:</label>
    <input title="הכנס מספר טלפון כלשהו" id="Text7" type="text" />
    <input id="Button4" type="button" value="שלח את מספר הטלפון
     וקבל הפתעה" onclick="errormessage()"/>
</fieldset>
</form>
 
 
 
 
 

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

הראה את החלקים הרלוונטיים בטופס

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

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

הגבלת זמן

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

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

מתן אינדקציה לשדה נדרש

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

אישרור הפעולה ומניעת טעויות

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

מדובר באלמנט החשוב לתקן AAA שנכון למאמר זה הוא אופציונלי.