נושאים פעיליםנושאים פעילים  הצגת רשימה של חברי הפורוםרשימת משתמשים  חיפוש בפורוםחיפוש  עזרהעזרה
  הרשמההרשמה  התחברותהתחברות RSS עדכונים
בניית אתרים
RSS UnderWarrior Forums : RSS בניית אתרים
נושא

נושא: סיכום הספר "נגישות באינטרנט" + קישורים

שליחת תגובהשליחת נושא חדש
כותב
הודעה << נושא קודם | נושא הבא >>
נאוה
פורומיסט על
פורומיסט על
סמל אישי

הצטרף / הצטרפה: 06 August 2006
מדינה: Israel
משתמש: מנותק/ת
הודעות: 1209
נשלח בתאריך: 01 February 2007 בשעה 18:41 | IP רשוּם
ציטוט נאוה

http://www.isoc.org.il/w3c-wai/webAccessibilityEbook.pdf

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


סיכום הספר: נגישות באינטרנט- מאת Joe Clark

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

הצהרה לדפדפן על סוג המסמך-  DOCTYPE
בלעדיו העמוד לא יקבל תוקף של הבודק.
validator.w3.org

אחד מנותני תוקף לא רשמיים:
HTMLHelp.com/tools/validator/

כדי לציין שינוי שפה צריך קודם כל לציין את השפה המקורית:
קוד:

<html lang="he">

קוד:

<html lang="he" xmlns="http://www.w3.org/1999/xhtml">

המומלצת:
קוד:

<html lang="he" xml:lang="he" xmlns="http://www.w3.org/1999/xhtml">

כדאי להשתמש בשתי האפשרויות.
עמוד 44

קבע תבניות עבור כל המסמכים העתידיים
שיכללו DOCTYPE
ומאפיין שפה בתוך האלמנט <html></html>

עמוד 50
סמן ציטוטים

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

הקפד לשים טקסט הסבר לתמונות ב alt

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

דף 2 שלי
לא לשנות חלון נוכחי מבלי להודיע למשתמש.

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

מקש tab
סרגל ניווט

מידע חשוב צריך לשים בהתחלה של הדף.

צריך לספק מידע על אוספי מסמכים.

עמוד 55
קוד שפה בכל תגית html

alt
טקסט אלט מסכם את התמונה בכמה מלים.
מומלץ להקפיד שטקסט אלט יהיה קצר.
מומלץ להגביל את אורך הטקסט אלט עד 1024 תווים שזה 1k

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

alt נותן מידע מינימלי וחיוני.
title מוסיף מידע שימושי ויכול להוסיף קצת פלפל.

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

 title=""

חשוב לשמור על עקביות בעמוד אחד.

עמוד 64
קישור חוזר לעמוד המקורי מהתמונה.

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

לתאור חצים אפשר להשתמש <><-  ->

דף 3 שלי

 עמוד 81
נגישות למונה כניסות

טקסט אלט ארוך עד 1024 תווים 1k
צריך להקפיד שהוא יתאים לגודל הגרפיקה שהוא נמצא בתוכה.

אתר מרובה שפות חובה לתרגם טקסט חלופי.

קו הפרדה hr לסדר css
עמוד 97

עמוד 100
טקסט וקישורים.



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

<meata http-equiv="Content-Type" content="text/html; charset=windows-1255" />

או
קוד:

charset=ISO-8859-8-i" />

יוניקוד
קוד:

=utf-8 />

אל תגדיר את כיוון הכתיבה ברמת התגית body
קוד:

<meta http-equiv="Content-Language" content="he" />

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

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

ניקוד עזר חלקי- צריך לפי הספר הזה.
צריך לבדוק את הנושא.

תחילת דף 4
ציטוטים
<cite> </cite>
כותרות שמות של ספרים,
סרטים, מחזות, תוכניות טלוויזיה,
פסקי דין ואפילו שמות של ספינות.

לנגישות עבור קיצור
<abbr> </abbr>

לנגישות עבור ראשי תיבות
<acronym> </acronym>


עמוד 111

קוד:

<abbr title="continued">cont'd</abbr>
<acronym title="not in my backyard">NIMBY</acronym>

שפה זרה:
קוד:

<abbr lang="de" xml:lang="de" title="hautbahnhof">Hbf</abbr>
<acronym title="societate per aziony" lang="it" xml:lang="it">SpA</acronym>

לסמן רק בפעם הראשונה שהקיצור מופיע בדף. ראה הערה בספר.
עמוד 113
הוסף את הקוד הבא לגליון הסגנון:
קוד:

abbr, acronym{text-decoration:underline; border-bottom:1px dotted gray;}

עמוד 116
ציטוט בלוקים של טקסט
מדליק.

תחילת דף 5 שלי

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

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

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

צבעים בטוחים- מק פי סי
הצבעים אינם עקביים אפילו במסך אחד.

תחילת דף 6 שלי

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

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

רשימה משנית:
חום - כחול
צהוב - כחול
יש 6 צמדי צבעים ושלושים ושתיים דרגות של צבעים

עמוד 182


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

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

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

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

צריך לאפשר למשתמש להחליף צבע לטקסט.

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

<body bgcolor="white" text="black" vlink="purple" alink="blue" link="990000">
יש לציין את ההגדרות גם בגליון הסגנון
body{color:black; background-color:white}
a link{color:#990000;background-color:8888


עמוד 186

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

תחילת דף שלי מספר 8

עמוד 188
focus
קוד:

A:focus{color:#990000; background-color:white; border:solid 1px gray;}

צריך לשמור על שוני בין Hover ל-Focus

הסדר המומלץ:
a: link
a: visited
a: focus
a: hover
a: active

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

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

אפשרות אסטתית לקישור - קו תחתון מנוקד
קוד:

a{border-bottom:1px dotted gray}

כל גופן שגובהו קטן מתשעה פיקסלים הוא בלתי קריא.

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

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

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

המשפחות הגנריות של גופנים בגליונות סגנון גולשים רמה 2 הן:
serif
sans-serif שים לב למקף
כתב יד  cursive
fantasy משמשים לקישוט אך הם עדיין אותיות
monospace


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

הצטרף / הצטרפה: 06 August 2006
מדינה: Israel
משתמש: מנותק/ת
הודעות: 1209
נשלח בתאריך: 01 February 2007 בשעה 18:48 | IP רשוּם
ציטוט נאוה

אני מדביקה פה קישורים נוספים בנושא נגישות באינטרנט.

נגישות באינטרנט- בניית אתרים נגישים- מאת ג'ו קלארק
מדריך להנגשת אתרים
  כיצד לערוך בדיקת נגישות?
הרצאה: נגישות לאתרי אינטרנט
מאמר בנושא טכניקות נגישות מתקדמות
גוגל-חיפוש נגיש
נגישות של מיקרוסופט
נגישות האתר- בעיות במנועי חיפוש
תנאי גלישה קשים
עיצוב אתרים ושימושיות
הכללים
נגישות לבעלי מוגבלויות לאתרי אינטרנט עבריים
תכונות נגישות של מערכת ההפעלה של חלונות
אופק לילדינו - נגישות אתרים
גוגל - נגישות באינטרנט

מצגת מעולה שאסור להחמיץ:
http://happycog.com/lectures/access/4.html

נגישות-איתן אתר מעולה:
http://study.eitan.ac.il/sites/index.php?portlet_id=9&pa ge_id=177


*בעזרת  העורך Nvu אפשר לבדוק את האתר עם הבודק של w3
  כשאין שום צורך לשים אותו על השרת, וזה מאוד מאוד נוח.



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

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

  שליחת תגובהשליחת נושא חדש
גרסת הדפסה גרסת הדפסה

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