מנגישים את הנגשת האתרים – חלק שלישי – הקוד

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

מה חשוב לדעת כשבאים לבנות אתר בקוד נגיש?

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

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

מבנה הHTML

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

 קוד JQUERY לדוגמה שגורם לHOVER מלאכותי על אלמנט :

$(“a”).focus(function(){

    $(this).trigger(‘mouseenter’);

});

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

לדוגמה:

<div tabindex=”-1″></div>

חשוב מאוד שלא להכניס div ואלמנטים נוספים אל תוך קישור. האלמנטים היחידים שיכולים להכנס לקישור הם אלמנטים שהם inline  (כמו span  ו srong לדוגמה).

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

נראה לי שכרגע די בטוח לומר שJQUERY הוא חברו הטוב ביותר של מנגיש האתרים.

שתהיה לכולנו הנגשה נעימה. 

מחפשים תוסף שיעשה עבורכם את רוב עבודת ההנגשה?