आपकी साइट पर सुलभता के लिए, दस्तावेज़ में कॉन्टेंट का क्रम बहुत ज़रूरी होता है. स्क्रीन रीडर दस्तावेज़ के क्रम के हिसाब से, उन एचटीएमएल एलिमेंट का इस्तेमाल करके कॉन्टेंट को पढ़ेगा जिन्हें आपने कॉन्टेंट को अर्थ देने के लिए चुना है. टचस्क्रीन या माउस के बजाय, कीबोर्ड से साइट पर नेविगेट करने वाला व्यक्ति, दस्तावेज़ पर एक टैब खोलेगा. इसका मतलब है कि वे लिंक और फ़ॉर्म फ़ील्ड के बीच टैब करके, ऐक्टिव एलिमेंट से ऐक्टिव एलिमेंट पर चले जाएंगे. यह एक बार फिर उस क्रम में होगा जिस क्रम में वे दस्तावेज़ में मौजूद हैं.
इसलिए, अच्छी तरह से स्ट्रक्चर किए गए दस्तावेज़ से शुरुआत करना और सभी सही एचटीएमएल एलिमेंट का इस्तेमाल करना, सुलभता साइट बनाने का एक अहम हिस्सा है. हालांकि, सीएसएस का इस्तेमाल शुरू करने के बाद कुछ अच्छे काम को पहले जैसा किया जा सकता है. आइए, इस पर गौर करते हैं.
सोर्स बनाम विज़ुअल का क्रम
वेबसाइट नेविगेशन को अक्सर लिंक की सूची के तौर पर मार्क किया जाता है. इसके बाद, इन्हें हॉरिज़ॉन्टल बार में बदलने के लिए, Flexbox का इस्तेमाल करें. नीचे दिए गए Glitch उदाहरण में, मैंने आम तौर पर इस्तेमाल किया जाने वाला यह पैटर्न बनाया है. उदाहरण पर क्लिक करें और लिंक के बीच टैब करें. फ़ोकस बाईं से दाईं ओर तर्क के मुताबिक होगा, जिस क्रम में हम अंग्रेज़ी में पढ़ते हैं.
अगर आपने इस तरह का पैटर्न बनाया है और फिर आपको हमसे संपर्क करें को आखिर में ले जाने के लिए कहा गया हो, जो स्रोत में दूसरा है. आपके पास order प्रॉपर्टी का इस्तेमाल करने का विकल्प है, जो Flexbox में काम करती है.
नीचे दिए गए आइटम को टैब करने की कोशिश करें. इसमें आइटम को फिर से क्रम में लगाने के लिए, order प्रॉपर्टी का इस्तेमाल किया गया है.
इससे फ़ोकस आखिरी आइटम पर जाता है और वापस आकर फिर से दिखता है. टैब के क्रम के हिसाब से, दूसरा आइटम है. हालांकि, दिखने में यह आखिरी आइटम है.
ऊपर दिए गए उदाहरण में उस समस्या को हाइलाइट किया गया है जिसका इस्तेमाल सीएसएस का इस्तेमाल करके कॉन्टेंट का क्रम बदलने और उसके क्रम में बदलाव करने पर होता है. अगर इस समस्या का हल निकाला जा रहा है, तो सीएसएस का इस्तेमाल करने के बजाय, सोर्स में ऑर्डर का क्रम बदलना ही सही होगा.
किन सीएसएस प्रॉपर्टी की वजह से, क्रम बदलने की समस्या हो सकती है?
एलिमेंट को इधर-उधर ले जाने की सुविधा देने वाले किसी भी लेआउट के तरीके से यह समस्या हो सकती है. आम तौर पर, नीचे दी गई सीएसएस प्रॉपर्टी की वजह से कॉन्टेंट को फिर से क्रम में लगाने में समस्या होती है:
position: absoluteका इस्तेमाल करके, विज़ुअल तौर पर किसी आइटम को फ़्लो से बाहर ले जाना.- Flexbox और ग्रिड लेआउट में
orderप्रॉपर्टी. - Flexbox में
flex-directionके लिए,row-reverseऔरcolumn-reverseकी वैल्यू. - ग्रिड लेआउट में,
grid-auto-flowके लिएdenseवैल्यू. - लाइन के नाम या नंबर के हिसाब से या ग्रिड लेआउट में
grid-template-areasके साथ पोज़िशनिंग.
इस अगले उदाहरण में, मैंने सीएसएस ग्रिड का इस्तेमाल करके एक लेआउट बनाया है और सोर्स में यह ध्यान दिए बिना कि लाइन नंबर का इस्तेमाल करके आइटम की जगह तय की है.
इस उदाहरण को टैब में देखें और देखें कि इससे किस तरह फ़ोकस होता है. इससे बहुत भ्रामक अनुभव होता है, खासकर अगर यह एक लंबा पेज हो.
समस्या की जांच करना
कीबोर्ड से अपने पेज पर नेविगेट करना एक बहुत ही आसान जांच है. क्या आपको हर तरह की जानकारी मिल सकती है? क्या ऐसा करने पर कोई अजीब सी जंप होता है?
कॉन्टेंट का क्रम बदलने के विज़ुअल को देखने के लिए, Chrome के सुलभता इनसाइट एक्सटेंशन में, टैब स्टॉप चेकर का इस्तेमाल करें. नीचे दी गई इमेज में, उस टूल में सीएसएस ग्रिड का उदाहरण दिखाया गया है. आपके पास यह देखने का विकल्प है कि फ़ोकस को लेआउट पर कैसे जाना चाहिए.
कॉन्टेंट को फिर से क्रम में लगाना और रिस्पॉन्सिव वेब डिज़ाइन
अगर आपके पास अपने कॉन्टेंट का सिर्फ़ एक प्रज़ेंटेशन है, तो आम तौर पर अपने सोर्स को लॉजिकल ऑर्डर में दिखाना और उसे लेआउट में दिखाना मुश्किल नहीं होता. अलग-अलग ब्रेकपॉइंट पर लेआउट का इस्तेमाल करने पर, यह मुश्किल हो सकती है. उदाहरण के लिए, छोटी स्क्रीन पर किसी एलिमेंट को लेआउट के सबसे नीचे ले जाना बेहतर होगा.
फ़िलहाल, इस समस्या के लिए कोई अच्छा समाधान नहीं है. "मोबाइल-फ़र्स्ट" डेवलप करने वाली ज़्यादातर स्थितियों में, आपको अपने सोर्स और लेआउट को सही क्रम में रखने में मदद मिलेगी. मोबाइल पर कॉन्टेंट को प्राथमिकता देने के लिए, आपके चुने गए विकल्प अक्सर कॉन्टेंट के लिए अहम होते हैं. जब इस तरह के कॉन्टेंट को फिर से क्रम में लगाने की संभावना होती है, तब सबसे अहम बात यह होती है कि कॉन्टेंट को फिर से क्रम में लगाने की संभावना बनी रहे. इस बात का ध्यान रखें कि हर ब्रेकपॉइंट पर, खत्म होने का अनुभव लोगों को परेशान करने वाला तो नहीं है.