הנגשת אתרי אינטרנט רותם - סופי

1. רותם ויצמן
הנגשת אתרי אינטרנט

2. אתר נגיש: רשות השידור
• היכנסו לאתר של רשות השידור והתרשמו מהאופן שבו הוא
מעוצב וכתוב.
http://www.iba.org.il/
• עכשיו, היכנסו ללשונית הנגישות באתר ותראו אילו שינויים יש.
http://www.iba.org.il/nagish/

3. אתר נגיש: רשות השידור
• אלו הבדלים יש בין שני חלקי האתר?
• מה יותר ברור?
• מה נראה לכם יותר נוח?

4. רותם ויצמן
קהל היעד

5. אנשים עם מוגבלות - סטטיסטיקה
•1,440,000 אנשים עם מוגבלות -
)כ- 20% מהאוכלוסייה(
•706,000 בגילאי העבודה -
מתוכם 300,000 עם מוגבלות חמורה
•425,000 בגיל זקנה
•500,000 עם מוגבלות מתונה
מתוך הרצאה של יובל וגנר, יו"ר נגישות ישראל, "עסק נגיש = עסק מרוויח"

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

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

8. כללי ה- C3W

9. כללי ההנגשה של ה- C3W
• ההנחיות בעברית:
.html0.2c.org.il/guidelines/guidelines_WCAG_3http://www.w
• ההנחיות באנגלית:
/10.org/TR/WCAG3://www.w
http

10. עקרונות ההנגשה של ה- C3W
עיקרון 1 – תפיסה:
יש להציג את המידע ואת המרכיבים של מנשק־המשתמש כך
שהמשתמשים יוכלו לתפוס )לקלוט( אותם בחושיהם.
עיקרון 2 – תפעוליות:
המרכיבים של מנשק המשתמש והניווט צריכים להיות ניתנים לתפעול.
עיקרון 3 – נהירות:
המידע ואופן הפעלת מנשק המשתמש חייבים להיות ברורים ומובנים.
עיקרון 4 – יציבות טכנולוגית:
התוכן חייב להיות יציב במידה שתאפשר לאמצעים העומדים לרשות
המשתמש, בכלל זה טכנולוגיות מסייעות, לפענח אותו באופן אמין.
262398328.html#Toc0.2c.org.il/guidelines/guidelines_WCAG_3
http://www.w

11. רמות הנגישות של ה C3W
• כל קריטריון לבחינת העמידה בהנחיות הנגישות מתייחס לרמת
נגישות מסוימת מבין שלוש – A , AA , AAA
• אתר נגיש ברמה A – חייב לעמוד בכל הנחיות הנגישות עבור רמה
,A ויכול, על-פי בחירה, לקיים גם חלק מהנחיות הנגישות עבור שתי
הרמות הגבוהות יותר.
• אתר נגיש ברמה AA – חייב לעמוד בכל הנחיות הנגישות עבור
רמות A ו- AA , ויכול, על-פי בחירה, לקיים גם חלק מהנחיות
הנגישות עבור רמה AAA.
• אתר נגיש ברמה AAA – חייב לעמוד בכל הנחיות הנגישות, עבור
כל הרמות.
http://www.nagish.org.il/?page_id=405

12. גורמים בקביעת הקריטריונים לכל רמת נגישות:
• מידת החיוניות של היבטי הנגישות השונים לאנשים עם מוגבלות
• מידת היכולת של טכנולוגיות מסייעות לפתור את הבעיה
• מידת הישימות של ההנחיות
• הידע הנדרש מהמפתחים
• פגיעה אפשרית במראה האתר ובאווירה שהוא משׁרֶה
• קיומם של פתרונות עקיפים לבעיה
http://www.nagish.org.il/?page_id=405
רמות הנגישות של ה- C3W

13. עיקרון הנהירות )הנחיה 3.1 )
• שפת הדף: יש צורך לוודא שתוכנה של שפה טבעית תוכל לזהות
את הדף ולהקריא אותו )רמה A .)
• השפה בחלקים של הדף: יש צורך לוודא שתוכנה של שפה טבעית
תוכל לזהות את הדף ולהקריא אותו פרט לשמות פרטיים ומונחים
טכניים, מילים ששפתם לא ברורה וביטויים ששגורים בפיו של
הכותב )רמה AA .)
• מילים בשימוש בלתי-רגיל: צריך לקבוע מנגנון שיאפשר למשתמש
לקבל פירושים למילים שמשתמשים בהן באופן לא רגיל או מיוחד
מהתאם לתחום )רמה AAA .)

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

15. תקן ישראלי ת"י 5568
( 2013 )

16. תקן ישראלי חדש ת"י 5568 "קווים מנחים לנגישות תכנים באינטרנט".
מכון התקנים הישראלי פרסם תקן ישראלי חדש ת"י 5568 "קווים מנחים
לנגישות תכנים באינטרנט".
תקן זה מאמץ את הנחיות הנגישות של איגוד האינטרנט הבין-לאומי W3C.
ת"י 5568 מספק קווים מנחים המאפשרים נגישות לתוכני אינטרנט לקהל
רחב של אנשים עם מוגבלויות, כגון: עיוורון ולקויות ראייה, חירשות וכבדות
שמיעה, לקויות למידה, מוגבלויות קוגניטיביות, מוגבלות תנועה, מוגבלויות
דיבור, רגישות לאור ושילובים של מוגבלויות אלה.
דוגמאות לקווים מנחים המוזכרים בתקן: תיאורי טקסט של רכיבים גרפיים,
כתוביות לתוכני שמע, אפשרות להגדלת הטקסט והצגה חזותית של טקסט.
תקן ישראלי ת"י 5568
( 2013 )

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

18. עיצוב ומבנה של אתר נגיש

19. עיצוב ומבנה )הנחיה 1.3 )
– ודאו כי המידע מאורגן באמצעות כותרות וכותרות משנה.
– ודאו כי ניסוח הכותרות מובן ואפשר ולצפות על-פיו מה יהיה תוכנן
– ודאו שחילקתם קטעי טקסט ארוכים לפסקאות.
– ודאו כי השתמשתם בתבליטים ובמספור במקום רשימות שבהן
הפריטים מופרדים בפסיקים.
– ודאו שהשתמשתם נכונה ברמזים חזותיים כדי להדגיש חלקים או
נקודות חשובות בתוכן.
– עם זאת, ודאו שלא נתתם הנחיות המתבססות רק על צבע, צורה
ומיקום של אלמנטים.

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

21. הדף לא עמוס ואין אלמנטים שמסיחים את הדעת - אתר רשות השידור

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

23. פיסוק באתר נגיש
– ודאו שהשתמשתם בפיסוק בצורה נכונה, שמאפשרת קריאה זורמת
של הטקסט.
– ודאו שלא השתמשתם בקווים נטויים לציון צורת הנקבה )קח/י( או
אפשרות )ו/או(.

24. מספרים באתר נגיש
– ודאו שהמספרים במסמך כתובים בספרות ) 1 , 2 , 3 ( ולא בספרות
רומיות
– המעיטו להשתמש באחוזים.
– כתבו מספרים גדולים במילים או, לחליפין, השתמשו בביטויים
המציינים כמות )"הרבה"(.

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

26. הקישורים מופרדים ויש הבדלים בין שורות הכותרת לטקסט –
אתר רשות השידור

27. תפעוליות

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

29. צבעים באתר נגיש

30. צבעים באתר נגיש )הנחיה 1.4 )
⁻ בפרק 1.4 )תפיסה<הבחנה( נדון נושא הצבע באופן מאוד כללי:
⁻1.4.1 שימוש בצבע: צבע לא ישמש אמצעי חזותי יחידי להעברת מידע,
סימון פעולה, בקשת תגובה, או הבלטת עצם חזותי )רמה A )
⁻ צבע אינו יכול להיות עיקרון מנחה יחיד.
⁻ יש חשיבות לצבע בפן העיצובי וכמובן קיימות תמונות בצבעים, אך המידע
צריך להיות נגיש לכולם, כולל עיוורי צבעים, אנשים מבוגרים ואנשים עם
לקויות ראיה, לכן יש לדאוג לחלופה חזותית.
⁻ פתרונות לדוגמה: בטופס המכיל שדות חובה, לא להסתמך רק על צבע
אלא להשתמש גם במילה כתובה כמו "שדה חובה".

31. צבעים באתר נגיש )הנחיה 1.4 )
• הכללים של ה W3C- מנחים לניגודיות דמות ורקע של 1:3 .
• דוגמאות של נראות צבע:
http://www.w3.org/WAI/WCAG20/Techniques/working
examples/G183/link-contrast.html
• למשל, שימוש בקישור כחול נראה טוב לרוב האנשים, בעוד ששימוש
בקישור אדום נראה אפור.
• פלטה של צבעים מומלצים המעניקים יחס של 1:3 עם שחור ו- 1:5 עם
לבן.

33. שינוי בצבעים לעיוורי צבעים, אתר איקאה

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

35. • כלים לבדיקת ניגודיות של צבעים:
Application – Analyser
Contrast
service online - Analyser Ratio
Contrast
Extension Firefox - Analyser Contrast
Colour
צבעים באתר נגיש )הנחיה 1.4 )

36. התאמת השפה

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

38. קישורים רלוונטיים
• מדריכי נגישות של איגוד האינטרנט הישראלי:
www.isoc.org.il/center/accessibility_guides.htmlhttp://
• המאגר הישראלי של אתרים נגישים – נגישות ישראל:
2106CategoryID=http://www.aisrael.org/?
• מדריך התאמות נגישות לאתרי אינטרנט )בהיבט משפטי(:
accessability.html-law.co.il/internet-
http://www.y
• תקנות נגישות השירות )סימן ג': שירותי האינטרנט, תקנה 35 :)
_TakHanegishutLeSherut.pdf1160
http://www.isoc.org.il/docs/
• המדריך להנגשת אתר אינטרנט - נגישות ישראל:
40720&ArticleID=2764
http://www.aisrael.org/?CategoryID=
• אתר העוסק בהנגשת תכנים באינטרנט לאנשים עם מוגבלויות
http://webaim.org/
• אתר נגיש http://webaim.org/

39. תודה על ההקשבה!