בין אם שמעתם על זה או לא – חוק הנגישות מתקרב אל סף דלתנו. אם יש לכם אתר אשר מספק שירות, אתר של בית עסק, חנות אלקטרונית או כל אתר שאיננו אתר פרטי / בלוג (וגם כאן שווה להשקיע) הרי שאתם צריכים להשקיע את הזמן וקרוב לוודאי הכסף כדי להפוך את האתר שלכם נגיש ויפה שעה אחת קודם. הנגשת אתרי אינטרנט היא כבר לא אופציה אלא הכרח חוקי והתעלמות עשויה להוביל לקנסות כבדים.
עד מתי יש לנו להנגיש את האתרים שלנו?
אז ככה…
- אתר קיים: יש לכם עד ה25/10/2016
- אתר חדש: נגיש מרגע השקתו לשימוש הציבור!
אוקיי, הלחצת!
מה זה אומר בתכלס? מה אני צריך לשנות
תג אלט לכל התמונות באתר!
לא מדובר בעצה חדשה… כל מקדם אתרים שהתחיל את הקורס אתמול יודע שצריך לשים תגי אלט על תמונות ובכל זאת הרבה בעלי אתרים פשוט מזלזלים בשלב זה. לא עוד, הקפידו על תג לכל תמונה!
<!– תמונה עם תג אלט –> <img src="car.jpg" alt="מכונית" /> [/html]
תג לייבל סביב שדות בטפסים
רובנו רוצים לעשות טפסים יפים ושימוש בPlaceHoler הפך לנפוץ מאוד בשנים האחרונות. למרות זאת אנו חייבים לעטוף כל שדה בטופס בתג Label. אם זה מפריע לעיצוב תוכלו להחביא את הלייבל כך שרק קורא מסך יראה אותו
<!– שדה קלט עם לייבל עוטף –> <label for="phone">טלפון: <input type="phone" id="text" /></label> [/html]
טבלאות במבנה תקני ונכון
טבלאות הן חלק חשוב מאוד בהנגשת אתר האינטרנט שלכם. מבנה לא תקני של טבלאות עשוי להקשות מאוד על אנשים בעלי לקות ראייה! יש להשתמש במבנה אשר מגדיר TH (כותרת עמודה) בצורה תקנית.
<!– טבלה עם תגי TH –> <table> <tr> <th>שם</th> <th>טלפון</th> </tr> <tr> <td>דויד</td> <td>03-000-0000</td> </tr> <tr> <td>אלון</td> <td>04-000-0000</td> </tr> </table> [/html]
מבנה אתר עם תגי HTML5
גם בונה האתר שלכם אמר שהאתר בנוי על גבי HTML5 זה לא אומר שהמבנה הוא מבנה תקני אשר עוזר לקוראי מסך להבין את מבנה העמוד. יש לכלול תגיות אשר מסבירות את התפקיד של החלקים בדף.
<body>
<header> <nav>תפריט כאן</nav> </header>
<section> <article> תוכן הדף כאן </article> </section>
<aside> תפריט צד כאן </aside>
<footer> תחתית הדף / האתר כאן </footer>
</body> </html> [/html]
כפתורים שהם לא תמונה!
גולשים רבים להם לקות ראויה משתמשים במצב ניגודיות גבוהה של צבעים ולכן עשויים שלא לראות את הכפתורים שלכם אם הם תמונות ובמיוחד אם הם תמונות רקע – המנעו משימוש מיושן בכפתורים. כפתור מעוצב עושים עם CSS.
ניגודיות צבעים
היחס בין צבע הרקע לצבע הטקסט הוא קריטי עבור גולשים רבים אשר לא רואים 6/6. מצד שני יש לשקול את עיצוב האתר. חוק הנגישות החדש מחייב ניגודיות צבעים ברמה גבוהה של 1:4.5. איך בודקים את זה? כלים והסברים בהמשך.
סרטוני וידאו נגישים
תקנה זאת היא תקנה שרובנו לא צריכים לדאוג בגללה כיוון ש99% מאיתנו מטמיעים סרטונים מYoutube או מאתרים דומים וכמעט תמיד סרטונים אלו מציעים כפתורי ניווט אשר מותאמים לבעיות נגישות.
אם אתם מאחסנים סרטוני וידאו משלכם ומציגים אותם בעזרת נגן מובנה כדאי ואפילו הכרחי לעשות המרה של אותו נגן לנגן סרטונים מודרני מבוסס HTML5 אשר כולל בצורה מובנית אפשרויות נגישות חכמות.
סאונד? לא בכח!
אחת ההנחיות שיוצאות והן בואו נודה בזה רלוונטיות גם לטעם טוב וניהול נכון של אתר היא האפשרות להפסיק סאונד (להציג כפתורי שליטה) אשר מתנגן למעלה מ3 שניות. פרקטיקה טובה מכל בחינה!
נגישות באינטרנט – הלכה למעשה
הרצאה מעניינת ואינפורמטיבית של אילנה בניש
תוכנת קורא מסך
שימוש לב כי אילנה מדברת רבות על תוכנת קורא מסך שהיא מתקינה בצד שלה. כלומר, המשקל שעל כתפינו עוסק בעיקר בהתאמת האתר לקורא מסך ושכלול אפשרויות הניווט באתר כדי לעשות את החיים לקלים יותר עבור גולשים בעלי מוגבלויות אשר מבקרים באתר שלנו.
הגיג מוחי: האם המילים רגישות ונגישות דומות בכוונה תחילה?
אני רוצה להנגיש את האתר שלי – איך מתחילים?
להלן אוסף פעולות אשר יעודכן ככל שנלמד על הנושא (אז שמרו במועדפים) 😉
מדריך נגישות לבוני אתרים:
- איך מוצאים ומתקנים תמונות ללא תג Alt?
- איך משלבים Label בטפסים ושומרים על העיצוב? (בבנייה)
- איך משלבים תגי HTML5 באתר שלנו למבנה נגיש?
מה שכחנו? השתמשו בטופס התגובות לספר לנו וננסה לעזור…
מדובר על שינוי בהתהוות
אני בטוח שנעדכן מאמר זה ונוסיף מידע נוסף (אז שווה לשמור במועדפים), כלים ועזרים למנהלי אתרים. אני מקווה שנוכל כבוני ומקדמי אתרים לספק את המידע הנדרש ללקוח או לחלופין לבנות אתרים נגישים יותר שמתאימים לקהל גולשים רחב ומגוון יותר.
3 תגובות