Your SlideShare is downloading. ×
0
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Wcag 2 end
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Wcag 2 end

302

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
302
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • היום אנחנו ממשיכים להרצאות שהתחלנו לפני שבוע עבור WCAG 2 . WCAG 2 מספק המלצות איך לעשות תוכן אינטרנט יותר נגיש למשתמשים בעלי מוגבלויות שונות . הוא מכיל בעצמו 12 עקרונות (Guidelines) . העקרונות מחולקות לארבע קבוצות .
  • ואנחנו נידבר על העקרון הראשון : מידע ניתן לתפיסה Perceivable) ). שמכיל ארבע הנחיות : 1.1 חלופה טקסטואלית 1.2 מתן חלופות אלטרנטיביות לתוכן עבור מולטימדיה 1.3 כושר הסתגלות . ( Adaptable ) 1.4 בר - הבחנה ( Distinguishable ) לפני שנמשיך רציתי להגיד כמה מילים על איך בנויה את ההרצאה . ההרצאה בנויה משלושה פרקים . פרק ראשון הוא הרצאה כללית עבור עקרון ראשון תפוס מידע ( Perceivable). שני הוא חלק של הנחיות מדויקות איך לעשות תוכן יותר נגיש , ושלישי הוא חלק של תקלות נפוצות
  • מידע , ומרכיבי ממשק חייבים להיות מוצגים כך שהמשתמשים יוכלו לתפוס אותם
  • הנחיה 1.1 טקסט אלטרנטיבי - יש לספק חלופות טקסטואליות לתכנים שאינם טקסטואליים פה מדובר על טקסט אלקטרוני – ולא תמונות עם טקסט .
  • 1.1.1 לכל האלמנטים שאינם טקסטואליים ישנן חלופות טקסטואליות . כאשר תוכן שאינו טקסטואלי פקד או אמור לקבל קלט מן המשתמש, אזי צריך לתת לו שם המתאר את תפקידו .
  • בתוכן מולטימדיה , הטקסט האלטרנטיבי חייב לפחות לתאר את תוכנו הדוגמה שמצאתי זה הקלטות שלנו ב - YOUTUBE שמספקות תיאור להקלטות שיעור : http://www.youtube.com/watch?v=LDuUaHAw2AU&feature=channel
  • ל בדיקות שאין להן משמעות בצורה טקסטואלית , יש לתת תיאור מילולי .
  • CAPTCHA חייבת להינתן בצורות חלופיות עבור אנשים עם צורות שונות של הפרעות תפיסה . אנחנו לא יכולים לספק ל - CAPTCHA טקסט אלטרנטיבי . אז צריך להיות אודיו אלטרנטיבה . https://signup.live.com/signup.aspx?id=251248&ru=http%3a%2f%2fhome.live.com%2f%3fnew%3dtrue&cp=2&mkt=he-IL&rollrs=12&lic=1
  • קישוט, עיצוב בלתי נראה: תוכן שאינו טקסטואלי – קישוט בדף או כל עיצוב שלא נראה למשתמש , צריך להיות מוצג כך שטכנולוגית עזר יכולה להתעלם ממנו .
  • הנחיה 1.2 דורשת לספק חלופות אלטרנטיביות לתוכן מולטימדיה. לספק לאודיו מוקלט אלטרנטיבה טקסטואלית שקולה לו. לספק לוידיאו מוקלט אלטרנטיבה טקסטואלית או אודיו
  • יש לספק כתוביות לכל התכנים של האודיו בצורה מסונכרנת . http://www.usability.com.au/resources/shawn-vid.cfm
  • עבור כל תכני האודיו המוקלטים מראש ניתן תרגום לשפת סימנים בצורה מסונכרנת . http://www.youtube.com/watch?v=SaPwE-bdV_o
  • הנחיה 1.3 כושר הסתגלות כושר הסתגלות – יש לייצר תכנים כך שאפשר להציג אותם בדרכים שונות ללא איבוד מידע או מבנה .
  • קשר בין מרכיבים שונים בעמוד המודגשים ויזואלית צריכים להיות גם מתוארים טקסטואלית או בקוד HTML . כך שתוכנית תמיכה יכלה לזהות את הקשר . לדוגמה : אם כל השדות הדרושים מסומנים בכוכבית , עליך להסביר בגוף העמוד מה פירוש הכוכביות
  • אם רצף של קריאת המידע חשוב להבנה, זה חייב להיות ברור מן סימון . גם בקוד וגם ויזואלית
  • מאפייני חישה : לא צריך להסתמך רק על המאפיינים החזותיים של התוכן לדוגמה : זה אומר שלא צריך לסמוך שחץ שמאלה ברור לכולם שמביא לעמוד הבא. צריך להוסיף גם הסבר " כתובית " עמוד הבא או עמוד קודם
  • תעשו כך , שיהיה קל יותר לראות ולשמוע תוכן , כולל היכולת להבחין בין תוכן ורקע .
  • שימוש בצבע : צבע לא צריך להיות האמצעי היחיד של הצגת מידע . כמו שבעמוד בדוגמה שדות חובה צבועים באדום וזה ברור אם אדום אז חובה ! צריך להיות סימון נוסף והסבר מילולי .
  • מי מכיר מיקרה שיושב בבית מאוחר מול המחשב נפתח דף ופתאום שומעים בקול רם מוזיקה –מתחילים לחפש איפה לסגור את הרעש לא מוצאים אז סוגרים את כול הדף . זה על זה : אם אודיו כלשהו בדף מנגן באופן אוטומטי במשך יותר מ -3 שניות , ניתן לספק מנגנון עצירה או הפסקה , או שניתן מנגנון לשליטה בעוצמת האודיו .
  • הטקסט צריך להיות מוצג ניגודית לפחות 4.5 :1 http://trace.wisc.edu/contrast-ratio-examples/Sample_Text_ColorsOnWhite.htm
  • בבחירות קודמות באמריקה באתר של עיתון פרסמו מפה שקיבלה רבים תלונות מהמשתמשים בגלל שצבעים שסומנו "" כן " ו " לא הצביעו " הצבעים הם מאוד קרובים בניגוד http://dashboardsbyexample.com/wp-content/uploads/2008/10/no-votes-financial-bailout-house-of-representatives.png
  • צריך להיות אפשרות לשנות גודל טקסט ללא טכנולוגית-עזר עד 200 אחוז בלי לאבד תפקוד של התכנים .
  • צריך להימנע בהצגת של הטקסט בצורת תמונה . באתר לדוגמה כול אות ראשונה מוצגת כתמונה . http://www.tigon-crafts.co.uk/latest.htm
  • בהקלטות אודיו המכילות דיבור , צלילי רקע צריכים להיות ניתנים לכיבוי , או שקט . ( על 20 DB שקט מהדיבור ) . יוצא מן הכלל : Captcha
  • עבור הצגה חזותית של גושי טקסט , קיים מנגנון למימוש התנא ים הבאים : 1. צבעי חזית ורקע ניתנים לבחירה על ידי המשתמש . =======================================================================================
  • 2. הרוחב אינו עולה על 80 תווים או סימנים לא מזמן קיבלתי מכתב פנימי בסינית אז מידע הזו אקטואלית גם לנו לא - יותר מ -40 תווים סינים . http://math.ucr.edu/home/baez/
  • 3. הטקסט אינו מיושר ( מוצמד ימניים וגם לשמאליים לשוליים ). לא מוצמד בו זמנית לימין ולשמאל
  • 4. רווח בין שורות בתוך הפיסקה צריך להיות לא פחות מ רווח וחצי , ורווח בין פסקאות גדול מרווח בין שורות פי 1.5 לפחות
  • אפשרות להגדיל את הגופן פעמיים בלי שהופיע פס הגלילה האופקי . http://www.nrg.co.il/online/HP_0.html
  • מה שהיה עד עכשיו היה סקירה כללית של עקרונות perceivable מתוך WCAG עכשיו נדבר קצת לעומק יש הנחיות מדויקות איך לבצע את הדרישות של תקן WCAG
  • מטרת הנחיה ה זו למנוע כפילויות מיותרות , אשר מתרחשות כאשר יש תוכן זהה בטקסט וגם שם התמונה .
  • כאן בדוגמה הקישור מכיל סמל וטקסט . בסמל יש טקסט אלטרנטיבה אשר שם של הסמל , וקישור מתאר לחיצה על איקון " home page ".
  • מטרת הנחיה זו היא לספק הטקסט אלטרנטיבי במפת התמונה ( image map ). דוגמה : דוגמה זו משתמשת ב תכונת alt של אזור תמונה כדי לספק טקסט אלטרנטיבי שמתאר את מטרת האזורים בתמונה . ================================================================== מפת תמונה היא תמונה מחולק לאזורים לבחירת משתמש . כל השטח הוא קישור לדף אינטרנט אחר או חלק אחר של דף האינטרנט הנוכחי . < alt> של כל רכיב השטח משרת את אותה מטרה כמו באזור לבחירה של התמונה . =============================================================================
  • H30 : מתן טקסט קישור שמתאר את מטרת הקישור מטרת הנחיה זו היא לתאר את מטרת הקישור באמצעות טקסט תיאורי . התיאור מאפשר למשתמש להבדיל בין קישור זה וקישורים אחרים בדף האינטרנט ומסייע למשתמש לקבוע אם לבצע את העברה לקישור . לעומת " לחץ כאן " וכדומה . ========================================================================================= דוגמה : המתאר את המטרה של הקישור ב HMTL בתוכן את הטקסט של קישור .
  • H30 : מתן שם קישור שמתאר את מטרת הקישור . בדוגמה אפשר לראות : שימוש בתכונת alt עבור אלמנט img תיאור מטרת " הקישור גרפי ".
  • מטרת הנחיה זו היא לספק טקסט אלטרנטיבי עבור אלמנט APPLET שיוצג כאשר רכיב לא ניתן לעבד .
  • H36 : שימוש בתכונת alt בתמונות שמשמשות בתור כפתורי שליחה . דוגמה : רכיב קלט עם תכונת alt תכונת alt של האלמנט קלט משמש לספק תווית פונקציונאלית . תווית זו מציינת הפונקציה של הכפתור , אבל לא מנסה לתאר את התמונה .
  • כאשר משתמשים באלמנט img , ציינו טקסט אלטרנטיבי קצר עם תכונת alt . גם אם הוא אינו לינק =================================================================== בדוגמה : תמונה באתר אינטרנט מספקת קישור ידיעון חינמי . התמונה מכילה את הטקסט " ידיעון חינמי . קבל בחינם מתכונים , חדשות ועוד . למידע נוסף ." הטקסט alt תואם לטקסט שבתמונה .
  • מטרה – לסמן נחון את הכותרות מטרת הנחיה זו היא להשתמש ב - HTML ו - XHTML לסימון הכותרות להעברת המבנה של התוכן . ================================================================= בדוגמה זו , התוכן הראשי של הדף מוצג בעמודה האמצעית של 3- דף העמודה . הכותרת של התוכן הראשי תואמת את כותרת הדף , ואת מסומן h1, למרות שזה לא הדבר הראשון בדף . התוכן בעמודות הראשון והשלישי פחות חשובה , ואת המסומנים H2. H42html.html
  • מטרת הנחיה הזו היא להשתמש במפורש באלמנט תווית כדי לקשר שליטה בטופס עם תווית . ============================================================
  • דוגמה 1 יש את התווית של " שם פרטי ". בדוגמה הבאה בשדה טקסט יש את התווית המפורשת של " שם פרטי ". אלמנט תווית עבור התכונה של התאמות מאפיין הזיהוי של האלמנט קלט . ===========================================================
  • קבוצה קטנה של radio buttons עם תיאור ברור ותוויות עבור כל רכיב בנפרד . X:\\ הרצאה \\ HTML'S\\H44.2.html
  • H53 שימוש בגוף של האלמנט object דוגמה 1: אובייקט זה כולל תיאור ארוך המתאר אותו : מטרת הנחיה זו היא לספק טקסט אלטרנטיבי עבור התוכן באלמנט object
  • object כוללת תוכן שאינו טקסטואלי עם טקסט אלטרנטיבי
  • באובייקט התמונה יש תוכן קצר שמתאר הפונקציה של התמונה
  • H 67: שימוש בטקסט אלטרנטיבי ריק ובלי תכונת title של אלמנט , img כדי להתעלם מתמונות מטרת טכניקה זו היא להראות כיצד ניתן לסמן תמונות כדי שהטכנולוגיה המסייעת תוכל להתעלם מהן
  • התמונה הבאה משמש כתמונה דקורטיבית בדף . מי שמקפיד באמת , בכלל לא ישים בעמוד גיף כזה אלא ישתמש ב CSS לתמונה
  • H71 : מתן תיאור עבור קבוצות של פקדים באמצעות Fieldset & legend - מטרת טכניקה זו היא לספק קיבוץ סמנטי עבור פקדי טופס בנושא . זה מאפשר למשתמשים להבין את מערכת היחסים של אינטראקציה עם פקדים בצורה יותר מהירה ויעילה .
  • דוגמה זו מראה פריט עם שאלה אחת וחמשה תשובות אפשריות . כל תשובה מיוצגת על ידי כפתור הבחירה ( input type="radio). כפתורי האפשרויות הן בתוך fieldset. השאלה כוללת גם legend element X:\\ הרצאה \\ HTML'S\\H71.1.html
  • בעמוד פרופיל למשתמש לאתר אינטרנט יש אפשרות למשתמשים לציין את תחומי העניין שלהם על ידי בחירת תיבות סימון ( checkboxes) מרובות . לכל התיבה ( input type="checkbox") יש תווית . כל תיבות הסימון כלולות בתוך fieldset, ואת legend element מכיל את הפקודה לכל הקבוצה של תיבות . X:\\ הרצאה \\ HTML'S\\H71.2.html
  • H39 : שימוש באלמנט caption כדי לקשר בין כותרת של טבלה לנתוני טבלה . דוגמה : שימוש באלמנט CAPTION מאפשרת לתוכנת קריאת המסך לנווט ישירות לתיאור טבלה אם קיים כזה . ================================================================== יש דוגמת HTML
  • המטרה של שיטה זו היא לתת סקירה קצרה של כמה הנתונים אורגנו בטבלה , או הסבר כיצד לנווט בטבלה . זה עושה את המידע נגישה עבור אנשים שמשתמשים ב " קוראי מסך ", המידע אינו מוצגת באופן חזותי .
  • טבלה עם סיכום הנתונים דוגמה זו מציגה לוח זמנים של אוטובוסים . מספר מסלולים , ???? כלולים סיכום יחד עם מידע על אופן השימוש בלוח הזמנים לו " ז תוואי 7 עובר במרכז העיר . שירות מתחיל בשעה 4:00 ומסתיימת בחצות . צמתים המפורטות בשורה העליונה מצא את הצומת הקרוב ביותר נקודת המוצא או היעד שלך , ואז לקרוא למטה עמודה זו כדי לברר מה השעה האוטובוס היה בצומת
  • תקלות נפוצות הפרק הזה הוא לאנשים עם נדודי שינה
  • 1.3.1 כישלון : בהצגת טקסט להעברת מידע מבלי להשתמש בסימון מתאים
  • כוונת היה לעשות כותרת , אבל לא רצה להשתמש בכותרת ברירת המחדל של ה - HTML . אז השתמש ב - CSS אלמנט P כדי להיראות כמו כותרת . לכן , טכנולוגיה עזר לא יכולה להבחין בזה כי כותרת . X:\\ הרצאה \\ HTML'S\\F2.html
  • כאן השתמשו בתמונות בתוך כותרת Chapter1.gif הוא דימוי של המילים , " Chapter One" בגופן Garamond בגודל 20 על פיקסלים . זה כישלון כי בכל אלמנט למינימום img צריכה להיות סגורה בתוך רכיב כותרת . פתרון טוב יותר יהיה לבטל את התמונה להקיף את הטקסט בתוך רכיב כותרת אשר כבר מנוסח באמצעות CSS
  • כישלון עקב שימוש ב - CSS כדי לכלול תמונות להעברת מידע חשוב .
  • בדוגמה הבאה , בחלק מהתוכן יש תמונה המוצגת על ידי CSS בלבד . תמונת המכיל את הטקסט , "19.3% APR Typical Variable." פשוט כול המידע שמועברת רק על ידי CSS בלתי נראה לתוכנות עזר
  • "19.3% APR Typical Variable." =================================== איפה עוד אפשר למצוא הריבית יותר תובה
  • אנשים עם ראייה ירודה יהיה הרבה יותר קל לראות דף אינטרנט שיש בו טקסט לבן על רקע שחוה , והם יכלו להגדיר את הגדרות משלהם . יש כאן שני דברים שונים : חופש למשתמש , ואם הגדרת חזית תגדיר גם רקע ולהיפך .
  • בדוגמה הבאה הרקע בצבע מוגדר על אלמנט הגוף , אולם צבע קידמה אינו מוגדר X:\\ הרצאה \\ HTML'S\\F24.1.html
  • אני יודע שזה נוח למי שה כותב את אתרים אבל זה מיותר לאנשים שמשתמשים בקורא מסך
  • אי הצלחה בגלל השמטה ( ASHMATA ) של alt- attribute עבור תוכן שאינו טקסטואלי ה משמש למטרות דקורטיביות .
  • זה מתאר מצב כישלון טקסט אלטרנטיבי עבור תמונות שאפשר להתעלם ממנו על ידי AT. אם אין alt attribute בכלל וטכנולוגיות מסייעות אינם יכולים להתעלם מתוכן שאינו טקסט . alt attribute חייבים להיות עם ערך ריק ( כלומר : alt = "" או alt=“ “ ) הערה : למרות ש alt = “ " הוא תקין מומלץ alt= "" .
  • כישלון שמתרחש כאשר הסימון המבני ( structural markup) משמש כדי להשיג אפקט תצוגתי אבל מצביע על יחסים שאינם קיימים בתוכן . זה מבלבל את המשתמשים התלויים ביחסים אלה כדי לנווט בתוכן או להבין את מערכת היחסים . שים לב כי השימוש בטבלאות HTML עבור הפריסה היא לא דוגמה לכישלון הזה כל עוד פריסת הטבלה אינה כוללת מבנים פסולים כגון אלמנטים של < th> או < caption> .
  • בדוגמה זו, האלמנט כותרת משמשת כדי להציג כתובת בגופן גדול , ומודגש . הכתובת לא מוגדר כדי לזהות קטע חדש של המסמך, לכן שזה לא צריך להיות מסומן כ כותרת.
  • בדוגמה זו , סימון " הכותרת " ( heading ) משמשים בשתי דרכים שונות : להעביר את המבנה של המסמך ואפקטים ויזואליים . H1 ו - H2 משמשים כראוי כדי לסמן את תחילת המסמך . עם זאת , H3 ו H4 משמשים רק לאפקט ויזואלי - כדי להציג את שמות המחברים ואת התאריכים .
  • אי הצלחה בשל השימוש בתווים " כפילים " בטקסט מבלי לספק אלטרנטיבה טקסטואלית .
  • לאנשים שמשתמשים בעיניים כדי לקבל מידע , אין הבדל זה אות C
  • אבל לתוכנה מסוג קורא מסך יש הבדל הראשון הוא מהאלפבית המערבי השנייה מאלפבית היווני ולא בשימוש בשפות המערב. אז במקרים כאלו יותר נחון יהיה להוסיף טקסט אלטרנטיבי .
  • אי הצלחה עקב יצירת קישורים שאינם ברורים ללא ראיית הצבע יש צורך להדגיש קישורים בטקסט או לסמן בשיטה אחר שאינה הבחנה חזותית של הצבע X:\\ הרצאה \\ HTML'S\\F73.html
  • Transcript

    • 1. WCAG 2
    • 2. WCAG 2
    • 3. WCAG 2 עקרון 1: Perceivable מידע נתפס מידע ומרכיבי ממשק חייבים להיות מוצגים כך שהמשתמשים יוכלו לתפוס ( perceive ) אותם
    • 4. WCAG 2 הנחיה 1.1: חלופה טקסטואלית יש לספק חלופות טקסטואליות לתכנים שאינם טקסטואליים
    • 5. WCAG 2
      • הנחיה 1.1: חלופה טקסטואלית
      • כאשר תוכן שאינו טקסטואלי פקד או אמור לקבל קלט מן המשתמש , אזי צריך לתת לו שם המתאר את תפקידו
    • 6. WCAG 2
      • הנחיה 1.1: חלופה טקסטואלית
      • עבור מולטימדיה הטקסט הנלווה חייב לפחות לתאר את תוכן המוליטמדיה
    • 7. WCAG 2 הנחיה 1.1: חלופה טקסטואלית ◦ לתרגיל או בוחן שאין לו משמעות בצורה טקסטואלית יש לתת תיאור מילולי .
    • 8. WCAG 2 הנחיה 1.1: חלופה טקסטואלית CAPTCHA חייבת להינתן בצורות חלופיות עבור אנשים עם צורות שונות של הפרעות של תפיסה .
    • 9. WCAG 2 הנחיה 1.1: חלופה טקסטואלית קישוט , עיצוב בלתי נראה : כאשר תוכן שאינו טקסטואלי הינו קישוט טהור , או משמש לעיצוב קישוט בלבד , או אינו מוצג למשתמשים , אז הוא מיושם באופן בו טכנולוגית עזר יכולה להתעלם ממנו .
    • 10. WCAG 2
      • הנחיה 1.2: לספק חלופות לתוכן מולטימדיה .
      • לספק לאודיו מוקלט אלטרנטיבה טקסטואלית
      • שקולה לו . לספק לוידאו מוקלט אלטרנטיבה טקסטואלית או אודיו
    • 11. WCAG 2 הנחיה 1.2: לספק חלופות לתוכן מולטימדיה . . • לספק כתוביות לכל התכנים של האודיו בצורה מסונכרנת
    • 12. WCAG 2 הנחיה 1.2: לספק חלופת תוכן אלטרנטיבי למולטימדיה . עבור כל תכני האודיו המוקלטים מראש ניתן תרגום לשפת סימנים בצורה מסונכרנת .
    • 13. WCAG 2 1.3. כושר הסתגלות .( Adaptable ) יש לבנות תכנים הניתנים להצגה בדרכים שונות ללא איבוד מידע או מיבנה .
    • 14. WCAG 2 1.3. כושר הסתגלות . מידע וקשרים : מידע , מבנה , וקשרים הנמסרים באמצעות הצגה ניתנים לזיהוי ע '' י תוכנה או שהם זמינים כטקסט . ( שכבת הפרזנטציה )
    • 15. WCAG 2 1.3. כושר הסתגלות רצף בעל משמעות : אם רצף וסדר קריאת המידע חשוב להבנה , זה חייב להיות ברור בקוד וויזואלית .
    • 16. WCAG 2
      • 1.3. כושר הסתגלות .
      • מאפייני חישה : לא צריך להסתמך רק על המאפיינים החזותיים של התוכן .
    • 17. WCAG 2 הנחיה 1.4 בר - הבחנה ( Distinguishable ) להקל על המשתמש לראות ולשמוע תוכן , כולל היכולת להבחין בין תוכן ורקע .
    • 18. WCAG 2 הנחיה 1.4 בר - הבחנה ( Distinguishable ) שימוש בצבע : צבע לא צריך להיות האמצעי היחיד של הצגת מידע .
    • 19. WCAG 2 הנחיה 1.4 בר - הבחנה ( Distinguishable ) 1.4.2 שליטה באודיו : אם אודיו כלשהו בדף מנגן באופן אוטומטי במשך יותר מ -3 שניות , צריך לספק מנגנון עצירה או הפסקה , או שניתן מנגנון לשליטה בעוצמת האודיו .
    • 20. WCAG 2 הנחיה 1.4 בר - הבחנה ( Distinguishable ) 1.4.3 קונטרסט ( ניגודיות ) : ייצוג חזותי של טקסט צריך להיות ברמת ניגודיות לפחות 4.5:1 ( חריגים : לוגו , רכיבים שאינם פעילים , טקסט גדול ).
    • 21. WCAG 2 הנחיה 1.4 בר - הבחנה ( Distinguishable )
    • 22. WCAG 2 הנחיה 1.4 בר - הבחנה ( Distinguishable ) 1.4.4 שינוי גודל טקסט
    • 23. WCAG 2 תמונות של טקסט
    • 24. WCAG 2 הנחיה 1.4 בר - הבחנה ( Distinguishable ) 1.4.7 אודיו רקע נמוך או נעדר
    • 25. WCAG 2 הנחיה 1.4 בר - הבחנה ( Distinguishable ) 1.4.8 הצגה חזותית :
    • 26. WCAG 2
      • הנחיה 1.4 בר הבחנה ( Distinguishable )
      • הרוחב אינו עולה על 80
      • תווים או סימנים
      • (40 במקרה של סינית .(
    • 27. WCAG 2 הנחיה 1.4 בר - הבחנה ( Distinguishable ) הטקסט אינו justified
    • 28. WCAG 2 הנחיה 1.4 בר - הבחנה ( Distinguishable ) 1.4.8 הצגה חזותית : עבור הצגה חזותית של גושי טקסט , קים מנגנון למימוש התנאים הבאים :
    • 29. WCAG 2 הנחיה 1.4 בר - הבחנה ( Distinguishable )
    • 30. WCAG 2
    • 31. WCAG 2 H 2 : שילוב של התמונה וקישור בטקסט על אותו המשאב דוגמה 1 : הסמל והטקסט כלולים באותו רכיב . <a href=&quot; products. html&quot;> <img src=&quot;icon.gif&quot; alt=&quot;&quot; /> Products page </a>
    • 32. WCAG 2 H 2 : שילוב של תמונה וקישור בטקסט על אותו המשאב דוגמה 2: <a href=&quot;foo.htm&quot;> <img src=&quot;house.gif&quot; alt=&quot;home page icon&quot;/> Go to the home page </a>
    • 33. WCAG 2 : H24 מתן טקסט אלטרנטיבי עבור אזורים של מפות תמונה image maps) ) דוגמה : <img src=&quot;welcome.gif&quot; usemap=&quot;#map1“ alt=&quot;Areas in the library. Select an area for more information on that area.&quot; /> <map id=&quot;map1&quot; name=&quot;map1&quot;>
    • 34. WCAG 2 H30 : מתן טקסט קישור שמתאר את מטרת הקישור . דוגמה : <a href=&quot;routes.html&quot;> Current routes at Boulders Climbing Gym </a>
    • 35. WCAG 2 H30 : מתן שם קישור שמתאר את מטרת הקישור . דוגמה : שימוש בתכונת alt עבור אלמנט img תיאור מטרת &quot; הקישור גרפי &quot;. <a href=&quot;routes.html&quot;> <img src=&quot;topo.gif&quot; alt= &quot;Current routes at Boulders Climbing Gym&quot; /> </a>
    • 36. WCAG 2 H35 : מתן טקסט אלטרנטיבי עבור אלמנט < applet > דוגמה : <applet code=&quot;tictactoe.class&quot; width=&quot;250&quot; height=&quot;250&quot; alt=&quot;tic-tac-toe game&quot; > tic-tac-toe game </applet>
    • 37. WCAG 2 H36 : שימוש בתכונת alt בתמונות שמשמשות בתור כפתורי שליחה . דוגמה : כפתור עם תכונת alt <form action=&quot;http://example.com/prog/text-read&quot; method=&quot;post&quot;> <input type=&quot;image&quot; name=&quot;submit&quot; src=&quot;button.gif&quot; alt= &quot;Submit&quot; /> </form>
    • 38. WCAG 2 H 37: שימוש בתכונת alt באלמנט img דוגמה : <img src=&quot;newsletter.gif&quot; alt=&quot;Free newsletter. Get free recipes, news, and more. Learn more.&quot; />
    • 39. WCAG 2 H42 : שימוש ב - h1-h6 לזיהוי כותרות .
    • 40. WCAG 2 H44: שימוש באלמנט תווית label) ) כדי לקשר תוויות טקסט עם פקדי הטופס .
    • 41. WCAG 2 דוגמה 1: שדה קלט טקסט . <label for=&quot;firstname&quot;>First name:</label> <input type=&quot;text&quot; name=&quot;firstname&quot; id=&quot;firstname&quot; />
    • 42. WCAG 2 קבוצה של radio buttons דוגמה :
    • 43. WCAG 2 H53 שימוש בגוף של האלמנט object דוגמה 1: אובייקט זה כולל תיאור ארוך המתאר אותו : <object classid=&quot;http://www.example.com/analogclock.py&quot;> <p>Here is some text that describes the object and its operation.</p> </object>
    • 44. WCAG 2 H53 שימוש בגוף של האלמנט object <object classid=&quot;http://www.example.com/animatedlogo.py&quot;> <img src=&quot;staticlogo.gif&quot; alt=&quot;Company Name&quot; /> </object>
    • 45. WCAG 2 H53 שימוש בגוף של האלמנט object דוגמה : <object data=&quot;companylogo.gif&quot; type=&quot;image/gif&quot;> <p> Company Name </p> </object>
    • 46. WCAG 2 H 67: שימוש בטקסט אלטרנטיבי ריק ובלי תכונת title של אלמנט , img כדי להתעלם מתמונות
    • 47. WCAG 2 דוגמת קוד : <img src=&quot;squiggle.gif&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&quot; />
    • 48. WCAG 2 H71 : מתן תיאור עבור קבוצות של פקדים באמצעות Fieldset & Legend
    • 49. WCAG 2 דוגמה 1: בדיקת אפשרויות לבחירה
    • 50. WCAG 2 דוגמה 2: אוסף של תיבות ( checkboxes )
    • 51. WCAG 2 H39 : שימוש באלמנט caption כדי לקשר בין כותרת של טבלה לנתוני טבלה . דוגמה : <table> <caption> Schedule for the week of March </caption> ... </table>
    • 52. WCAG 2 H: 73 שימוש ב - summary של אלמנט טבלה כדי לתת סקירה של הנתונים בטבלה .
    • 53. WCAG 2 דוגמה 1: טבלה עם סיכום הנתונים : <table summary=&quot;Schedule for Route 7 going downtown. Service begins at 4:00 AM and ends at midnight. Intersections are listed in the top row. Find the intersection closest to your starting point or destination, then read down that column to find out what time the bus leaves that intersection.&quot;> <tr> …… . </tr>
    • 54. WCAG 2
    • 55. WCAG 2 F2 כישלון : הצגת טקסט להעברת מידע בלי להשתמש בסימון מתאים ( סימון : markup )
    • 56. WCAG 2 דוגמת כישלון 1: שימוש ב - CSS style אלמנט p כדי שייראה כמו כותרת .
    • 57. WCAG 2 דוגמת כישלון 2: תמונות בטקסט משמשות ככותרות , כאשר התמונות אינן מסומנות עם תגיות של הכותרת . <img src=&quot;Chapter1.gif&quot; alt=&quot; Chapter One &quot;> <p>Once upon a time in the land of the Web..... </p>
    • 58. WCAG 2 F3 : כישלון עקב שימוש ב - CSS כדי לכלול תמונות להעברת מידע חשוב .
    • 59. WCAG 2 דוגמת הקוד : The CSS contains: background: transparent url(/images/TopRate.png) no-repeat top left; }
    • 60. WCAG 2 זה משמש בקטע זה : <p id=&quot;bestinterest&quot;> Where else would you find a better interest rate? </p>
    • 61. WCAG 2 : F24 אי הצלחה עקב ציון צבעים בחזית בלי לציין צבעי הרקע או להיפך
    • 62. WCAG 2 לדוגמה כישלון 1: קביעת צבע הרקע רק עם bgcolor ב - HTML <html> <head>…</head> <body bgcolor=&quot;white&quot;> <p> ... document body...</p> </body> </html>
    • 63. WCAG 2 F30: אי הצלחה עקב שימוש בטקסט אלטרנטיבי שאינו אלטרנטיבה ( למשל , שמות קבצים או טקסט מציין את המיקום )
    • 64. WCAG 2
      • כישלון לדוגמה :
      • טקסט אלטרנטיבי שכולל &quot; &quot; או spacer&quot; &quot; או &quot; תמונה &quot; ( image” &quot;) או (“picture”) במקום טקסט אלטרנטיבי בעל משמעות של תמונות או תצלומים .
    • 65. WCAG 2
      • כישלון לדוגמה :
      • דוגמאות של טקסט אלטרנטיבי שאינן כוללים טקסט אלטרנטיבי :
      • הפניות שלא מעבירות את המידע או פונקציה שאינה טקסט למשל :
      • &quot;picture 1&quot;, &quot;picture 2&quot; או &quot;0001&quot;, &quot;0002&quot; &quot;Intro#1&quot;, &quot;Intro#2&quot;.
    • 66. WCAG 2 F38 : אי הצלחה בגלל השמטה של alt- attribute עבור תוכן שאינו טקסטואלי ה משמש למטרות דקורטיביות .
    • 67. WCAG 2 זה מתאר מצב כישלון בטקסט אלטרנטיבי עבור תמונות שאפשר להתעלם מהן על ידי . AT אם אין alt attribute – בכלל , וטכנולוגיות מסייעות אינן יכולות להתעלם מתוכן שאינו טקסט . alt attribute חייבת להיות עם ערך ריק ( כלומר : alt = &quot;&quot; או alt=“ “ )
    • 68. WCAG 2 F43: אי הצלחה בגלל שימוש ב - HTML באופן שאינו מייצג יחסים בתוכן .
    • 69. WCAG 2 דוגמה 1: הכותרת משמשת רק לאפקט ויזואלי : <p>Interested in learning more? Write to us at</p> <h4>3333 Third Avenue, Suite 300 · New York City</h4> <p>And we'll send you the complete informational packet absolutely Free!</p>
    • 70. WCAG 2 דוגמה 2: שימוש באלמנט &quot; כותרת &quot; למטרת הצגה ויזואלית : <h1>Study on the Use of Heading Elements in Web Pages</h1> < h3>Joe Jones and Mary Smith<h3 > < h4>March 14, 2006</h4 > <h2>Abstract</h2> <p>A study was conducted in early 2006 ... </p>
    • 71. WCAG 2 F71: אי הצלחה בשל השימוש בתווים &quot; כפילים &quot; בטקסט בלי לספק אלטרנטיבה טקסטואלית .
    • 72. WCAG 2 מה ההבדל בין שני תווים אלו ?
    • 73. WCAG 2 מה ההבדל בין שני תווים אלו ?
    • 74. WCAG 2 F73: אי הצלחה עקב יצירת קישורים שאינם ברורים ללא ראיית הצבע

    ×