קריאה היא עבור השכל מה שהתעמלות היא לגוף. ריצ'רד סטיל, אנגלי 1672 - 1729

סדרת האינטרנט

עיצוב אתר נוח לגישה

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

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

להלן המחשה מדוע דרוש לאתר אינטרנט עיצוב נוח לגישה, ומדוע נוצר המדריך הזה:

ענה על כמה שאלות בסיסיות:

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

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

• שקול מצב מוגדר של מסך:
  הצב מידע חשוב בצד שמאל ולמעלה
  אל תסיק לגבי רזולוציה
• אפשר סריקה נוחה: רוב הצופים (כ- 75% ) סורקים טקסטים בחיפוש מידע (ומתעלמים וגראפיקה – פחות מ-20% קוראים מילה במילה)
• קבע סטנדרט של מצגת וגלישה: מקם לוגו, תפריט ופריטים אחרים באופן עקבי וצפוי
  בדפים ארוכים הוסף קישור "חזרה למעלה"
  הוסף קישורים לתוכן עם כתובת URL
  צמצם חללים ריקים בתפריטים ותוכן עניינים
• בנה תוכן מורכב באמצעות דפים קשורים בקישורים
  יש לקשור מקסימום 2-3 דפים – לא יותר
• גולש צריך תמיד צריך לדעת איכן הוא נמצא וכיצד לחזור למקום קודם
• צור טקסטים קלים לקריאה (ראה "כתיבה באינטרנט")
  השתמש באופן חופשי בכותרות,תת-כותרות וסימני הפרדה
  הפרד בלוקים של טקסט בחלל לבן
  אל תמלא את המסך בטקסט. מרכז את הטקסט, השתמש בפסקאות.

גופנים: השתמש בגופן ברירת מחדל או גופן סטנדרט"
תצוגת גופנים משתנה ביחס לגודל המסך, רזולוציה והגדרות הדפדפן. הגופנים שעוצבו לתצוגה באינטרנט הם: Georgia (serif), Trebuchet Verdana (sans serif). נותן להשתמש גם ב-
Times Roman (serif) and Helvetica and Ariel (sans serif)

לגישה מקסימאלית, רצוי לקבוע את גודל הגופן באופן יחסי ולא מוחלט. עם הגופן נקבע באופן מוחלט:
הגודל המינימאלי צריך להיות 10 (PC ) 12 (MACINTOSHׂ) "3" בינוני.
השתמש בגופן גדול יותר על מנת למשוך ילדים או אנשים מבוגרים.
מבוסס על:

Web Content Accessibility Guidelines (WCAG) published by the Web Accessibility Initiative (WAI) which is part of the World Wide Web Consortium (W3C).

• מחקרים מראים כי יש מעט הבדל במהירות הקריאה או העדפה בין גופנים
  Times Roman, Georgia, Helvetica, Verdana בגודל 10
• השתמש בסוג גופן אחד עבור הנחיות, הכוונות וגלישה, וגופן אחר עבור טקסט.
  אל תשתמש ביותר משני גופנים באתר אחד.
• המנע מיצירת פונטים חריגים (צבעוניים, מהבהבים, מעוצבים וכד')
  לרוב הם לא מוצגים נכון והם מאד מרגיזים.
  

השתמש בצבע באופן שקול

• הגדר את כל הצבעים (BGCOLOR, TEXT, LINK, VLINK, ALINK )
  או אף אחד מהם. "ללא" הוא ברירת מחדל להגדרות של הגולש.
  הגדרת חלק מן הצבעים בלבד מאפשר ברירות מחדש אצל אחרים. השילוב בין הצבעים המוגדרים שלך ואלו של הגולש יכולה להוליד צבעים מכוערים.
• השתמש בקונטרסט בולט בין רקע לטקסט. עדיף רקע בהיר וטקסט כהה.
• המנע מרקע שמחשיך את הטקסט
• השתמש בפלט עם 216 צבעים. צבעים אלו הם סטנדרטים לכל הדפדפנים:
  IE, Netscape, Opera, Lynx) and platforms (PC and Macintosh).
  אלו מוגדרים
  "#RRGGBB" (Red, Green, Blue) paired values (00, 33, 66, 99, CC, and FF)

גרפיקה:

• גודל התמונה אינו צרים לעבור את ה-75 פיקסלים לאינץ'. זהו הגבול המועבר טוב באינטרנט. כל גודל אחר יהיה כבד להורדה ללא שום יתרון ברזולוציה או איכות.
• השתמש ב-JPG לתמונות עם צבעים וצלליות וב-GIF לגרפיקה בצבעים קבועים
• ראה קוד אלטרנטיבי, טקסט לחלופה והסבר של הגרפיקה

HTML code, with <alt> designating the alternative text:
<img src="logo.gif" alt="Our company's logo"> Our company's logo replaces the image <img src="space.gif" alt="*"> or <img src="space.gif" alt="">A blank replaces this graphic place holder or decorative graphic

• המנע קביעת קישורים בגרפיקה ותמונות
  אם צריך, הוסף טקסט המתאם את טבע הקישור
• המנע מקביעת גרפיקה כטקסט, עיטורי או אחר
  לפעמים אין ממש ערך ויזואלי בהתחשב לגודל שהוזכר לעיל
• המנע משימוש בתמונות שקופות או צבעוניות single-pixel GIF ללא סיבה מספקת
  עבור אנשים שגולשים בלי להעלות גרפיקה דפים אלו הם חסרי ערך.

השתמש בטבלאות באופן מסורתי כדי לעצב ולהציג

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

קישורים:

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

המנע מ:

• מסגרות – השתמש באלטרנטיבה למסגרת
• JAVA ו- FLASH כמה שאפשר
• גרפיקה שאינה אומרת דבר או מסיחה את הדעת מהתוכן
• גרפיקה שקופצת, מסתובבת או זזה מבלי להיות הכרחית בהמחשת התוכן
• טקסט מתגלגל

הצג את הדפים שלך:

• על ידי שימוש סטינג שחור ולבן כדי לבחון גישה של צבעים
• על ידי מחיקת גרפיקה ותמונות כדי לבחון גישה לגולשים לא-ויזואליים או טכנולוגיה ללא גרפיקה
• בחן פלטפורמות (PC, Macintosh, Linux, etc.)
• בחן דפדפנים אלטרנטיביים ( (Internet Explorer, Netscape, Opera, Linus
• בחן טקסטים אופציונאליים וגודל חלונות

אתרים נבחנים ביכולת הגישה אליהם

בדוק את שרותי הערכה ואישור:

ראה גם:

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