एचटीएमएल सूचियां उबाऊ हैं। वे नहीं करते do बहुत अधिक, इसलिए हम वास्तव में उनके बारे में नहीं सोचते हैं कि वे कितने व्यापक रूप से उपयोग किए जाते हैं। और हम अभी भी वही काम करने में सक्षम हैं जो हमने हमेशा उन्हें अनुकूलित करने के लिए किया है, जैसे मार्कर हटाना, क्रम उलटना, और कस्टम काउंटर बनाना।
हालाँकि, कुछ "नई" चीजें हैं - खतरों सहित - सूचियों का उपयोग करते समय जानने के लिए। खतरे ज्यादातर मामूली होते हैं, लेकिन जितना आप सोच सकते हैं उससे कहीं अधिक सामान्य हैं। हम उन तक पहुंचेंगे, साथ ही कुछ नई चीजें जो हम सूचियों के साथ कर सकते हैं, और यहां तक कि पुराने समाधानों तक पहुंचने के नए तरीके भी।
स्पष्ट करने के लिए, ये वे HTML तत्व हैं जिनके बारे में हम बात कर रहे हैं:
- आदेशित सूचियाँ
- अनियंत्रित सूचियाँ
- विवरण सूची
- इंटरएक्टिव सूचियाँ
आदेशित सूचियाँ, अक्रमित सूचियाँ और इंटरएक्टिव सूचियों में सूची आइटम होते हैं (
) जो कि हम किस प्रकार की सूची के साथ काम कर रहे हैं, के अनुसार प्रदर्शित होते हैं। एक आदेशित सूची (
) सूची आइटम के आगे नंबर प्रदर्शित करता है। अक्रमित सूचियाँ (
) और मेनू तत्व (
) सूची आइटम के बगल में बुलेट बिंदु प्रदर्शित करता है। हम इन्हें "सूची मार्कर" कहते हैं और उन्हें स्टाइल भी किया जा सकता है का उपयोग :: मार्कर छद्म तत्व। विवरण सूचियाँ वर्णन शब्दों का उपयोग करती हैं (
) और विवरण विवरण (
) के बजाय
और सूची मार्कर नहीं हैं। उनका उपयोग मेटाडेटा और शब्दावलियों को प्रदर्शित करने के लिए किया जाना चाहिए, लेकिन मैं यह नहीं कह सकता कि मैंने उन्हें कभी जंगल में देखा है।
आइए आसान चीजों से शुरू करें - कैसे सही तरीके से (कम से कम मेरी राय में) सूची शैलियों को रीसेट करें। उसके बाद, मायावी पर प्रकाश डालने से पहले हम पहुँच-योग्यता संबंधी कुछ समस्याओं पर एक नज़र डालेंगे
तत्व, जिसे जानकर आपको आश्चर्य हो सकता है... वास्तव में एक प्रकार की सूची भी है!
सूची शैलियों को रीसेट करना
सूचियों की विज़ुअल संरचना में मदद करने के लिए ब्राउज़र स्वचालित रूप से अपनी स्वयं की उपयोगकर्ता एजेंट शैलियों को बॉक्स से बाहर लागू करते हैं। यह बहुत अच्छा हो सकता है! लेकिन अगर हम स्टाइलिंग राय से मुक्त एक खाली स्लेट के साथ शुरुआत करना चाहते हैं, तो हमें पहले उन शैलियों को रीसेट करना होगा।
उदाहरण के लिए, हम सूची आइटमों के बगल में स्थित मार्करों को बहुत आसानी से हटा सकते हैं। यहाँ कुछ भी नया नहीं है:
/* Zap all list markers! */
ol, ul, menu {
list-style: none;
}लेकिन आधुनिक सीएसएस के पास विशिष्ट सूची उदाहरणों को लक्षित करने में हमारी मदद करने के नए तरीके हैं। मान लीजिए कि हम सभी सूचियों से मार्करों को साफ़ करना चाहते हैं, सिवाय इसके कि वे सूचियाँ दिखाई दें लंबी-रूप वाली सामग्री, एक लेख की तरह. यदि हम नए 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 वास्तविक सूचियों के रूप में, जैसे स्क्रीन रीडर के साथ सामग्री नेविगेट करते समय। दूसरे शब्दों में, मार्करों को हटाने से सूची का सिमेंटिक अर्थ भी हट जाता है। इस फिक्स के लिए ठीक करें यह एक लागू करने के लिए ARIA list सूची में भूमिका और ए listitem सूची आइटम के लिए भूमिका इसलिए स्क्रीन रीडर उन्हें उठा लेंगे:
- ...
- ...
- ...
- ...
- ...
- ...
अजीब तरह, सफारी इसे एक विशेषता मानती है एक बग के बजाय। मूल रूप से, उपयोगकर्ता रिपोर्ट करेंगे कि स्क्रीन रीडर बहुत अधिक सूचियों की घोषणा कर रहे थे (क्योंकि डेवलपर्स उनका अत्यधिक उपयोग करते हैं), इसलिए अब, केवल वे role="list" स्क्रीन पाठकों द्वारा घोषित किया जाता है, जो वास्तव में इतना अजीब नहीं है। स्कॉट ओ'हारा एक है विस्तृत ठहरनेवाला यह सब कैसे घट गया।
एक दूसरी सुगम्यता चिंता हमारे अपने बनाने में से एक नहीं है (हुर्रे!) तो, आप जानते हैं कि कैसे आप करने वाले हैं एक जोड़ aria-label सेवा मेरे
शीर्षक के बिना तत्व? ठीक है, कभी-कभी ऐसी सूची के साथ ऐसा करना समझ में आता है जिसमें शीर्षक तत्व नहीं होता है जो सूची का वर्णन करने में मदद करता है।
Grocery list
आप बिल्कुल नहीं करते किसी भी तरीके का इस्तेमाल करना होगा। किसी शीर्षक या ARIA लेबल का उपयोग करना केवल जोड़ा गया संदर्भ है, आवश्यकता नहीं - स्क्रीन रीडर्स के साथ अपनी वेबसाइटों का परीक्षण करना सुनिश्चित करें और वह करें जो स्थिति के लिए सर्वोत्तम उपयोगकर्ता अनुभव प्रदान करता है।
कुछ संबंधित समाचारों में, एरिक बेली ने एक उत्कृष्ट अंश लिखा वह क्यों और कैसे मानता है aria-label एक कोड गंध होना.
रुकिए,
एक सूची भी है?
ठीक है, तो, आप शायद सभी के बारे में सोच रहे हैं
वे तत्व जिन्हें मैं कोड उदाहरणों में फिसल रहा हूं। यह वास्तव में सुपर सरल है; मेनू अनियंत्रित सूचियाँ हैं सिवाय इसके कि वे इंटरेक्टिव आइटम के लिए हैं। वे अनियंत्रित सूचियों के रूप में एक्सेसिबिलिटी ट्री के संपर्क में भी हैं।
सिमेंटिक वेब के शुरुआती दिनों में, मैं गलती से मानता था कि मेनू समान थे
यह मानने से पहले कि वे संदर्भ मेनू (या "टूलबार") के लिए थे युक्ति कहती है) क्योंकि HTML स्पेक के शुरुआती संस्करणों ने यही कहा था। (एमडीएन का एक दिलचस्प लेखन है से संबंधित सभी पदावनत सामग्री पर
यदि आप बिल्कुल रुचि रखते हैं।)
आज, हालांकि, यह मेनू का उपयोग करने का सिमेंटिक तरीका है:
निजी तौर पर, मुझे लगता है कि इसके लिए कुछ अच्छे उपयोग-मामले हैं
. वह अंतिम उदाहरण एक लेबल में लपेटे गए सामाजिक साझाकरण बटनों की एक सूची दिखाता है
तत्व, उल्लेखनीय पहलू यह है कि "लेख साझा करें" लेबल संदर्भ की एक महत्वपूर्ण मात्रा में योगदान देता है जो यह वर्णन करने में मदद करता है कि बटन क्या करते हैं।
क्या मेन्यू बिल्कुल जरूरी हैं? नहीं, क्या वे हैं एचटीएमएल स्थलचिह्न? निश्चित रूप से नहीं। लेकिन वे वहाँ हैं अगर आप कम आनंद लेते हैं
s और आपको लगता है कि घटक a का उपयोग कर सकता है aria-label अतिरिक्त संदर्भ के लिए।
और कुछ?
हाँ, उपरोक्त भी है
(विवरण सूची) तत्व, तथापि, ऐसा लगता है कि MDN उन्हें सूची नहीं मानता उसी तरह — यह शब्दों वाले समूहों की एक सूची है — और मैं यह नहीं कह सकता कि मैंने वास्तव में उन्हें उपयोग में देखा है। MDN के अनुसार, उनका उपयोग मेटाडेटा, शब्दावलियों और अन्य प्रकार के की-वैल्यू पेयर के लिए किया जाना चाहिए। मैं उनसे केवल इस आधार पर बचूंगा कि सभी स्क्रीन रीडर उन्हें अलग तरह से घोषित करते हैं।
लेकिन चीजों को नकारात्मक नोट पर समाप्त नहीं करते हैं। यहां सुपर कूल चीजों की एक सूची दी गई है जो आप सूचियों के साथ कर सकते हैं:
