טכניקה 4: רשימות

3.6 סמנו רשימות ואלמנטים של רשימות בצורה נכונה. [עדיפות 2]

האלמנטים של רשימות DL ,UL ,OL ב- HTML צריכים לבוא לביטוי רק ביצירת רשימות ולא ליצירת אפקט כגון אינדנטציה. ניתן להיעזר במסמך הטכניקות ל- CSS לגבי טבלאות המיועדות לעיצוב ופרישה.

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

למספרי רשימות, מספרים מורכבים יותר אינפורמטיבים מאשר מיספרים רגילים, כך ש-"1,1.1,1.2,1.2.1,1.3,2,2.1" מספקים יותר הקשר מאשר מספרים רגילים שעשויים להיראות כך:

ויכתבו כך: "1,1,2,1,2,3,2,1" כאשר הם לא נותנים מידע על העומק.

דוגמה: דפי העיצוב הבאים (CSS2) מראים איך לסמן מספרים מורכבים לרשימות מקוננות שנוצרו עם האלמנטים UK או OL. הפריטים ממוספרים כך:"1","1.1","1.1.1" וכן הלאה:

<STYLE type="text/css"> UL, OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, "."); counter-increment: item }</STYLE>

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

4.1 שימוש בגליון סגנון בכדי לשנות תבליטי רשימה

כדי לשנות את סגנון התבליט ("bullet") של רשימה לא ממוספרת שנוצרה עם האלמנט LI, השתמש בדף סגנון. ב-CSS ניתן לסמן סגנון תבליט של "חזרה לאחור" אם תמונה של תבליט לא מצליחה לעלות.

דוגמא:

<HEAD><TITLE>Using style sheets to change bullets</TITLE><STYLE type="text/css"> UL { list-style: url(star.gif) disc }</STYLE></HEAD><BODY><UL> <LI>Audrey <LI>Laurie <LI>Alice</UL>

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

בדוגמה הבאה, מידע חדש מקושר דרך טקסט ("New"), סגנון של פונט (bold), וצבע (תבליט צהוב, טקסט אדום על רקע צהוב):

<HEAD><TITLE>Bullet styles example</TITLE><STYLE type="text/css"> .newtxt { font-weight: bold; color: red; background-color: yellow } .newbullet { list-style : url(yellow.gif) disc }</STYLE></HEAD><BODY><UL> <LI class="newbullet">Roth IRA <SPAN class="newtext">New</SPAN></LI> <LI> 401(k)</LI></UL></BODY>

4.1.1 תמונות המשמשות כתבליטים

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

הימנע משימוש בתמונות כתבליטים ברשימות הגדרה שנוצרו עם DL DT DD. אומנם, אם השיטה הזו כבר בשימוש, תבטיח טקסט אלטרנטיבי לתמונה.

דוגמא:

<HEAD><TITLE>Deprecated example using image in DL lists</TITLE></HEAD><BODY><DL> <DD><IMG src="star.gif" alt="* ">Audrey <DD><IMG src="star.gif" alt="* ">Laurie <DD><IMG src="star.gif" alt="* ">Alice</DL>

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

דוגמא: