הנחיות ואסטרטגיות ללמידה


*
index * search *  visitor center *


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

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

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

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

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

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

  • שקול מצב מוגדר של מסך:
    הצב מידע חשוב בצד שמאל ולמעלה
    אל תסיק לגבי רזולוציה
  • אפשר סריקה נוחה: רוב הצופים (כ- 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
  • בחן טקסטים אופציונאליים וגודל חלונות

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

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

One service is located at the W3C HTML Validation Service checks documents like HTML and XHTML for conformance to W3C Recommendations and other standards
http://validator.w3.org

References:

Australian Lawlink of New South Wales standards of accessibility

Bobby WorldWide http://www.cast.org/bobby/
is a tool for Web page authors.
It helps them identify changes to their pages so users with disabilities can more easily use their Web pages.

Dr. Watson http://watson.addy.com/
Dr. Watson is a free service to analyze your web page on the Internet. You give it the URL of your page and Watson will get a copy of it directly from the web server. Watson can also check out many other aspects of your site, including link validity, download speed, search engine compatibility, and link popularity.

Search Engine Optimization (SEO) and Web Accessibility
a paper (.pdf file) discussing how the W3C accessibility guidelines are used to improve performance in search engines. It points out how to use each checkpoint and is an attempt to persuade optimizers to make the W3C guidelines standard practice in SEO.

Great Britain's Royal National Institute for the Blind
http://www.rnib.org.uk/digital/hints.htm

Human Factors International on accessibility:
http://www.humanfactors.com/accessibility/default.asp

National Cancer Institute's Web Design and Usability Guidelineshttp://www.usability.gov/guidelines/

Accessible web design articles by Carmen Mardiros

WebAIM Web Accessibility In Mind

W3C's HTML validator validator.w3.org
The W3C validator is free to use, up to date, and an official source for standards specifications. Checks cross-platform HTML and removes proprietary browser tricks from your site.

Web Design Group
http://www.htmlhelp.com/design/accessibility/tips.htm


הגרסא העברית תורגמה על ידי מוניקה ולק. ניתן להפנות שאלות ל- info@shipur.co.il

או ליוצר האתר ג'ו לנדסברגר ב- info@studygs.net

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

Help build the Guides: donate through our secure Paypal account
Additional strategies of support

Joe's professional and personal webpages