JavaScript एक्सेसिबिलिटी
JavaScript में एक्सेसिबिलिटी का मतलब है कि ऑर्डर नियंत्रण कीबोर्ड से चले, और स्थिति का बदलाव सुनाया जाए। यह पेज असली बटन इस्तेमाल करता है। click दिखने वाली पंक्ति को tea / regular कर देता है।
यह त्रुटियों वाला पेज नहीं है
पिछले पेज ने missing size फेंका था। उसकी पंक्ति caught / missing size पढ़ी जाती थी। यह पेज throw नहीं करता। नियंत्रण पेज पर रहता है, और परिणाम वहीं लिखा जाता है जहाँ लोग उसे देख सकें।
बटन का इस्तेमाल करो
<button type="button"> अपना click श्रोता माउस क्लिक, Enter और Space पर चलाता है। केवल click वाला div कीबोर्ड को अनदेखा करता है। बटन का पाठ वह नाम है जो सुनाई देता है।
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
});
पंक्ति tea / regular बन जाती है। Enter और Space वही श्रोता चलाते हैं।
नई पंक्ति सुनाओ
textContent स्क्रीन बदलता है। स्क्रीन रीडर एक चुप बदलाव चूक सकता है। aria-live="polite" उससे कहता है कि मौजूदा वाक्य के बाद नया पाठ बोले।
<p id="line" aria-live="polite">…</p>
बदलाव सुनाया जाता है, और मौजूदा वाक्य नहीं कटता। assertive बीच में काटता है। यह पेज polite इस्तेमाल करता है।
size न हो तो बटन बंद करो
ऑर्डर { drink: "tea" } है और size नहीं है। button.disabled को true करो। बटन दिखता रहता है। click श्रोता नहीं चलता।
const order = { drink: "tea" };
const button = document.querySelector("button");
if (!order.size) {
button.disabled = true;
}
बटन पेज में रहता है, और ऑर्डर नहीं भेजता। तत्व को हटाओ मत।
फ़ोकस बटन पर छोड़ो
जिसने बटन चलाया, वह पहले से वहीं है। पंक्ति लिखो, फिर button.focus() बुलाओ। line.focus() मत बुलाओ, और रूपरेखा मत छिपाओ।
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
फ़ोकस बटन पर रहता है। पंक्ति को tabindex की ज़रूरत नहीं। रूपरेखा दिखती रहती है।
चार आदतें
हर पंक्ति इस ऑर्डर नियंत्रण का एक फ़ैसला है।
📊 सुलभ ऑर्डर नियंत्रण
| आदत | उपयोग | बचें |
|---|---|---|
| क्रिया | button के साथ type="button" |
केवल click सुनने वाला div |
| स्थिति | पंक्ति पर aria-live="polite" |
चुप पाठ बदलना |
| अनुपलब्ध | button.disabled = true |
बटन हटाना |
| फ़ोकस | button.focus() और दिखती रूपरेखा |
line.focus() या outline: none |
बटन क्रिया लेता है। जीवित पंक्ति परिणाम बोलती है। disabled ऐसा नियंत्रण रखता है जो चल नहीं सकता। रूपरेखा दिखाती है कि फ़ोकस कहाँ है।
पेज की पंक्ति
पेज एक बटन को जीवित पंक्ति से जोड़ता है। कुछ फेंका नहीं जाता।
<!DOCTYPE html>
<html>
<body>
<button id="order" type="button">Place order</button>
<p id="line" aria-live="polite">…</p>
<script>
const button = document.getElementById("order");
const line = document.getElementById("line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
</script>
</body>
</html>
click के बाद पंक्ति tea / regular पढ़ी जाती है। Enter और Space वही करते हैं। caught / missing size त्रुटियों वाले पेज का था।
काउंटर पर
- बटन पर क्लिक करो। पंक्ति tea / regular पढ़ी जाती है।
- उसी बटन पर Enter दबाओ। श्रोता फिर चलता है।
- पंक्ति पर aria-live="polite" रखो ताकि नया पाठ सुनाया जाए।
- size न हो तो button.disabled को true करो। बटन रहता है, और click नहीं चलता।
- सफल click के बाद button.focus() बुलाओ। line.focus() मत बुलाओ।
आम चूक
div पर click कीबोर्ड नियंत्रण नहीं है। disabled बटन मिटाने के बराबर नहीं है।
- ऑर्डर क्रिया के लिए
divइस्तेमाल करना - पंक्ति बदलना और
aria-liveभूल जाना sizeन हो तो बटन हटा देना- सफल ऑर्डर के बाद
line.focus()बुलाना - फ़ोकस की रूपरेखा छिपाना
- पंक्ति को caught / missing size पढ़ना
यह याद रखो
buttonऑर्डर क्रिया माउस, Enter और Space से चलाता हैaria-live="polite"tea / regularको बिना काटे सुनाता हैsizeन हो तोbutton.disabledtrueहोता है और बटन पेज पर रहता है- फ़ोकस बटन पर रहता है
- पेज की पंक्ति tea / regular है
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी