מאמר זה נכתב על-ידי עמית מורנו ב-19 ביוני 2017

תוסף הטפסים לוורדפרס Contact Form 7 הוא תוסף טפסים מעולה המאפשר עריכה מלאה של מבנה ה-html, והעיצוב (CSS) של הטופס. עם זאת, הטופס שמוצג על-ידי התוסף מגיע עם שתי בעיות נגישות קריטיות. בפירוט שלהלן ניתן להבין מהן בעיות הנגישות הללו וכיצד ניתן לפתור אותן.

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

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

jQuery('.wpcf7-form').ajaxComplete( function(){
    if(jQuery(this).hasClass('invalid')){
        jQuery(".wpcf7-not-valid").first().focus();
        jQuery(".wpcf7-not-valid").each(function(){
            labelFor = jQuery(this).attr("id");
            labelName = jQuery(".wpcf7-form").find("[for='" + labelFor + "']").text().replace(/\s+\(.+?\)/g, '');
            jQuery(this).next(".wpcf7-not-valid-tip").text(labelName + " הוא שדה חובה");
        });
    }
});

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