अंतर्निहित Google लाइटहाउस परीक्षण उपकरण 0 से 100 के पैमाने पर साइटों की पहुंच का मूल्यांकन करता है। सामग्री की अधिकतम पठनीयता के लिए प्रयास करना सराहनीय है, लेकिन 100 की रेटिंग का मतलब यह नहीं है कि साइट आदर्श रूप से सुलभ है। सबूत के लिए, मैंने एक छोटा सा प्रयोग किया।

लोगों को ट्विटर पर अपनी लाइटहाउस रेटिंग्स दिखाते हुए देखना हमेशा अच्छा लगता है: इसका मतलब है कि वे गुणवत्ता की परवाह करते हैं।

लाइटहाउस 100 नंबर के साथ एक हरे रंग के सर्कल के साथ सर्वश्रेष्ठ साइटों को पुरस्कृत करता है, जिसे आप ग्राहकों और दोस्तों को गर्व से दिखाते हैं।

कोड की गुणवत्ता का मूल्यांकन करना महत्वपूर्ण है, लेकिन अधिक महत्वपूर्ण बात, इसे सही ढंग से व्याख्या करना। यदि स्वचालित टूल कहता है कि साइट 100% सुलभ है, तो जरूरी नहीं कि यह मामला हो। इसका केवल यह अर्थ है कि हमने मैनुअल परीक्षण की नींव रखी है। परीक्षणों के लिए, लाइटहाउस अपने स्वयं के नियमों के साथ एक्स-कोर लाइब्रेरी का उपयोग करता है । वह कुछ बुरी प्रथाओं का खुलासा करती है, लेकिन सभी नहीं। अन्य प्रथाएं अपने आप में खराब नहीं हैं, लेकिन अगर दुरुपयोग किया जाता है तो हानिकारक हो सकता है।

एक स्वचालित परीक्षण के साथ, आप अच्छी गुणवत्ता प्रदान नहीं करेंगे। यह साबित करने के लिए, मैंने एक संपूर्ण लाइटहाउस रेटिंग के साथ सबसे दुर्गम स्थल बनाया।

प्रागितिहास

Zach Leterman ने हाल ही में ट्वीट किया:

मुफ्त लेख विचार:

कैसे लाइटवेट वेबसाइट का निर्माण लाइटहाउस परफेक्ट स्कोर के साथ करें

और वदीम मेकव के जवाब ने मुझे काम करने के लिए प्रेरित किया।

यह पढ़ना दिलचस्प होगा! एक विचार फेंको:
<img src = picture.png alt = picture.png>

मुझे लगा कि यह एक अद्भुत विचार था: न केवल अधिकतम वेबसाइट आगंतुकों को भ्रमित करने के लिए, बल्कि ऊपर से एकदम सही लाइटहाउस रेटिंग प्राप्त करने के लिए भी।

ज्यादा से ज्यादा लोगों को काटें

हम इस सरल, अच्छी तरह से सुलभ पृष्ठ के आधार के रूप में लेते हैं।

कोडपैन: उपलब्धता 100%, चरण 0

आवश्यक सीएसएस

चलो एक साधारण से शुरू करते हैं। मैं यह सुनिश्चित करना चाहता हूं कि सीएसएस के बिना मेरी सही वेबसाइट काम न करे। ऐसा करने के लिए, body तत्व में hidden विशेषता जोड़ें। यह HTML display: none; समतुल्य है display: none; सीएसएस में (यदि आप पहुंच को बनाए रखते हुए सामग्री छुपाने के बारे में पढ़ना चाहते हैं, तो स्कॉट ओ'हारा की "समावेशी छिपाई" देखें )।

एचटीएमएल

 <body hidden> ... </body>

बिल्कुल साफ पेज

hidden सामग्री को नेत्रहीन छुपाता है और इसे एक्सेसिबिलिटी ट्री से निकाल देता है। यह अकेले बिल्कुल सभी आगंतुकों को खत्म करने और लाइटहाउस परीक्षणों को पारित करने के लिए पर्याप्त है, लेकिन हम आसान तरीकों की तलाश नहीं कर रहे हैं। मैं एक ऐसी साइट बनाना चाहता हूं जो पूरी तरह से दुर्गम हो और तकनीकी रूप से अभी भी सामग्री प्रदर्शित करती हो। इसलिए, CSS जोड़ें और सामग्री को वापस लाएं।

एचटीएमएल

 <head> <link rel="stylesheet" href="style.css"> </head> <body class="loaded" hidden> ... </body>

सीएसएस

 .loaded { display: block; }

हम वापस वही हैं जो हमारे पास पहले था, लेकिन सीएसएस को अब लोड करना चाहिए।

कोडपैन: 100% उपलब्धता चरण 1

अनिवार्य जेएस

एक और निर्भरता जोड़ें। अब मैं जो सामग्री जोड़ रहा हूं, उसे प्रदर्शित करने का वर्ग HTML में नहीं है, बल्कि JS के माध्यम से है।

एचटीएमएल

 <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body hidden> ... </body>

जे एस

  document.querySelector('body').classList.add('loaded');

वाह! साइट अभी भी नहीं बदली है, लेकिन कम से कम कुछ सामग्री प्रदर्शित करने के लिए, सीएसएस और जेएस फ़ाइलों को लोड किया जाना चाहिए और सही ढंग से काम करना चाहिए।

कोडपैन: 100% उपलब्धता चरण 2

ऐसा लगता है कि यह प्रथम लाइटहाउस परीक्षण का समय है। अपनी उंगलियों को पार करो!

CSS और JS वाली वेबसाइट पर सही परिणाम। यह बहुत अच्छा है, लेकिन हम बेहतर कर सकते हैं।

स्क्रीन पाठकों के साथ नरक करने के लिए

स्क्रीन पाठकों के साथ हस्तक्षेप करने के कई तरीके हैं। सबसे आसान और सबसे कुशल तरीका है aria-hidden="true" विशेषता का उपयोग करना। इस शक्तिशाली विशेषता का उपयोग सावधानी के साथ किया जाना चाहिए क्योंकि यह एक्सेसिबिलिटी ट्री से आइटम निकालता है। इसका उपयोग आमतौर पर अनावश्यक या बाहरी सामग्री को हटाकर स्क्रीन पाठकों के साथ लोगों की मदद करने के लिए किया जाता है । हमारी साइट पर, हम body तत्व के लिए इस विशेषता को निर्धारित करते हैं।

एचटीएमएल

 <body hidden aria-hidden="true"> ... </body>

अब स्क्रीन रीडर्स वाले लोग उन "दुर्लभ" क्षणों में से एक का अनुभव करेंगे जब उनका सामना किसी दुर्गम स्थल से होगा ।

कोडपैन: 100% उपलब्धता चरण 3

हमने कीबोर्ड वाले उपयोगकर्ताओं को काट दिया

कीबोर्ड के साथ उपयोगकर्ता एक इंटरैक्टिव तत्व से दूसरे में जाने के लिए टैब की कुंजी दबाकर पृष्ठ को नेविगेट कर सकते हैं। ब्राउज़र फ़ोकस में तत्वों के चारों ओर रूपरेखा दिखाता है।

इससे निजात दिलाते हैं।

सीएसएस

 *:focus { outline: none !important; }

CSS की सिर्फ तीन पंक्तियों में हमने साइट से लोगों के एक पूरे समूह को काट दिया। तकनीकी रूप से, वे अभी भी पृष्ठ के साथ बातचीत कर सकते हैं: टैब दबाकर, अभी भी इंटरैक्टिव तत्वों के बीच एक संक्रमण है, बस फ़ोकस संकेतक नहीं दिखाया गया है। चूंकि हमारे प्रयोग में हमें लोगों की क्षमताओं को पूरी तरह से सीमित करने की आवश्यकता है, आइए कीबोर्ड को पूरी तरह से बंद कर दें।

जे एस

 document.addEventListener('keydown', function(e) { e.preventDefault(); })

हमारा एप्लिकेशन अब सभी कुंजियों की डिफ़ॉल्ट कार्यक्षमता को हटा देता है।

कोडपैन: 100% उपलब्धता चरण 4

अगले परीक्षण के लिए समय।

फिर भी एकदम सही।

ठीक है, यह गंदी चाल के लिए समय है।

उच्च विपरीत मोड के लिए शोषण

विंडोज पर, दृष्टिहीन लोग तथाकथित उच्च कंट्रास्ट मोड को चालू करके इसके विपरीत में सुधार कर सकते हैं।

फिर संपूर्ण ऑपरेटिंग सिस्टम ब्राउज़र सहित सभी अनुप्रयोगों के लिए एक विपरीत योजना का उपयोग करना शुरू कर देता है।

हम विशेष रूप से इन उपयोगकर्ताओं के लिए media संपत्ति को लक्षित कर सकते हैं।

सीएसएस

 @media screen and (-ms-high-contrast: active) { /* High contrast styling rules */ * { color: #000000; } }

ये नियम केवल तभी लागू होते हैं जब विंडोज में उच्च कंट्रास्ट मोड सक्षम हो। दुर्भाग्य से, हम यह नहीं जानते कि थीम किन रंगों का उपयोग करती है: प्रकाश या अंधेरा। उपयोगकर्ता की प्राथमिकताओं के आधार पर सभी तत्वों के लिए रंग #000000 सेट करना काम कर भी सकता है और नहीं भी। 50% की यह संभावना मुझे शोभा नहीं देती, लेकिन हम भाग्यशाली थे: विंडोज के विपरीत रंगों की तुलना सीएसएस सिस्टम रंग में कीवर्ड के साथ की जाती है। आप इन खोजशब्दों का उपयोग कर सकते हैं और सुनिश्चित कर सकते हैं कि हमारा पाठ हमेशा किसी भी पृष्ठभूमि के रंग के साथ उच्च विपरीत मोड में मेल खाता है। ओएस में पृष्ठभूमि का रंग सीएसएस में windows के रंग से मेल खाता है। इसलिए, पृष्ठ के सभी पाठ के लिए इस रंग को निर्दिष्ट करें।

सीएसएस

 @media screen and (-ms-high-contrast: active) { * { color: window !important; } }

हे भगवान! यह तो मतलबी है। अब मुझे फेसबुक और उबेर से नौकरी के ऑफर मिलेंगे।

कोडपैन: 100% उपलब्धता 5 कदम

माउस उपयोगकर्ताओं के साथ नरक करने के लिए

यहां यह बहुत आसान है: बस स्क्रीन से कर्सर को हटा दें।

सीएसएस

 *, *:hover { cursor: none; }

माउस के साथ उपयोगकर्ता के लिए, cursor: none; संपत्ति cursor: none; कीबोर्ड के साथ उपयोगकर्ता के लिए वैसा ही है जैसा कि outline: none; संपत्ति करता है outline: none; । एक कर्सर के बिना, पहली बार में नेविगेट करना कठिन है, लेकिन तत्व अभी भी क्लिक करने योग्य हैं। आइए हमारे एप्लिकेशन की गुणवत्ता में सुधार करें, एक बार फिर उपयोगकर्ताओं को एक सुलभ इंटरफ़ेस के साथ ट्रिमिंग करें।

सीएसएस

 body { pointer-events: none; }

खैर, एक और बात। pointer-events: none; निर्दिष्ट करने के बाद pointer-events: none; उपयोगकर्ता अब किसी भी आइटम पर क्लिक नहीं कर सकते हैं। यह संपत्ति अच्छी तरह से समर्थित है, लेकिन फ़ंक्शन को यथासंभव अधिक से अधिक ब्राउज़र पर काम करने के लिए, प्रगतिशील गिरावट के सिद्धांत को लागू करना उचित है।

जे एस

 function removeA11y() { if ("pointerEvents" in document.body.style) { console.log('pointer-events supported') return; } document.addEventListener('click', function(e) { e.preventDefault(); }) } removeA11y();

यह फ़ॉलबैक स्क्रिप्ट चलाता है और यदि ब्राउज़र pointer-events प्रॉपर्टी का समर्थन नहीं करता है, तो सभी तत्वों से क्लिक इवेंट को हटा देता है।

कोडपैन: 100% उपलब्धता चरण 6

वाह! साइट अभी भी पूरी तरह से सुलभ है!

नरक की पठनीयता के लिए

हम अब माउस या कीबोर्ड का उपयोग नहीं कर सकते हैं, लेकिन हम अभी भी पृष्ठ पर पाठ देखते हैं। गड़बड़।

सीएसएस

 body { opacity: 0.03; }

सामग्री पृष्ठ पर बनी रही, लेकिन लगभग अदृश्य थी। बहुत खूब!

कोडपैन: 100% उपलब्धता 7 चरण

सफारी पढ़ें शोषण

विभिन्न ब्राउज़रों में साइट का परीक्षण करते समय, मैंने देखा कि यह अभी भी सफारी में रीड मोड में उपलब्ध है।

जैसा कि यह निकला, आप body में न्यूनतम फ़ॉन्ट आकार निर्दिष्ट करके इस मोड को बंद कर सकते हैं।

सीएसएस

 body { opacity: 0.03; font-size: 1px; }

कोडपैन: 100% उपलब्धता 8 कदम

स्रोत के साथ नीचे

साइट कम और अच्छी दृष्टि वाले लोगों, एक माउस, कीबोर्ड और स्क्रीन रीडर के उपयोगकर्ताओं के लिए दुर्गम है।

यदि कोई अनुभवी उपयोगकर्ता ऐसी साइट पर जाता है, तो एक आंतरिक हैकर उसमें जाग सकता है और वह उसे हैक करने का प्रयास करेगा। मेरा मतलब है, पृष्ठ का स्रोत कोड देखें।

हमारी साइट की दुर्गमता के केक पर चेरी पाठ HTML mnemonics में रूपांतरण है । ये इकाई mnemonics आम तौर पर आरक्षित, अदृश्य वर्णों को प्रदर्शित करने के लिए उपयोग की जाती हैं और जो मानक कीबोर्ड का उपयोग करके दर्ज करना मुश्किल है। हम इनका इस्तेमाल मोटापे के लिए करते हैं।

कोडपैन: 100% उपलब्धता 9 चरण

और आखिरी परीक्षा।

निष्कर्ष

लेख में, मैं लाइटहाउस सिस्टम या इसके एक्सिस-कोर इंजन का मजाक नहीं बनाना चाहता था। मैं नियमित रूप से दोनों उपकरणों का उपयोग करता हूं और मुझे खुशी है कि वे हैं।

यह लेख हमारे बारे में है। रेटिंग हमारे ऐप्स और साइटों की गुणवत्ता का संकेत देती हैं, लेकिन हमें इन नंबरों पर आंख मूंदकर भरोसा नहीं करना चाहिए। हमें यह समझना चाहिए कि स्वचालित परीक्षण केवल पहला कदम है।

अगली बार जब आप एक लाइटहाउस स्कोर देखते हैं, तो रेटिंग के बगल में पाठ पढ़ें।

“यह परीक्षण आपके वेब एप्लिकेशन की उपलब्धता को बेहतर बनाने के अवसरों की पहचान करता है । स्वचालित परीक्षण समस्याओं के केवल एक भाग का पता लगा सकता है, इसलिए मैन्युअल परीक्षण की भी सिफारिश की जाती है। "

हम एक सुखद एहसास के लिए साइटों का परीक्षण और अनुकूलन करते हैं, जो उच्च रेटिंग देता है। हम लोगों के लिए ऐसा करते हैं: साइट को अधिक से अधिक उपयोगकर्ताओं के लिए सुलभ बनाने के लिए। डिजाइन और प्रोग्रामिंग में, हम पूरी तरह से स्वचालन पर भरोसा नहीं करते हैं। इसलिए परीक्षण में आपको ऐसा नहीं करना चाहिए।

प्रूफरीडिंग और फीडबैक के लिए एरिक का धन्यवाद।

एक आदर्श रेटिंग लाइटहाउस के साथ सबसे दुर्गम वेबसाइट बनाएं

प्रागितिहास

ज्यादा से ज्यादा लोगों को काटें

आवश्यक सीएसएस

एचटीएमएल

एचटीएमएल

सीएसएस

अनिवार्य जेएस

एचटीएमएल

जे एस

स्क्रीन पाठकों के साथ नरक करने के लिए

एचटीएमएल

हमने कीबोर्ड वाले उपयोगकर्ताओं को काट दिया

सीएसएस

जे एस

उच्च विपरीत मोड के लिए शोषण

सीएसएस

सीएसएस

माउस उपयोगकर्ताओं के साथ नरक करने के लिए

सीएसएस

सीएसएस

जे एस

नरक की पठनीयता के लिए

सीएसएस

सफारी पढ़ें शोषण

सीएसएस

स्रोत के साथ नीचे

निष्कर्ष

लिंक और संसाधन

More articles: