בסדר, הבנו את הצורך בפיתוח אתרים בסטנדרטים החדשים כמו כן הבנו את הצורך בפיתוח אתרים נגישים ועכשיו מה עושים?
במאמר זה אתייחס למספר נקודות (לא לכולן) באמצעותן ללא מאמץ ניכר נהפוך אתר אינטרנט קיים לאתר אינטרנט נגיש בהתאמה לסטנדרטים החדשים.
הפרדת העיצוב מהתוכן
ראשית נפריד את העיצוב מהתוכן. קוד הדף יכיל בעיקרון קוביות תוכן (DIV, SPAN ...) נטולות עיצוב. העיצוב יגיע מ קובץ CSS בו נגדיר מיקומים של אלמנטים, גדלים, צבע, תמונות שאינן קשורות לתוכן וכ"ו. יש חשיבות רבה לסדר קוביות התוכן שכן דפדפנים של עיוורים, מנועי חיפוש או סתם אנשים שהגדירו גלישה ללא CSS יצפו בתכנים בצורה לינארית.
הצהרת סוג מסמך
בראש המסמך נציין מה סוגו (DOCTYPE), הוא יכול להיות 4.01 HTML , 1.0 XHTML הוא יכול להיות STRICT או TRANSITIONAL מה שחשוב הוא שתהיה התאמה בין ההצהרה למבנה הדף.
הגדרת שפה ו CHARSET
זו הגדרה חשובה תמיד אך חשובה כפליים כאשר גולש עיוור גולש בעזרת דפדפן שמקריא לו את הטקסט.
שימוש באותיות קטנות
קוד ובו תגיות ששמן כתוב באותיות גדולות לא יעבור ולידציה.
קוד תקין
קוד תקין ובכלל זה: סגירת תגיות, שימוש במרכאות לכל הפרמטרים וסגירת תגיות שבעבר לא היו זקוקות לסגירה כגון - BR , INPUT וכ"ו.
שימוש מושכל באלמנטים של HTML
שימוש באלמנטים של HTML למטרה שלשמן נוצרו. תם עידן שימוש בטבלאות לעימוד הדף, מעכשיו נשתמש בטבלאות לתצוגת נתונים טבלאיים. נשתמש ברשימות להצגת תפריטים ובכותרות להצגת כותרות.
שימוש בתגיות מונחות תוכן ולא תגיות מונחות עיצוב
בעוד שהתגיות BOLD ו STRONG מציגות תצוגה ויזואלית זהה, דפדפן של עיוור יתעלם לחלוטין מתגית ה BOLD ואילו את תגית ה STRONG יקריא בהדגשה. אותו דבר יתרחש כאשר ניתן לכותרת רק הגדרות גראפיות ב CSS. לעומת זאת אם נשתמש בתגיות הכותרת 1-6 H ולהן נוסיף עיצוב בCSS נקבל ערך מוסף גם ברמת הנגישות וגם בתהליך האופטימיזציה ל מנועי חיפוש.
קישורים
קישור זקוק ל TITLE שמתאר את פעולת הקישור, בעיקר אם פעולתו היא לא טריוויאלית.
הקפצות מעל אזורי תפריטים ו/ או תוכן
בעוד שאנו יכולים בקלות להתעלם מטבלה מורכבת ולא מעניינת, אנו גם לא קוראים את התפריטים בכל דף מחדש, עיוור לא יכול לעשות כן ללא עזרה מצידינו שכן הדפדפן מקריא את כל התוכן באופן ליניארי לכן במידת האפשר, כדאי לספק קישור המאפשר דילוג על תפריטים ואזורי תוכן מסוימים.
ALT
חשוב מאוד להשתמש בטקסט החלופי בצורה נכונה. כאשר לתמונה יש משמעות נא לציין זאת בטקסט החלופי. לתמונות חסרות משמעות יש להשאיר ALT ריק אבל בשום מקרה לא לבטל את פרמטר ה ALT, אם נבטל אותו נדון את העיוור למעבר מעיק על תמונות אלו כאשר הדפדפן מקריא את שמות הקבצים. בתמונות מפוצלות נכניס טקסט חלופי לתמונה הראשונה ונשאיר טקסטים חלופיים ריקים בשאר חלקיה.
LONGTEXT
תאור ארוך משמש כאשר צריך הסבר רציני יותר לגרף למשל.
טבלאות
כאשר מציגים נתונים טבלאיים אכן משתמשים בטבלאות, כדי שהאתר יהיה נגיש, נספק טקסט המתאר בקצרה את הטבלה ונוסיף TH לתאר את העמודות והשורות.
טפסים
לכל שדה בטופס צריך להיות ID ובהתאמה לכל שדה צריך להיות LABLE תואם לאותו ID. הגשת טופס תתבצע רק באמצעות כפתור. לכל שדה טקסט צריך להיות ערך ברירת מחדל (כאן עלי להסתייג, מבחינת הממשק מדובר בהגדרה בעייתית משום שהמשתמש עלול לפספס את השדה הזה- יש פתרונות JAVASCRIPT אבל גם הם לא אידיאלים). לרשימות בחירה חייב להיות ערך ראשון ולידי, לא ניתן יותר להכניס לרשימת הבחירה "בחר עיר" כערך ראשון (גם כאן יש הסתייגות כמו בסעיף הקודם). לכל קבוצת כפתורי רדיו או CHECKBOX צריך להיות FIELDSET שמאגד אותם.
בחירת צבעים וקונטרסטים
10% מהגברים הם עיוורי צבעים. כדאי לעשות בדיקה לעיצוב האתר כדי שלא יתנגש בצרכים אלו. כדאי גם לבדוק את הקונטרסט בין הרקעים לטקסטים כדי לוודא שהם יהיו קריאים גם לכבדי ראייה.
גלישה באמצעות מקלדת
משתמשים רבים גולשים באמצעות מקלדת בלבד, אם בגלל קשיים מוטורים ואם מסיבות אחרות. כדאי לספק לדפים TAB INDEX כדי לאפשר להם לעשות זאת בקלות.
הגדרות גודל לפונטים
כאשר מגדירים את גדלי הפונטים ב CSS כדאי להגדיר אותם באופן יחסי לדף ולא בפיקסלים. כאשר הגדלים מוגדרים אבסולוטית, כבד ראייה לא יוכל להגדיל אותם דרך הגדרות הדפדפן.
אנימציה
כדאי להימנע מריצודים שעלולים לגרום להתקפים אפילפטים אצל אנשים מסוימים. באופן כללי אם רוצים להשתמש באנימציה כדאי לאפשר לגולש לעצור אותה. אותו כלל אצבע כדאי גם ליישם על מוסיקה באתר עצירת המוסיקה לא קשורה אומנם להנגשה אבל גולשים רבים ואני בתוכם מתעצבנים ממנה.
לסיכום:
לא פשוט, צריך זמן להתרגל לצורת העבודה הזו אבל ראוי וכדאי.
במאמר זה אתייחס למספר נקודות (לא לכולן) באמצעותן ללא מאמץ ניכר נהפוך אתר אינטרנט קיים לאתר אינטרנט נגיש בהתאמה לסטנדרטים החדשים.
הפרדת העיצוב מהתוכן
ראשית נפריד את העיצוב מהתוכן. קוד הדף יכיל בעיקרון קוביות תוכן (DIV, SPAN ...) נטולות עיצוב. העיצוב יגיע מ קובץ CSS בו נגדיר מיקומים של אלמנטים, גדלים, צבע, תמונות שאינן קשורות לתוכן וכ"ו. יש חשיבות רבה לסדר קוביות התוכן שכן דפדפנים של עיוורים, מנועי חיפוש או סתם אנשים שהגדירו גלישה ללא CSS יצפו בתכנים בצורה לינארית.
הצהרת סוג מסמך
בראש המסמך נציין מה סוגו (DOCTYPE), הוא יכול להיות 4.01 HTML , 1.0 XHTML הוא יכול להיות STRICT או TRANSITIONAL מה שחשוב הוא שתהיה התאמה בין ההצהרה למבנה הדף.
הגדרת שפה ו CHARSET
זו הגדרה חשובה תמיד אך חשובה כפליים כאשר גולש עיוור גולש בעזרת דפדפן שמקריא לו את הטקסט.
שימוש באותיות קטנות
קוד ובו תגיות ששמן כתוב באותיות גדולות לא יעבור ולידציה.
קוד תקין
קוד תקין ובכלל זה: סגירת תגיות, שימוש במרכאות לכל הפרמטרים וסגירת תגיות שבעבר לא היו זקוקות לסגירה כגון - BR , INPUT וכ"ו.
שימוש מושכל באלמנטים של HTML
שימוש באלמנטים של HTML למטרה שלשמן נוצרו. תם עידן שימוש בטבלאות לעימוד הדף, מעכשיו נשתמש בטבלאות לתצוגת נתונים טבלאיים. נשתמש ברשימות להצגת תפריטים ובכותרות להצגת כותרות.
שימוש בתגיות מונחות תוכן ולא תגיות מונחות עיצוב
בעוד שהתגיות BOLD ו STRONG מציגות תצוגה ויזואלית זהה, דפדפן של עיוור יתעלם לחלוטין מתגית ה BOLD ואילו את תגית ה STRONG יקריא בהדגשה. אותו דבר יתרחש כאשר ניתן לכותרת רק הגדרות גראפיות ב CSS. לעומת זאת אם נשתמש בתגיות הכותרת 1-6 H ולהן נוסיף עיצוב בCSS נקבל ערך מוסף גם ברמת הנגישות וגם בתהליך האופטימיזציה ל מנועי חיפוש.
קישורים
קישור זקוק ל TITLE שמתאר את פעולת הקישור, בעיקר אם פעולתו היא לא טריוויאלית.
הקפצות מעל אזורי תפריטים ו/ או תוכן
בעוד שאנו יכולים בקלות להתעלם מטבלה מורכבת ולא מעניינת, אנו גם לא קוראים את התפריטים בכל דף מחדש, עיוור לא יכול לעשות כן ללא עזרה מצידינו שכן הדפדפן מקריא את כל התוכן באופן ליניארי לכן במידת האפשר, כדאי לספק קישור המאפשר דילוג על תפריטים ואזורי תוכן מסוימים.
ALT
חשוב מאוד להשתמש בטקסט החלופי בצורה נכונה. כאשר לתמונה יש משמעות נא לציין זאת בטקסט החלופי. לתמונות חסרות משמעות יש להשאיר ALT ריק אבל בשום מקרה לא לבטל את פרמטר ה ALT, אם נבטל אותו נדון את העיוור למעבר מעיק על תמונות אלו כאשר הדפדפן מקריא את שמות הקבצים. בתמונות מפוצלות נכניס טקסט חלופי לתמונה הראשונה ונשאיר טקסטים חלופיים ריקים בשאר חלקיה.
LONGTEXT
תאור ארוך משמש כאשר צריך הסבר רציני יותר לגרף למשל.
טבלאות
כאשר מציגים נתונים טבלאיים אכן משתמשים בטבלאות, כדי שהאתר יהיה נגיש, נספק טקסט המתאר בקצרה את הטבלה ונוסיף TH לתאר את העמודות והשורות.
טפסים
לכל שדה בטופס צריך להיות ID ובהתאמה לכל שדה צריך להיות LABLE תואם לאותו ID. הגשת טופס תתבצע רק באמצעות כפתור. לכל שדה טקסט צריך להיות ערך ברירת מחדל (כאן עלי להסתייג, מבחינת הממשק מדובר בהגדרה בעייתית משום שהמשתמש עלול לפספס את השדה הזה- יש פתרונות JAVASCRIPT אבל גם הם לא אידיאלים). לרשימות בחירה חייב להיות ערך ראשון ולידי, לא ניתן יותר להכניס לרשימת הבחירה "בחר עיר" כערך ראשון (גם כאן יש הסתייגות כמו בסעיף הקודם). לכל קבוצת כפתורי רדיו או CHECKBOX צריך להיות FIELDSET שמאגד אותם.
בחירת צבעים וקונטרסטים
10% מהגברים הם עיוורי צבעים. כדאי לעשות בדיקה לעיצוב האתר כדי שלא יתנגש בצרכים אלו. כדאי גם לבדוק את הקונטרסט בין הרקעים לטקסטים כדי לוודא שהם יהיו קריאים גם לכבדי ראייה.
גלישה באמצעות מקלדת
משתמשים רבים גולשים באמצעות מקלדת בלבד, אם בגלל קשיים מוטורים ואם מסיבות אחרות. כדאי לספק לדפים TAB INDEX כדי לאפשר להם לעשות זאת בקלות.
הגדרות גודל לפונטים
כאשר מגדירים את גדלי הפונטים ב CSS כדאי להגדיר אותם באופן יחסי לדף ולא בפיקסלים. כאשר הגדלים מוגדרים אבסולוטית, כבד ראייה לא יוכל להגדיל אותם דרך הגדרות הדפדפן.
אנימציה
כדאי להימנע מריצודים שעלולים לגרום להתקפים אפילפטים אצל אנשים מסוימים. באופן כללי אם רוצים להשתמש באנימציה כדאי לאפשר לגולש לעצור אותה. אותו כלל אצבע כדאי גם ליישם על מוסיקה באתר עצירת המוסיקה לא קשורה אומנם להנגשה אבל גולשים רבים ואני בתוכם מתעצבנים ממנה.
לסיכום:
לא פשוט, צריך זמן להתרגל לצורת העבודה הזו אבל ראוי וכדאי.
