טכניקה 7: מפות ומפות תמונות

הפרק הבא דן בנגישות של תמונות (כולל אנימציות פשוטות כאנימציות GIF).

7.1 טקסטים מקבילים קצרים לתמונות

 ("alt text")

כאשר משתמשים ב-IMG, יש ליחד טקסט מקביל קצר עם התכונה "alt". הערה: הערך של התכונה מיוחס כ-"alt-text".

דוגמה:

 <IMG src="magnifyingglass.gif" alt="Search">

כאשר משתמשים ב-OBJECT, יש ליחד טקסט מקביל בגוף אלמנט ה-OBJECT:

<OBJECT data="magnifyingglass.gif" type="image/gif">
      Search
   </OBJECT>
 

7.2 תיאורים ארוכים של תמונות

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

<IMG src="97sales.gif" alt="Sales for 1997" 
        longdesc="sales97.html">

הקובץ In sales97.html:

תרשים המראה את מצב המכירות ב-1997, זהו תרשים עמודות המראה את אחוזי העליה במכירות בחודש. המכירות בינואר היו גבוהות ב-10% מדצמבר 1996, המכירות בפברואר ירדו ב-3%.

לסוכני משתמש שאינם תומכים ב"longdesc", יש לספק לינק מתאר, במקום קרוב לאותה גרפיקה:

 <IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales.html">
   <A href="sales.html" title="Description of 1997 sales figures">[D]</A>

כאשר משתמשים ב-OBJECT, הגדר טקסט מקביל ארוך יותר בתוך אלמנטי התוכן:

<OBJECT data="97sales.gif" type="image/gif">
          Sales in 1997 were down subsequent to our
          <A href="anticipated.html">anticipated
          purchase</A> ...
   </OBJECT>

הערה: תוכן ה-OBJECT בשונה מ-"alt text", יכול לכלול סימון, כך שמפתחי תוכן יכולים לספק קישור למידע נוסף מתוך אלמנט ה-OBJECT:

<OBJECT data="97sales.gif" type="image/gif">
          Chart of our Sales in 1997.
          A <A href="desc.html">textual description</A> is available.
  </OBJECT>

7.3 אומנות Ascii

13.10 ספקו דרך לדלג על אומנות ASCII מרובת שורות. [עדיפות 3]

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

<P>
<a href="#post-art">skip over ASCII art</a>
<!-- ASCII art goes here -->
<a name="post-art">caption for ASCII art</a>

אומנות Ascii יכולה להיות מסומנת גם כך [לדילוג על אומנות ה- ascii או לתיאור הציור]:

אופציה נוספת לאומנות Ascii קטנה ,היא להשתמש ב-ABBR עם "title" .

<P><ABBR title="smiley in ASCII art">:-)</ABBR>

אם אומנות ASCII היא מורכבת, הבטח שהטקסט המקביל מתאר זאת במדויק.

דרך נוספת להחליף אומנות ASCII , היא להשתמש בתחליפי שפת אדם. לדוגמה,<WINK> יכול להוות תחליף לסמיילי ;). או המילה "therefore" יכולה להחליף חץ המורכב מ"מקף" ומסימן "גדול מ" (<-- ), והמילה "great" לקיצור "gr8".  

7.4 מפות תמונות

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

מפות תמונה נוצרות בעזרת האלמנט MAP. בשפת HTML יש אפשרות לשני סוגים של תמונת מפה: client side = צד לקוח (דפדפן המתמש מעבד את ה-URI) ו- server side=צד שרת (השרת מעבד). לכל המפות תמונה, מפתחי תוכן צריכים לספק טקסט אקוויולנטי.

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

7.4.1 טקסט אקוויולנטי למפת תמונה של צד-לקוח

• 1.1  לספק מקבילת טקסט לכל אלמנט שאינו טקסט (כלומר ע"י "alt" או "longdesc" או בתוכן האלמנט). האלמנטים כוללים: תמונות, הצגות גרפיות של טקסט (כולל סמלים), מפות-תמונות, אנימציה (כלומר קבצי GIF מונפשים) יישומונים ואלמנטים תכנותיים, אומנות ascii, מסגרות, סקריפטים, תמונות המשמשות כסימון לרשימה (תבליטים), אלמנטים להפרדה (כגון קוים מפרידים), כפתורים גרפיים, צלילים (כאלה שהמשתמש יוצר וגם כאלה שאינם דורשים אינטראקציה), קבצי אודיו, פסי קול של סרטי וידאו, ווידאו. [עדיפות 1].

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

אם משתמשים ב-AREA כדי ליצור מפה, השתמש בתכונה "alt"

<IMG src="welcome.gif" alt="Image map of areas in the library"
        usemap="#map1">
   <MAP name="map1">
     <AREA shape="rect" coords="0,0,30,30"
           href="reference.html" alt="Reference">
     <AREA shape="rect" coords="34,34,100,100"
           href="media.html" alt="Audio visual lab">
   </MAP>
 

הדוגמה הבאה מדגימה את אותו הרעיון, אבל משתמשת ב-OBJECT במקום IMG כדי להכניס את התמונה כדי לספק יותר אינפורמציה על התמונה:

<OBJECT data="welcome.gif" type="image/gif" usemap="#map1">
       There are several areas in the library including
       the <A href="reference.html">Reference</A> section and the
       <A href="media.html">Audio Visual Lab</A>.
   </OBJECT>
   <MAP name="map1">
     <AREA shape="rect" coords="0,0,30,30"
           href="reference.html" alt="Reference">
     <AREA shape="rect" coords="34,34,100,100"
           href="media.html" alt="Audio visual lab">
   </MAP>
 

7.4.2 קישורי טקסט נוספים למפות תמונה של צד-לקוח

• 1.5 כל עוד סוכני המשתמש אינם מספקים חלופות טקסט עבור כל איזור פעיל במפת תמונות בצד הלקוח, ספקו קישורים טקסטואליים לכל איזור פעיל במפת תמונות בצד הלקוח. [עדיפות 3].

בנוסף לטקסט אלטרנטיבי,יש לספק קישור טקסטואלי נוסף. אם האלמנט A משמש במקום AREA, מפתח התוכן צריך לתאר את האיזור האקטיבי וכן לתת קישור דומה באותו הזמן:

<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
   <MAP name="map1">
     <P>Navigate the site.
     [<A href="guide.html" shape="rect"
        coords="0,0,118,28">Access Guide</A>]
     [<A href="shortcut.html" shape="rect"
        coords="118,0,184,28">Go</A>]
     [<A href="search.html" shape="circle"
        coords="184.200,60">Search</A>]
     [<A href="top10.html" shape="poly"
        coords="276,0,276,28,100,200,50,50,276,0">
          Top Ten</A>]
   </MAP>
   </OBJECT>
 

הערה: בדוגמה הקודמת, האלמנט MAP הוא התוכן של האלמנט OBJECT כך שקישור אלטרנטיבי יוצג רק אם מפת התמונה לא מוצגת.

הערה נוספת - הקישורים הופרדו בסוגריים מרובעות ([]).זה כדי למנוע מקוראי מסך ישנים לקרוא מספר קישורים עוקבים כקישור אחד ,כמו כן לעזור למשתמשים רגילים להבחין בין הקישורים ויזואלית

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

7.4.3 מפת תמונה של צד-לקוח לעומת צד-שרת

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

7.4.4 מפת תמונה של צד-שרת

• 1.2 לספק קישורים מילוליים לכל איזור פעיל במפת תמונות של צד השרת. [עדיפות 1]

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

1) שים את כל בקישורים האלטרנטיבים בתוך הגוף של אלמנט ה- OBJECT.

2)אם IMG משמש להכנסת התמונה, תן רשימה אלטרנטיבית של רשימת קישורים אחרי זה וציין כי קיימת רשימה אלטרנטיבית (דרך התכונה "alt").

<A href="http://www.example.com/cgi-bin/imagemap/my-map">
    <IMG src="welcome.gif" alt="Welcome! (Text links follow)" ismap>
    </A>

   <P>[<A href="reference.html">Reference</A>]
      [<A href="media.html">Audio Visual Lab</A>]

7.5 צבעים בתמונות

7.6 אנימציה

• 7.3 עד שסוכני המשתמש יאפשרו להקפיא תוכן שזז, המנעו מתכנים נעים בדפי האתר. [עדיפות 2]

 מקורות

תמונות ומפות תמונות, טכניקות HTML, הנחיות W3C