לאחר שבנינו פופאפ במדריך הקודם, כעת זה הזמן להנגיש אותו גם כן. ההנגשה כוללת התאמה מלאה לשימוש ניווט מקלדת והתאמה לקוראי מסך, שגם הם ידעו לקרוא את הפופאפ כמו שצריך ולדעת לנווט בתוכו. כל אחד מהחלקים הללו כולל בתוכו מספר פעולות שנדרשות, נעבור יחד דרישה אחרי דרישה ולכל אחת – דרך הפתרון, כולל הסברים. הקוד כאן תואם למדריך שנכתב בעבר על יצירת פופאפ, אבל הוא תקף בכל פופאפ אחר שאתם משתמשים בו. אלו כללים שצריך להחיל בכל מקרה, והדוגמאות שכאן יעזרו לכם להנגיש.
הנגשת הפופאפ לניווט מקלדת
הדרישה
כשהפופאפ סגור יש לבטל את האפשרות להגיע בפוקוס לכפתורים שלו. במילים אחרות, הוא כאילו לא קיים בכלל מבחינת מעבר הפוקוס.
הפתרון
ניתן לבצע את זה בצורה פשוטה על ידי הוספת display: none לאלמנט שמכיל את התוכן של הפופאפ, ולהוסיף סלקטור CSS שמגדיר בפופאפ פתוח (.popup_open) שיהיה display: block בחזרה.
הדרישה
ברגע של פתיחת פופאפ, הפוקוס צריך להתמקם על כפתור הסגירה שלו.
הפתרון
נוסיף את הקוד הבא לאירוע שפותח את הפופאפ:
jQuery('#close_popup_button').focus();
הדרישה
מלכודת מקלדת – מעבר טאב לא מוציא את הפוקוס מחוץ לפופאפ. כך שבמידה ויש אלמנטים קליקביליים נוספים בפופאפ, כמו כפתורים, טופס, קישורים ועוד – הפוקוס יעבור עליהם ומהם חזרה לכפתור הסגירה, וחוזר חלילה. אסור לפוקוס לצאת מחוץ לפופאפ חזרה לעמוד. יש לשים לב לטאב וגם לshift+tab – ניווט אחורה.
הפתרון
נוסיף שתי סקריפטים.
בראשון הסלקטור מאתר את האלמנט המסוגל לקבל פוקוס האחרון, והאירוע הוא על keydown. לוכדים את קוד המקש (keyCode), ובמידה ולחצו על מקש טאב (9) ולא לחצו על shift (כלומר, בוצע ניווט קדימה) – הפוקוס חוזר לכפתור הסגירה.
לסקריפט השני הסלקטור הוא כפתור הסגירה. כמו קודם לוכדים את קוד המקש ובמידה ולחצו על מקש הטאב וגם על shift – כלומר ניסו לבצע ניווט אחורנית, מה שעלול להוציא את הפוקוס מחוץ לפופאפ – מחזירים את הפוקוס לאלמנט הראשון שמסוגל לקבל פוקוס.
שימו לב. הקוד הזה עוזר רק במקרה של ניווט מקלדת על מחשב, ולא בניווט מקלדת במובייל, שמתבצע בצורה שונה ולא מאמצעות המקש tab.
הדרישה
לחיצה על escape צריכה לבצע סגירה של הפופאפ.
הפתרון
הוספת הסקריפט הבא:
jQuery('#popup_wrap, #popup_wrap *').keydown(function(e){
if(e.keyCode == 27)
closePopup();
});
הקוד 27 זה הקוד של מקש הescape במקלדת. לחיצה עליו תגרום להפעלת הפונקציה שסוגרת את הפופאפ.
הדרישה
בסגירת הפופאפ הפוקוס צריך לחזור אל הכפתור שפתח אותו, אחרת הגולש יאבד את דרכו בעמוד.
הפתרון
נוסיף לפונקציה closePopup את השורה הבאה:
jQuery('#open_popup_button').focus();
במידה ויש כמה פופאפים בעמוד, יוצרים את הקשר בין כפתור לפופאפ שהוא פותח באמצעות data, לדוגמה data-popup="registration" הן עבור הכפתור והן עבור הפופאפ עצמו. ואז בסגירה בודקים מה הdata-popup של הפופאפ שפתוח (לדוגמה באמצעות הקלאס active שמוסיפים לו כשהוא נפתח), ואז לכפתור עם אותו data-popup נותנים את הפוקוס.
הנגשת הפופאפ לקורא מסך
הדרישה
כשהפופאפ סגור יש לתת לקורא המסך הנחיה שלא לקרוא אותו.
הפתרון
הוספת המאפיין aria-hidden="true" לפופאפ כשהוא סגור, שינוי המאפיין לfalse באירוע הפתיחה, ושינוי חוזר לtrue בפונקציה שסוגרת.
קוד לדוגמא:
jQuery('#popup_wrap').prop('aria-hidden', true);
הדרישה
רצוי להגדיר לפופאפ מה הוא מכיל. כלומר לתת איזושהי הפניה לכותרת של התוכן בתוכו.
הפתרון
האלמנט שהוא הכותרת של הפופאפ יקבל איזשהו ID. למשל loginPopupTitle. ונוסיף לאלמנט #popup_wrap את ההגדרה aria-labeledby עם הID של אלמנט הכותרת, למשל בדוגמא הזו:
aria-labeledby="loginPopupTitle"
כעת הפופאפ מתואר על ידי הכותרת שלו והכל בא על מקומו בשלום.
עד כן. והנה הדוגמא שלוותה אותנו לכל הפוסט על בניית פופאפ, כשהיא גמורה ותקינה (עד כמה שבדקתי…)
הצלחה רבה! ואם יש שאלות בנושא הזה או בכל נושא אחר – בדיוק בשביל זה מיועד טופס השארת תגובה…