wcag 2 end

WCAG 2WCAG 2

WCAG 2WCAG 2

WCAG 2WCAG 2 Perceivable: 1עקרון

מידע נתפס

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

(perceiveאותם )

WCAG 2WCAG 2 טקסטואלית: 1.1הנחיה חלופה

לתכנים טקסטואליות חלופות לספק ישטקסטואליים שאינם

WCAG 2WCAG 2 טקסטואלית: 1.11.1הנחיה הנחיה טקסטואלית: חלופה חלופה

כאשר תוכן שאינו טקסטואלי פקד או •אמור לקבל קלט מן המשתמש, אזי צריך

המתאר את תפקידושםלתת לו

WCAG 2WCAG 2 טקסטואלית: 1.11.1הנחיה הנחיה טקסטואלית: חלופה חלופה

עבור מולטימדיה הטקסט הנלווה חייב •לפחות לתאר את תוכן המוליטמדיה

WCAG 2WCAG 2 טקסטואלית: 1.11.1הנחיה הנחיה טקסטואלית: חלופה חלופה

לתרגיל או בוחן שאין לו משמעות בצורה ◦ טקסטואלית יש לתת תיאור מילולי.

WCAG 2WCAG 2 : חלופה טקסטואלית: חלופה טקסטואלית1.11.1הנחיה הנחיה

CAPTCHA חייבת להינתן בצורות חלופיותעבור אנשים עם צורות שונות של הפרעות

של תפיסה.

WCAG 2WCAG 2 טקסטואלית: 1.11.1הנחיה הנחיה טקסטואלית: חלופה חלופה

כאשר תוכן שאינו קישוט, עיצוב בלתי נראה:טקסטואלי הינו קישוט טהור, או משמש לעיצוב קישוט

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

WCAG 2WCAG 2 לתוכן: 1.2הנחיה חלופות לספק

מולטימדיה. לספק לאודיו מוקלט אלטרנטיבה •

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

טקסטואלית או אודיו

WCAG 2WCAG 2 לתוכן: 1.2הנחיה חלופות לספק

מולטימדיה..

לספק כתוביות• לכל התכנים של

האודיו בצורה מסונכרנת

WCAG 2WCAG 2 אלטרנטיבי: 1.2הנחיה תוכן חלופת לספק

למולטימדיה.עבור כל תכני האודיו

המוקלטים מראש ניתןתרגום לשפת סימנים

בצורה מסונכרנת.

WCAG 2WCAG 2

( Adaptable. כושר הסתגלות.)1.3

יש לבנות תכנים הניתנים להצגה בדרכים שונות ללא איבוד מידע או מיבנה.

WCAG 2WCAG 2 . כושר הסתגלות. 1.3

: מידע, מבנה, וקשרים מידע וקשריםהנמסרים באמצעות הצגה ניתנים לזיהוי ע''י תוכנה או שהם

זמינים כטקסט.

)שכבת הפרזנטציה(

WCAG 2WCAG 2 . כושר הסתגלות1.3

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

בקוד וויזואלית.

WCAG 2WCAG 2 . כושר הסתגלות. 1.3

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

WCAG 2WCAG 2

בר-הבחנה 1.4הנחיה (Distinguishable)

להקל על המשתמש לראות ולשמוע תוכן, כולל היכולת להבחין בין תוכן

ורקע.

WCAG 2WCAG 2 1.4הנחיה

(Distinguishableבר-הבחנה) שימוש בצבע:

צבע לא צריך להיות האמצעי היחיד של

הצגת מידע.

WCAG 2WCAG 2 1.4הנחיה

( Distinguishableבר-הבחנה)

שליטה באודיו: אם אודיו כלשהו בדף 1.4.2 שניות, 3מנגן באופן אוטומטי במשך יותר מ-

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

WCAG 2WCAG 2 בר-הבחנה 1.4הנחיה

(Distinguishable )ייצוג חזותי של : קונטרסט )ניגודיות(1.4.3

טקסט צריך להיות ברמת ניגודיות לפחות )חריגים: לוגו, רכיבים שאינם פעילים, 4.5:1

טקסט גדול(.

WCAG 2WCAG 2 בר-הבחנה 1.4הנחיה

(Distinguishable)

WCAG 2WCAG 2 1.4הנחיה

(Distinguishableבר-הבחנה) שינוי גודל טקסט1.4.4

WCAG 2WCAG 2 תמונות של טקסט

WCAG 2WCAG 2 1.4הנחיה

(Distinguishableבר-הבחנה) אודיו רקע נמוך או נעדר1.4.7

WCAG 2WCAG 2 1.4הנחיה

(Distinguishableבר-הבחנה) הצגה חזותית:1.4.8

WCAG 2WCAG 2 בר 1.4הנחיה (Distinguishableהבחנה)

80הרוחב אינו עולה על •תווים או סימנים

.) במקרה של סינית 40)

WCAG 2WCAG 2 1.4הנחיה

(Distinguishableבר-הבחנה)

justifiedהטקסט אינו

WCAG 2WCAG 2 1.4הנחיה

(Distinguishableבר-הבחנה)עבור הצגה חזותית של גושי הצגה חזותית: 1.4.8

טקסט, קים מנגנון למימוש התנאים הבאים:

WCAG 2WCAG 2 1.4הנחיה

(Distinguishableבר-הבחנה)

WCAG 2WCAG 2

WCAG 2WCAG 2 H2 שילוב של התמונה וקישור:

בטקסט על אותו המשאב

:הסמל והטקסט כלולים באותו 1דוגמה רכיב.

<a href="products.html>"< img src="icon.gif" alt>/ ""=

Products page /<a>

WCAG 2WCAG 2 H2 שילוב של תמונה וקישור בטקסט על:

אותו המשאב:2דוגמה

<a href="foo.htm>"< img src="house.gif"

alt="home page icon>/" Go to the home page

/< a>

WCAG 2WCAG 2 : H24 מתן טקסט אלטרנטיבי עבור

imageאזורים של מפות תמונה maps))דוגמה :

<img src="welcome.gif" usemap="#map1“

alt="Areas in the library. Select an area for more information on

that area>/ ".<map id="map1" name="map1 >"

WCAG 2WCAG 2 H30 מתן טקסט קישור שמתאר את :

מטרת הקישור.דוגמה:

<a href="routes.html>" Current routes at Boulders

Climbing Gym/< a>

WCAG 2WCAG 2 H30 מתן שם קישור שמתאר את :

מטרת הקישור. עבור אלמנט alt שימוש בתכונת :דוגמה

img ."תיאור מטרת "הקישור גרפי

<a href="routes.html>"<img src="topo.gif" alt="Current

routes at Boulders Climbing Gym ">/

/<a>

WCAG 2WCAG 2 H35 מתן טקסט אלטרנטיבי עבור :

<appletאלמנט >דוגמה :

<applet code="tictactoe.class" width="250" height="250"

alt="tic-tac-toe game">tic-tac-toe game

/<applet>

WCAG 2WCAG 2 H36 שימוש בתכונת :alt בתמונות

שמשמשות בתור כפתורי שליחה.alt כפתור עם תכונת דוגמה:

<form action="http://example.com/prog/

text-read" method="post>"<input type="image"

name="submit" src="button.gif" alt="Submit" >/

/<form>

WCAG 2WCAG 2 H37 שימוש בתכונת :alt באלמנט img

דוגמה:

<img src="newsletter.gif" alt="Free newsletter. Get free recipes, news, and more. Learn

more>/ ".

WCAG 2WCAG 2

H42 :

לזיהוי כותרות. h1-h6שימוש ב-

WCAG 2WCAG 2

H44 :

( כדי לקשר (labelשימוש באלמנט תווית תוויות טקסט עם פקדי הטופס.

WCAG 2WCAG 2 : שדה קלט טקסט.1דוגמה

<label for="firstname"<First name:>/label< >input type="text" name="firstname"

id="firstname>/ "

WCAG 2WCAG 2 radio buttonsקבוצה של

דוגמה :

WCAG 2WCAG 2 H53 שימוש בגוף של האלמנטobject

: אובייקט זה כולל תיאור ארוך 1דוגמה המתאר אותו:

<object classid="http://www.example.com

/analogclock.py>"< p<Here is some text that

describes the object and its operation.>/p>

/< object>

WCAG 2WCAG 2 H53 שימוש בגוף של האלמנט

object <object

classid="http://www.example.com/animatedlogo.py"< >img src="staticlogo.gif" alt="Company

Name ">//<object >

WCAG 2WCAG 2 H53 שימוש בגוף של האלמנט

object דוגמה:

<object data="companylogo.gif" type="image/gif>"

<p<Company Name>/p>/<object>

WCAG 2WCAG 2 H67 שימוש בטקסט אלטרנטיבי ריק ובלי :

שלtitleתכונת כדי img, אלמנט

להתעלם מתמונות

WCAG 2WCAG 2 דוגמת קוד :

<img src="squiggle.gif" width="20 "

height="20" alt ""=>/

WCAG 2WCAG 2 H71 מתן תיאור עבור קבוצות של פקדים:

באמצעות Fieldset

& Legend

WCAG 2WCAG 2 : בדיקת אפשרויות לבחירה1דוגמה

WCAG 2WCAG 2 (checkboxes: אוסף של תיבות )2דוגמה

WCAG 2WCAG 2 H39 שימוש באלמנט : caption

כדי לקשר בין כותרת של טבלה לנתוני טבלה .

דוגמה:<table>

< caption<Schedule for the week of March

>/caption... >/<table >

WCAG 2WCAG 2 H: 73 -שימוש ב summary של אלמנט

טבלה כדי לתת סקירה של

הנתונים בטבלה.

WCAG 2WCAG 2 טבלה עם סיכום הנתונים:1דוגמה :<table summary="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."><tr>…….</tr>

WCAG 2WCAG 2

WCAG 2WCAG 2

F2כישלון : הצגת טקסט להעברת מידע

בלי להשתמש בסימון מתאים (markup)סימון:

WCAG 2WCAG 2

CSS style: שימוש ב-1דוגמת כישלון כדי שייראה כמו כותרת. p אלמנט

WCAG 2WCAG 2 : תמונות בטקסט משמשות 2דוגמת כישלון

ככותרות, כאשר התמונות אינן מסומנות עם תגיות של הכותרת.

>img src="Chapter1.gif" alt="Chapter One"< >p<Once upon a time in the land of the Web..... >/p<

WCAG 2WCAG 2

F3 : כדי לכלול CSSכישלון עקב שימוש ב-

תמונות להעברת מידע חשוב .

WCAG 2WCAG 2 דוגמת הקוד:

The CSS contains:background: transparent url(/images/TopRate.png) no-repeat top left;}

WCAG 2WCAG 2 זה משמש בקטע זה:

<p id="bestinterest"> Where else would you find a better interest rate? </p>

WCAG 2WCAG 2 : F24

אי הצלחה עקב ציון צבעים בחזית בלי לציין צבעי הרקע או להיפך

WCAG 2WCAG 2 : קביעת צבע הרקע רק 1לדוגמה כישלון

HTML ב- bgcolorעם <html> <head>…</head> <body bgcolor="white"> <p> ... document body...</p> </body> </html>

WCAG 2WCAG 2

F30 : אי הצלחה עקב שימוש בטקסט

אלטרנטיבי שאינו אלטרנטיבה )למשל, שמות קבצים או טקסט מציין את

המיקום(

WCAG 2WCAG 2 כישלון לדוגמה:

טקסט אלטרנטיבי שכולל " " או spacer"( "או "תמונה "image”)" או

“( picture )” במקום טקסטאלטרנטיבי בעל משמעות של תמונות

או תצלומים.

WCAG 2WCAG 2 כישלון לדוגמה:

דוגמאות של טקסט אלטרנטיבי שאינן כוללים טקסט אלטרנטיבי:

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

"picture 1", "picture 2" או "0001" ,"0002 ""Intro#1",

"Intro#2."

WCAG 2WCAG 2

F38: -alt אי הצלחה בגלל השמטה של

attribute עבור תוכן שאינו למטרות משמש טקסטואלי הדקורטיביות.

WCAG 2WCAG 2

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

alt אם אין AT. להתעלם מהן על ידיattribute – בכלל, וטכנולוגיות

מסייעות אינן יכולות להתעלם מתוכן חייבת alt attribute שאינו טקסט.

או = "" altלהיות עם ערך ריק )כלומר:alt“ “=)

WCAG 2WCAG 2

F43 :

HTMLאי הצלחה בגלל שימוש ב-באופן שאינו מייצג יחסים בתוכן.

WCAG 2WCAG 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>

WCAG 2WCAG 2 שימוש באלמנט "כותרת" 2דוגמה :למטרת הצגה ויזואלית :

<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>

WCAG 2WCAG 2

F71:

אי הצלחה בשל השימוש בתווים "כפילים" בטקסט בלי לספק

אלטרנטיבה טקסטואלית.

WCAG 2WCAG 2

מה ההבדל בין שני תווים אלו ?

WCAG 2WCAG 2

מה ההבדל בין שני תווים אלו ?

WCAG 2WCAG 2

F73 :

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