רשימות HTML משעממות. הם לא do הרבה, אז אנחנו לא באמת חושבים עליהם למרות השימוש הנרחב בהם. ואנחנו עדיין מסוגלים לעשות את אותם דברים שתמיד עשינו כדי להתאים אותם, כמו הסרת סמנים, היפוך סדר ויצירת מונים מותאמים אישית.
עם זאת, יש כמה דברים "חדשים" יותר - כולל סכנות - שכדאי לדעת בעת שימוש ברשימות. הסכנות הן לרוב מינוריות, אבל הרבה יותר נפוצות ממה שאתה חושב. נגיע לאלו, ועוד כמה דברים חדשים שנוכל לעשות עם רשימות, ואפילו דרכים חדשות לגשת לפתרונות ישנים.
כדי להבהיר, אלו הם רכיבי ה-HTML עליהם אנחנו מדברים:
- רשימות מסודרות
- רשימות לא מסודרות
- רשימות תיאור
- רשימות אינטראקטיביות
רשימות מסודרות, רשימות לא מסודרות ורשימות אינטראקטיביות מכילות פריטי רשימה (
) שמוצגים לפי סוג הרשימה שאנו עוסקים בה. רשימה מסודרת (
) מציג מספרים לצד פריטי רשימה. רשימות לא מסודרות (
) ורכיבי תפריט (
) מציג נקודות תבליט לצד פריטי רשימה. אנו קוראים לזה "סמני רשימה" ו ניתן אפילו לעצב אותם באמצעות ::סַמָן פסאודו-אלמנט. רשימות תיאור משתמשות במונחי תיאור (
) ופרטי תיאור (
) במקום
ואין להם סמני רשימה. הם אמורים לשמש להצגת מטא נתונים ומילוני מונחים, אבל אני לא יכול לומר שאי פעם ראיתי אותם בטבע.
בואו נתחיל עם הדברים הקלים - איך לאפס נכון (לפחות לדעתי) סגנונות רשימה. לאחר מכן, נסתכל על כמה בעיות נגישות לפני שנאיר אור על החמקמק
אלמנט, שאולי תופתעו ללמוד... הוא גם סוג של רשימה!
איפוס סגנונות רשימה
דפדפנים מיישמים אוטומטית סגנונות User Agent משלהם כדי לעזור במבנה החזותי של רשימות ישירות מהקופסה. זה יכול להיות נהדר! אבל אם אנחנו רוצים להתחיל עם לוח ריק ללא דעות סטיילינג, אז עלינו לאפס תחילה את הסגנונות הללו.
לדוגמה, אנו יכולים להסיר את הסמנים שליד פריטי רשימה די בקלות. שום דבר חדש כאן:
/* Zap all list markers! */
ol, ul, menu {
list-style: none;
}אבל ל-CSS המודרני יש דרכים חדשות לעזור לנו למקד למופעי רשימה ספציפיים. נניח שאנו רוצים לנקות סמנים מכל הרשימות, למעט אם הרשימות הללו מופיעות ב תוכן ארוך, כמו מאמר. אם נשלב את הכוחות של פונקציות Pseudo-class חדשות יותר של CSS :where() ו :not(), נוכל לבודד את המקרים הללו ולאפשר את הסמנים במקרים אלה:
/* Where there are lists that are not articles where there are lists... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
list-style: none;
}למה להשתמש :where() במקום :is()? הספציפיות של :where() הוא תמיד אפס, ואילו :is() לוקח את הספציפיות של האלמנט הספציפי ביותר ברשימת הבוררים שלו. אז, באמצעות :where() היא דרך פחות כוחנית לעקוף דברים וניתן לעקוף אותה בקלות.
סגנונות UA מיישמים גם ריפוד על מנת לרווח את תוכן פריט רשימה מהסמן שלו. שוב, זה מחיר די נחמד ישירות מהקופסה במקרים מסוימים, אבל אם אנחנו כבר מסירים את סמני הרשימה כמו שעשינו למעלה, אז אולי גם נמחק את הריפוד הזה. זה מקרה אחר עבור :where():
:where(ol, ul, menu) {
padding-left: 0; /* or padding-inline-start */
}בסדר, זה ימנע מפריטי רשימה נטולי סמנים להופיע מרחפים בחלל. אבל מעין זרקנו את התינוק עם מי האמבט והסרנו את הריפוד בכל המקרים, כולל אלה שבידדנו בעבר ב
. אז עכשיו הרשימות האלה עם סמנים תלויות בקצה של תיבת התוכן.
שימו לב שסגנונות UA חלים תוספת 40px אל ה
אלמנט.
אז מה שאנחנו רוצים לעשות זה למנוע מסמני הרשימה "להתלות" מחוץ למיכל. אנחנו יכולים לתקן את זה עם list-style-position נכס:
או לא... אולי זה מסתכם בהעדפה סגנונית?
חששות נגישות חדשים יותר עם רשימות
למרבה הצער, יש כמה חששות נגישות בכל הנוגע לרשימות - אפילו בזמנים מודרניים יותר אלה. דאגה אחת היא תוצאה של הגשת בקשה list-style: none; כפי שעשינו בעת איפוס סגנונות UA.
בקיצור, ספארי לא קרא רשימות מסודרות ולא מסודרות בסגנון עם list-style: none כרשימות בפועל, כמו בעת ניווט בתוכן עם קורא מסך. במילים אחרות, הסרת הסמנים מסירה גם את המשמעות הסמנטית של הרשימה. ה תיקון לתיקון הזה זה ליישם א אריה list תפקיד ברשימה וא listitem תפקיד לפריטי הרשימה אז קוראי מסך יקלוט אותם:
- ...
- ...
- ...
- ...
- ...
- ...
בְּאֹפֶן מוּזַר, ספארי רואה בכך תכונה ולא באג. בעיקרון, משתמשים ידווחו שקוראי מסך מכריזים על יותר מדי רשימות (מכיוון שמפתחים נוטים להשתמש בהן יותר מדי), אז עכשיו, רק אלה עם role="list" מוכרזים על ידי קוראי מסך, מה שבעצם לא כל כך מוזר אחרי הכל. סקוט אוהרה יש פירוט מפורט איך הכל ירד.
דאגת נגישות שניה אינה פרי יצירתנו (הידר!). אז אתה יודע איך אתה אמור להוסיף aria-label ל
אלמנטים ללא כותרות? ובכן, לפעמים זה הגיוני לעשות את אותו הדבר עם רשימה שאינה מכילה רכיב כותרת שעוזר בתיאור הרשימה.
Grocery list
אתה בהחלט לא צריך להשתמש בכל אחת מהשיטות. השימוש בכותרת או בתווית ARIA הוא רק תוספת הקשר, לא דרישה - הקפד לבדוק את האתרים שלך עם קוראי מסך ולעשות מה שמציע את חוויית המשתמש הטובה ביותר למצב.
בחדשות קצת קשורות, אריק ביילי כתב מאמר מצוין על למה ואיך הוא שוקל aria-label להיות ריח קוד.
לַחֲכוֹת,
זה גם רשימה?
בסדר, אז סביר להניח שאתה תוהה לגבי כל הדברים
אלמנטים שהכנסתי לדוגמאות הקוד. זה למעשה סופר פשוט; תפריטים הם רשימות לא מסודרות פרט לכך שהם נועדו לפריטים אינטראקטיביים. הם אפילו נחשפים לעץ הנגישות כרשימות לא מסודרות.
בימיה הראשונים של הרשת הסמנטית, האמנתי בטעות שתפריטים הם כמו
לפני שהאמינו שהם מיועדים לתפריטי הקשר (או "סרגלי כלים" כ המפרט אומר) כי זה מה שאמרו גרסאות מוקדמות של מפרט HTML. (ל-MDN יש כתבה מעניינת על כל הדברים שהוצאו משימוש הקשורים אליהם
אם אתה בכלל מעוניין.)
היום, לעומת זאת, זו הדרך הסמנטית להשתמש בתפריטים:
באופן אישי, אני חושב שיש כמה מקרים טובים לשימוש
. הדוגמה האחרונה מציגה רשימה של כפתורי שיתוף חברתי עטופים בתווית
אלמנט, ההיבט הבולט הוא שהתווית "שתף מאמר" תורמת כמות משמעותית של הקשר שעוזר לתאר את מה שהכפתורים עושים.
האם תפריטים נחוצים לחלוטין? לא. האם הם ציוני דרך ב-HTML? בהחלט לא. אבל הם שם אם אתה נהנה מפחות
s ואתה מרגיש שהרכיב יכול להשתמש ב- aria-label להקשר נוסף.
עוד משהו?
כן, יש גם את האמור לעיל
(רשימת תיאור) אלמנט, לעומת זאת, נראה ש-MDN לא מחשיב אותם לרשימות באותו אופן - זוהי רשימה של קבוצות המכילות מונחים - ואני לא יכול לומר שבאמת ראיתי אותם בשימוש. לפי MDN, הם אמורים לשמש עבור מטא נתונים, מילוני מונחים וסוגים אחרים של צמדי מפתח-ערך. פשוט הייתי נמנע מהם בטענה שכל קוראי המסך מכריזים עליהם אחרת.
אבל בואו לא נסיים את הדברים בנימה שלילית. הנה רשימה של דברים סופר מגניבים שאתה יכול לעשות עם רשימות:
