הנגשת אתר היקב – הדרך שלי להביא עוד יותר לקוחות

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

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

נכון?

אז זהו, שלא!

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

נכון?

גם פה, התשובה היא לא בדיוק.

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

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

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

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

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

אז איך אתה מוודא שהאתר שלך לא מונע ממשתמשים בעלי מוגבלויות לגשת לתוכן שלך?

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

הנחיות אלו יעזרו לך לנקוט את הצעדים הראשונים שלך כדי לוודא שהאתר שלך נגיש לכולם.

זהו לא המדריך השלם להנגשת אתרים, לא ולא, זוהי רק ההתחלה.

הנגשת אתרים זה עולם מלא שעליו תוכל לקרוא כאן.

ודא שהטקסט באתר שלך קריא

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

ישנם שני דברים שכדאי לשים לב אליהם בעת עיצוב הטקסט עבור האתר שלך: ניגודיות ו- גודל.

אבל לפני שניגש לנושא הניגודיות, אני רוצה להפנות את תשומת ליבך לצבע.

הידעת? 10% מהגברים בישראל הם עיוורי צבעים ברמה כזאת או אחרת!

הידעת? נשים אינן עיוורות צבעים, אלא אם חלו המחלה, אבל זה נתון ממש זניח!

בדיקת ראייה לעיוורון צבעים

לוחצים על Start Test ומתבקשים לזהות את המספרים המוצגים על פני המסך. ככל שמתקדמים, הקושי גדל ובסוף תדע האם אתה עיוור צבעים או לא – כמה פשוט וקל.

ניגודיות

הכוונה במושג ניגודיות היא עד כמה בולט הטקסט לעומת הרקע על הוא מוצג.

שחור על גבי לבן – זה הניגודיות הטובה ביותר, אבל האתר שלך לא חייב להיראות כולו שחור על לבן.

בטוח שגופן אפור בהיר על רקע לבן נראה מגניב, אבל זה לא קריא למי שיש לו בעיה ואפילו קלה בראייה.

ההנחיות לנגישות תוכן אינטרנט שפורסמו על ידי ה- WAI וה- W3C מחייבות יחס ניגודיות של 4.5:1 עבור טקסט רגיל (14pt או גדול יותר) ו- 3:1 עבור טקסט גדול (18pt או גדול יותר).

הנחיות צבע אלה מסייעת לאנשים עם עיוורון צבעים או ראייה ירודה לגלוש באינטרנט ולהבחין בגוונים.

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

גודל גופן

כמות נכבדת של גולשים מתקשה לקרוא משהו אם הגופן קטן מ- 14pt על גבי מסך.

אמנם אין תקן רשמי, אבל מומלץ 16pt כגודל הגופן שטוב להתחיל ממנו עבור תוכן באתר.

הערה: מידות באתר אינטרנט אפשר לציין ב- px עבור pixels  או ב- pt עבור points. בדרך כלל משתמשים ב- px לציין מירווחים בין אלמנטים בדף וב- pt לציון גופנים, אבל… אפשר לציין גודל גופן גם כן במידות px ולכן 14pt שווה ל- 18.67px ו- 16pt שווה ל- 21.33px

כלי שיעזור לך לעבור בין px ל- pt ולהיפך.

איך תדע מה גודל הפונט, כל פונט אצלך באתר?

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

לחיצה ימנית בעכבר ובחר בדוק רכיב
גודל גופן

אין להסתמך על צבע כדי להעביר מידע חשוב

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

יש צבעים "קרים" ויש צבעים "חמים", יש צבעים שמסמלים שלווה (כחול) או אסור (אדום), מותר / אפשרי (ירוק) והרשימה עוד ארוכה. כל זה טוב ויפה אם אתה רואה, ומה לגבי מי שלא רואה כמוך?

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

לקו תחתון באינטרנט יש מקום והוא לציין שהטקסט הוא קישור ולחיצה עליו תפנה אותך למקום אחר בדף או לדף אחר.

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

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

האם אתה רואה את אמצעי הניווט בדף מלבד הכותרות? אם אתה מתקשה להבחין בין השניים, ייתכן שיהיה עליך לחשוב מחדש על אסטרטגיית העיצוב שלך.

מטב תמונות עבור קוראי מסך

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

תוכנות מסוג קוראי מסך לא "מבינות" מה יש בתמונה. כדי שיבינו יש ליצור תיאור טקסטואלי לכל תמונה.

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

אי שם בשנותיה הראשונות של האינטרנט, התקשורת היתה מאוד אבל מאוד איטית.

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

מה שקבע את מהירות טעינת האתר אז וגם היום הוא התמונות. לכן, בדפדפנים של פעם: Netscape, Chamilion, Internet Explorer היתה אפשרות לטעון את האתר ללא תמונות, כדי שייטען מהר.

ומה להציג במקום התמונה? טקסט, וכך נולד המאפיין alt מהמילה alternative של תגית התמונה img

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

יש לכך שדה מיוחד, האמת היא שיש שניים: האחד נקרא "תיאור חלופי" זה המאפיין alt ויש שדה הנקרא "כותרת" שהוא המאפיין title.

מילוי המאפיין alt הוא חובה ככול שזה נוגע לנגישות.

אז מה כותבים בשדה alt?

בשדה alt כותבים את תיאור המילה באופן תמציתי ומשתדלים שלא להעמיס מילות מפתח ללא צורך.

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

לסיכום

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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *