כיצד נייצר נגישות לאתר ?
בניית אתרים נגישים לאנשים עם מוגבלויות היא לא רק תרגול טוב אלא גם חיונית לעמידה בסטנדרטים בינלאומיים ובתקנות מקומיות. אספנו לכם את העקרונות והטכניקות החשובים ביותר שיעזרו לכם ליישם את נושא הנגישות באתר שלכם.
על פי ארגון הבריאות העולמי, למעלה מ-5% מאוכלוסיית העולם סובלים מאובדן שמיעה, ולפחות מיליארד בני אדם סובלים מליקוי ראייה או עיוורון. כדי לאפשר לכולם גישה לתכני האתר שלכם חשוב לשים את נושא הנגישות בראש סדר העדיפויות.
תהליך הנגשת אתר אמנם לעיתים מורכב ומייקר את עלויות בניית האתר אך מאפשר ליצור חווית משתמש (UX) טובה יותר שהקהל שלכם יעריך, ובמקביל להימנע מבעיות משפטיות שעלולות להתעורר עקב אי התאמה לתקני נגישות בינלאומיים / מקומיים.
במאמר זה, נדון לעומק בנגישות האינטרנט – מה זה, למה זה חיוני, כמה תקנים המנחים את התאימות, עקרונות שיעזרו לכם בעת יישום הנגישות באתרכם, ולבסוף, כיצד לבדוק ולשפר את הנגישות של האתר שלכם.
מהי נגישות לאינטרנט?
מנקודת מבט רחבה, אתר נגיש הוא אתר אינטרנט זמין ומובן לכל משתמש ללא קשר למכשיר, טכנולוגיה, רזולוציה, או מגבלה פיזית. נגישות האינטרנט כוללת כל כלי או טכנולוגיה המשמשים לגישה לאינטרנט ולמוצרים דיגיטליים.
למרות שטכנולוגיית האינטרנט תוכננה להסיר חסמים ומכשולים רבים לתקשורת ולאינטראקציה עם העולם, בעיות פיזיות שונות יכולות לעורר קושי. לדוגמה, אנשים עם מוגבלויות כגון עיוורון או אובדן שמיעה עלולים להיתקל בבעיות מסוימות באינטראקציה עם אתר אם אין שיפורים נאותים מובנים.
ליקויים אלו יכולים להיות שמיעתיים, קוגניטיביים, נוירולוגיים, פיזיים, מבוססי דיבור או חזותיים. כמעצבים דיגיטליים או בוני אתרים, אתם אחראים להפוך את הפרויקטים שלכם לנגישים גם עבור אוכלוסיות אלו.
חשוב לציין כי נגישות יכולה להועיל גם לחסרי מוגבלות. לדוגמה, אנשים מבוגרים נוטים להתקשות בקריאת גופנים קטנים. ייתכן שהגולשים שלכם משתמשים במסכים קטנים, חיבורי אינטרנט איטיים או 'מוגבלות זמניות' כמו משקפיים שאבדו. תצטרך גם לקחת בחשבון 'מגבלות מצב' כמו גם סביבה רועשת.
ואם זה לא מספיק, בניית אתר נגיש היא כבר בגדר חובה ותעזור לכם לעמוד בסטנדרטים בינלאומיים רבים ולמזער סיכונים משפטיים. במילים אחרות, אי עמידה בסטנדרטים אלו עלולה להשאיר אתכם פתוחים לתביעות משפטיות.
לדוגמה, חוק האמריקנים עם מוגבלויות (ADA) הוא חוק בארה"ב האוסר על אפליה של אנשים עם מוגבלות. לפי הדו"ח של UsableNet לשנת 2020, תביעות אינטרנט ואפליקציות מבוססות ADA הוגשו אפילו במהלך מגפת הקורונה, והן הגיעו במהירות לשיעורי 2019 כבר במאי.
חשוב לחקור את הנחיות הנגישות עבור הקטגוריה וקהלי היעד של האתר, כדי להבטיח שהאתר שלכם תואם באופן מלא. כך למשל, אתרים ממשלתיים במגזר הציבורי נדרשים להקפיד על הנחיות מחמירות יותר מאשר בענפים אחרים.
סיבה נוספת לדאוג לאתר נגיש היא מנועי החיפוש. אתרים נגישים לרוב מדורגים גבוה יותר בתוצאות החיפוש וזמני הטעינה שלהם מהירים יותר. הפעלת אתר נגיש במיוחד היא גם דרך מושלמת לחזק את נוכחות המותג, למשוך יותר מבקרים ולשפר את חווית הלקוח הכוללת.
עקרונות עיקריים לנגישות באינטרנט
התוכן שלכם צריך להיות ברור
אתר האינטרנט מכיל לעיתים מידע רב שאנו מעוניינים שיעבור לגולש בדרך כלל באמצעות חוש הראייה, ניתן לקרוא את הטקסט, להבין את פריסת העמוד ולהבין את המשמעויות של מילים וצבעים בהקשרים שונים.
עם זאת, כאשר המשתמשים שלכם אינם יכולים לסמוך על הראייה, צריכות להיות דרכים חלופיות עבורם לעבד את המידע באתר באמצעות כתוביות ותחליפים אחרים לרכיבי מולטימדיה.
טכנולוגיות מסייעות יכולות להיות שימושיות מאוד מבחינה זו. לדוגמה, קוראי מסך כמו תוכנת NVDA יכולים לדאוג להמרת הטקסט שלכם לאודיו. עם זאת, תחילה עליכם לוודא שהאתר שלכם מעוצב תוך מחשבה על נגישות. רק אז תוכלו לנצל באופן מלא את הפונקציונליות הנוספת שמציעים מוצרי עזר אלה.
תפעול נגיש של ממשק המשתמש (UI)
בין אם משתמשים יכולים לקיים אינטראקציה עם האתר שלכם באמצעות מקלדת או עכבר, או שיש להם העדפה אישית לשיטות חלופיות, תרצו להתאים את תפעול האתר שלכם לכמה שיותר אפשרויות על מנת להבטיח ניווט יעיל באתר.
לדוגמה, תמיכה בניווט במקלדת הופכת את התוכן לנגיש על ידי מכשירים המחקים מקלדות. נרצה גם לאפשר למשתמשים מספיק זמן להשלים משימות. לדוגמה, יש לתת להם זמן מספיק לקריאת הודעות אישור לפני טעינת הדף מחדש.
נושא זה קצת בעייתי מבחינת חלק מהאתרים המאובטחים כו בנקים למשל או אתרים הספקים שירותי מבחנים, במקרים אלו ניתן ליצור מגבלות זמן מותאמות אישית עבור משתמשים שונים.
תכונות חשובות שניתן לספק בנושא זה כוללות חיפוש באתר, מפות אתרים וקישורי "דילוג על ניווט". בנוסף, חשוב להבטיח שמבנה התוכן ניתן לתפיסה בקלות, על ידי שימוש נרחב באלמנטים סמנטיים וברווחים.
גופנים וניהול צבעים
בני אדם מתקשרים בעיקר באמצעות שפה מילולית או כתובה, והדרך הטובה ביותר להבטיח שהטקסטים שלכם מובנים היא באמצעות גדלי גופן וניגודי צבעים מתאימים. כמו כן, יש לספק למשתמשים משוב פשוט כדי שיוכלו להימנע ולתקן טעויות. חשוב גם שהניווט שלך יהיה ברור, עקבי וצפוי.
גורמים כמו רקע חינוכי, תרבות והיכרות עם הנושא יכולים להשפיע על יכולת האדם להבין קטע תוכן נתון. לכן, נרצה להקפיד להשתמש במילים פשוטות, המסבירות כל מידע רקע הנדרש כדי להטמיע מספיק פיסת תוכן. רצוי לשקול גם להפוך תוספי טקסט לזמינים, כגון קבצי אודיו, סרטונים, איורים ועוד.
ודאו שהאתר שלכם מספק התאמה
הטכנולוגיות ממשיכות להתפתח, וחשוב שהאתר יעמוד בקצב. קחו בחשבון שעדיין יש גולשים שניגשים לאתר עם מערכות הפעלה ודפדפנים שונים, אפילו מיושנים. האתר עדיין צריך לעבוד עבור כולם (או כמה שיותר), והגולשים ירצו להיות מסוגלים לבחור או להתאים אישית את הטכנולוגיות שלהם כדי לענות על הצרכים שלהם.
אחת הדרכים לבנות אתר שמספק מספיק התאמה היא לבנות אותו באמצעות כלים וטכניקות מודרניות. הדבר מצריך בהירות ותכנון קפדני בשלב הפיתוח. לדוגמה, נרצה להשתמש בסימון הנכון עבור תוכן ולכלול שמות, תפקידים וערכים מתאימים עבור רכיבים.
כדי להכיל כמה שיותר משתמשים, נשקול להגדיר דרישות הבסיס לשימוש באתר.
לדוגמה, ייתכן שנבחר לתמוך בגרסאות דפדפן ישנות יותר עד מגבלה מסוימת. כדאי גם לשקול לאמת את האתר מול תקנים טכניים – כמו שימוש במאמת הסימון של W3C .
סטנדרט הנגישות של האתר
כל אחד מארבעת עקרונות הנגישות המפורטים לעיל ניתן למדוד באמצעות רמת קריטריונים:
- רמה A: דרישת המינימום לנגישות
- רמה AA: רמת נגישות בינונית או טובה
- רמה AAA: תקן הזהב של נגישות
הבטחת רמת הנגישות הנמוכה ביותר על ידי הסרת המכשולים המשמעותיים ביותר עומדת בדרישת המינימום. עם זאת, שתי הרמות הבאות לאחר מכן תשפר יותר ויותר את חווית המשתמש (UX) עבור אלה עם וללא מוגבלויות. מה גם שרמה AA הפכה להיות דרישת סף לאתרים עסקיים בישראל.
נקודות מפתח לבדיקת נגישות
כעת, נרצה נסקור מספר שיטות עבודה מומלצות להטמעה בפרויקטים שלכם.
למרות שעיצוב מתוך מחשבה על נגישות יכול להיראות מסורבל במבט ראשון, אחד עשר העצות האלה יכולות להקל על הגולשים שלכם.
ניגודיות צבע
ניגודיות צבע היא מדד להפרשים הנראים בבהירות בין שני צבעים. הבדל זה מתבטא כיחס, והוא נע בין 1:1 ל-21:1. לדוגמה, לירוק טהור יש יחס של 1.4:1.
הנחיות WCAG מספקות שלושה קריטריונים להצלחה להבטחת ניגודיות צבע נאותה. למרבה המזל, ישנם כלים רבים שיעזרו לכם לבדוק יחסי ניגודיות עבור האלמנטים השונים באתר שלך.
פלאג אין של כרום שיעשה את העבודה הוא Color Contrast Analyzer שיחשב עבורכם את כמת הניגודיות ואף יתאים אותה לרמת הדירוג מול ה-WCAG.
כלי נוסף מצוין הוא ה Accessible color palette builder שמאפשר לכם ליצור ערכות צבע ולבדוק אותן.
אל תסתמכו על צבע בלבד בעת מתן מידע חשוב
למרות שחשוב להבטיח ניגודיות נאותה בתוכן האתר, צבע יכול להיתפס בצורה שונה על ידי אנשים עם מוגבלויות. לכן, זה לא אמור להיות הרמז היחיד המשמש להצגת מידע חשוב. בעת עיצוב טפסים, נרצה לזהות שדות נדרשים ומצבי שגיאה באמצעות סמלים או כיתובים תומכים, בנוסף לצבעים מנוגדים.
כדי להדגיש אלמנטים אינטראקטיביים כגון קישורים בתוך טקסט, יש להוסיף רמזים חזותיים כמו משקלי גופנים או סגנון טקסט בקו תחתון.
הבליטו את האלמנטים האינטראקטיביים
נרצה לאפשר לגולשים באתר לתפעל אותו באמצעים שונים, כגון באמצעות עכבר, מקלדת או קורא מסך. אחת הדרכים להשיג זאת היא באמצעות סגנונות שונים עבור אלמנטים אינטראקטיביים כגון קישורים וכפתורים. אלה צריכים להיות קלים לזיהוי, והגולשים צריכים להיות מסוגלים להבין במבט חטוף אילו אלמנטים נמצאים בפוקוס או ניתנים ללחיצה.
בספריית Bootstrap נתנו דגש גודל על השוני בין הכפתורים השונים וניתן לקחת משם דוגמאות.
הוסיפו תוויות טקסטואליות עבור קלט ורכיבי טופס
אני מסכימה שזה נראה פחות טוב מ Place holder אך יש לוודא שלשדות ורכיבי טופס יש תוויות טקסטואליות ברורות המשויכות אליהם וממוקמות בסמוך אליהם.
המיקום המדויק יהיה תלוי בכיוון הכתיבה של השפה. עבור שפות מימין לשמאל, תוויות שדות הטופס ממוקמות בדרך כלל בצד ימין או מעל הקלט. החריג לכך הוא תיבות סימון ולחצני בחירה, כאשר התווית ממוקמת בצד שמאל.
ספקו עקביות לניווט באתר
הניווט באתר יכול גם למלא תפקיד מפתח בנגישות שלו. נרצה להבטיח שהוא יישאר עקבי מבחינת שמות, פריסה וסגנון. כל פריט ניווט צריך להיות קל לגישה וליצירת אינטראקציה איתו. חשוב גם לספק תכונות חלופיות כגון חיפוש באתר או מפת אתר.
אופציה שקיימת להסביר לגולש היכן הוא נמצא למשל היא באמצעות פירורי לחם או כותרות ברורות. ניווט עקבי יכול גם לשפר משמעותית את ה-UX של האתר עבור כל מי שיש לו קשיים קוגניטיביים.
תנו משוב ברור ואינפורמטיבי
חשוב שהגולשים יקבלו משוב ברור מהאינטראקציות שלהם.
לדוגמה, נרצה להציג הודעות אישור עבור פעולות חשובות, לדוגמה כאשר טופס הושלם או עיבוד תשלום. בנוסף, התראות יכולות להועיל ליידע את המשתמשים על שגיאה במערכת.
ניתן לראות דוגמה לסגנון הודעות ממערכת Carbon Design System של IBM
ארגון תוכן בצורה ויזואלית עם כותרות וריווח
דרך נוספת לשפר את ה-UX של אתרי האינטרנט ויישומי האינטרנט היא ליצור תוכן הניתן לסריקה. מה שיהפוך את האתר לקל יותר להבנה, ויפחית עומס קוגניטיבי. ניתן להשתמש בשטח לבן ובכותרות לארגון תוכן בקבוצות רלוונטיות.
בנוסף, רווח לבן שימושי ליצירת קשרים ברורים בין כותרות ופסקאות.
צרו עיצוב רספונסיבי
כיום, עיצוב רספונסיבי אינו אופציה – זה הכרחי אחרת תאבדו גולשים והמרות.
מבחינת נגישות זהו צורך קריטי – האתר אמור לעבוד היטב ולהיראות טוב בגדלים שונים של מסכים ובמכשירים שונים, כולל מחשבים שולחניים, טאבלטים וטלפונים ניידים.
ניתן לבצע התאמות של גדלי טקסט , פריות שונות, תמונות ייעודיות לניידים או טאבלטים.
בצגים גדולים יותר, ניתן להשתמש בטקסט קטן, במספר עמודות עבור התוכן הראשי ואפשרויות ניווט שתמיד גלויות. לעומת זאת, מסכים קטנים יותר עשויים להפיק תועלת מטקסט גדול יותר, עמודות בודדות עבור התוכן הראשי ואפשרויות ניווט שנשארות מוסתרות עד שהן יופעלו על ידי תכונה כגון סמל ההמבורגר.
צרו חלופות טקסטואליות לתמונות ומדיה
לתמונות ולתוכן מולטימדיה אמורות להיות חלופות עבור הגולשים.
דוגמאות לכך הן שימוש בכתוביות טקסטואליות לתמונות, כולל תמלול לתוכן אודיו או וידאו.
דוגמאות לחלופות טקסטואליות לתמונות מ-Equal Access Toolkit של IBM:
רצוי גם לספק גרסאות אודיו של תוכן וידאו עבור הגולשים העיוורים, כמו גם כיתובים ותיאורים לטבלאות וגרפים.
צרו פקדים להפעלה אוטומטית של תוכן
אם האתר שלכם כולל תוכן המתנגן אוטומטית כגון סרטונים, קובצי אודיו או גלריות מדיה, רצוי להקפיד לכלול פקדים גלויים שיאפשרו לגולש להפעיל, לעצור או לעבור בין פריטים שונים באופן ידני.
דוגמה נפוצה להפעלה אוטומטית של תוכן היא הקרוסלה (Slider) – יש לכלול חצים שמאלה וימינה, ולוודא שהם ניתנים להפעלה באמצעות מקלדת. פעולה זו תבטיח שניתן להשתמש במקלדות, בקוראי מסך ובתוכנות קלט קוליות כדי לנווט בקלות במצגות.
תמיכה בניווט מקלדת
פעולה זו היא חלק מכריע בנגישות האתר, מכיוון שמשתמשים רבים שאינם מסוגלים להשתמש בעכבר יהיו תלויים במקלדות שלהם כדי לנווט בתוכן האתר.
אלה עם מוגבלות מוטורית או ראייה המסתמכים על קוראי מסך, כמו גם גולשים מבוגרים צריכים תמיכה בניווט על ידי מקלדת.
הדבר חשוב לבדוק הוא שלחיצה על TAB במקלדת מגיעה ללחצנים והתכנים השונים על פי הסדר הלוגי שלהם באתר.
תחזוקת נגישות באתר
במאמר זה נסקרו טכניקות שימושיות ליישום נגישות אינטרנט בעת עבודה על פרויקט חדש. עם זאת, חשוב גם לבדוק ולשפר את האתר הקיים באופן קבוע, והנה כמה דרכים לעשות זאת:
סטארט אפ בשם accessible מציע בדיקת נגישות לאתר עם אפשרות לקבל דמו חינמי ל 7 ימים הכולל הפקת דוח מצב על האר שלכם.
בנוסף, ישנם מספר תוספי נגישות שיכולים לעזור לעמוד בחלק מדרישות הנגישות כמו Enable ו wpaccessibility.
נגישות באתרי וורדפרס עם אלמנטור
אלמנטור יצרה שיפורי נגישות באזור הניסויים שלה (הגדרות ומתקדם) שכוללות תכונות alt ותוויות ARIA, יצירת טפסים נגישים, הבטחת ניגודיות צבע מספקת ועוד.
כלים וספריות מידע נוספים שרצוי לבקר בהם:
רוצים שנבדוק ונבצע לכם התאמה לנגישות ?
בשמחה. אנו עוברים על האתר באמצעות הכלים המתקדמים שנו, בודקים את המערכת בה נבנה האתר, כשלים שלה ומבצעים התאמות.
בנוסף, אנו מתקינים לכם תוסף מתקדם לביצוע נגישות, עורכים לכם הצהרת נגישות ומתקינים באתר ונותנים לכם הדרכה (בזום) על תפעול נכון של האתר.
מלאו את הטופס ונשמח לעמוד לרשותכם.
