טכניקות

הטכניקות לעמידה בדרישה זו מסתכמות בשני דברים:

1. השתמשו במפות תמונות בצד הלקוח ולא בצד השרת.
2. ספקו alt-text לכל איזור בתמונה, וגם alt-text בתוית ה- IMG עבור התמונה עצמה.

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

להמחשת הנקודה השניה, הנה דוגמא לסרגל ניווט שהוא מפת תמונה:

הדף שממנו נלקחה הדוגמא, לא מספק alt-text למפה או לאיזורים שלה, ולכן אם עוברים עליה בקורא מסך, סרגל הניווט מופיע כ- [IMAGE], או כ- [USEMAP:botbar.jpg]. אם עוקבים אחר הקישור של ה- USMAP, מגיעים לסדרה של אפשרויות:

MAP: http://cis.nci.nih.gov/#botbarMap39

http://cis.nci.nih.gov/index.html

http://cis.nci.nih.gov/contact/contact.html
http://cis.nci.nih.gov/maint/map/map.htm
http://cis.nci.nih.gov/resources/resources.html

http://cis.nci.nih.gov/community/community.html
http://www.cancer.gov/publications/
http://cis.nci.nih.gov/research/research.html

http://cis.nci.nih.gov/news/new.html

http://cis.nci.nih.gov/about/about.html

http://cis.nci.nih.gov/contact/contact.html

לא הכי כיף להקשיב לזה בקורא המסך... אבל הוספת תכונות ALT לתויות ה- IMG וה- AREA תפתור את הבעיה.

הקוד המקורי (לא נגיש):

<CENTER>
<MAP NAME="botbarMap39">
<AREA SHAPE="CIRCLE" COORDS="445,21,22" HREF="index.html">
<AREA SHAPE="RECT" COORDS="375,23,430,47" HREF="contact/contact.html">
<AREA SHAPE="RECT" COORDS="340,23,375,48" HREF="maint/map/map.htm">
<AREA SHAPE="RECT" COORDS="100,22,155,46" HREF="resources/resources.html">
<AREA SHAPE="RECT" COORDS="218,22,287,49" HREF="community/community.html">
<AREA SHAPE="RECT" COORDS="155,22,218,47" HREF="http://www.cancer.gov/publications/">
<AREA SHAPE="RECT" COORDS="287,23,340,50" HREF="research/research.html">
<AREA SHAPE="RECT" COORDS="50,21,100,50" HREF="news/new.html">
<AREA SHAPE="RECT" COORDS="1,22,50,45" HREF="about/about.html">
<AREA SHAPE="RECT" COORDS="310,21,347,45" HREF='contact/contact.html"'>
</MAP><IMG align=bottom border=0 height=45 id=IMG1 isMap src="images/botbar.jpg" useMap=#botbarMap39 width=468 NATURALSIZEFLAG="3">
</CENTER>

חלק ה- isMAP שבקוד הנ"ל קורא למפת תמונה נוספת בצד השרת, למקרה שתהיתם מה זה. אל תדאגו, זה משהו שהיו עושים באמצע שנות ה- 90, כדי להתאים למשתמשים שעדיין לא שדרגו את הדפדפן לגרסא 2.

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

קוד מתוקן (נגיש):

<div align="center">
<IMG src="images/botbar.jpg" alt="Site Navigation" usemap="#botbarMap39">
<MAP NAME="botbarMap39">
<AREA SHAPE="RECT" COORDS="1,22,50,45" HREF="about/about.html" alt="[About CIS]">
<AREA SHAPE="RECT" COORDS="50,21,100,50" HREF="news/new.html" alt="[Cancer News]">
<AREA SHAPE="RECT" COORDS="100,22,155,46" HREF="resources/resources.html" alt="[CIS Resources]">
<AREA SHAPE="RECT" COORDS="155,22,218,47" HREF="http://www.cancer.gov/publications/" alt="[Publications Ordering]">
<AREA SHAPE="RECT" COORDS="218,22,287,49" HREF="community/community.html" alt="[CIS Regional Programs]">
<AREA SHAPE="RECT" COORDS="287,23,340,50" HREF="research/research.html" alt="[Cancer Research]">
<AREA SHAPE="RECT" COORDS="340,23,375,48" HREF="maint/map/map.htm" alt="[Site Map]">
<AREA SHAPE="RECT" COORDS="375,23,430,47" HREF="contact/contact.html" alt="[Contact Us]">
<AREA SHAPE="CIRCLE" COORDS="445,21,22" HREF="index.html" alt="[Home]">
</MAP>
</div>

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

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