ऐसे आइकन बटन जिनका नाम फिर भी हो
बिना शब्दों वाले बटन को स्पष्ट एक्सेसिबल लेबल दें।
ऐसे आइकन बटन जिनका नाम फिर भी हो, CoddyKit पर Web Accessibility Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Web Accessibility Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
मौन बटन की समस्या
केवल आइकन वाला बटन आँखों को स्पष्ट दिखाई देता है, लेकिन स्क्रीन रीडर शायद केवल बटन कहे और यह न बताए कि वह क्या करता है। 🔇
हर नियंत्रण को नाम चाहिए
हर संवादात्मक नियंत्रण का एक सुगम नाम होना चाहिए। पाठ वाले बटन में पाठ यह नाम देता है; केवल आइकन वाले बटन में उधार लेने के लिए कोई पाठ नहीं होता।
बटन में aria-label जोड़ें
सबसे सरल समाधान: क्रिया का नाम बताने के लिए बटन पर ही aria-label लगाएँ, भले ही उसके भीतर केवल आइकन हो।
<button aria-label="Close">
<svg aria-hidden="true">...</svg>
</button>भीतर के आइकन को छिपाएँ
भीतर के आइकन पर aria-hidden="true" लगाएँ। नाम बटन देता है; लेबल मौजूद होने के बाद आइकन केवल सजावट है।
<button aria-label="Search">
<svg aria-hidden="true" focusable="false">...</svg>
</button>या दृश्य रूप से छिपा पाठ इस्तेमाल करें
क्या आप वास्तविक पाठ पसंद करते हैं? दृश्य-रूप से-छिपा class वाला span जोड़ें। देखने वाले उपयोगकर्ता केवल आइकन देखेंगे, जबकि स्क्रीन रीडर शब्द पढ़ेगा।
<button>
<svg aria-hidden="true">...</svg>
<span class="sr-only">Add to cart</span>
</button>sr-only CSS कैसा दिखता है
दृश्य-रूप से-छिपा class पाठ को display none इस्तेमाल किए बिना एक पिक्सेल तक सीमित कर देता है; display none लगाने पर स्क्रीन रीडर से भी पाठ छिप जाता।
.sr-only {
position: absolute;
width: 1px; height: 1px;
clip-path: inset(50%);
}आइकन का नहीं, क्रिया का नाम दें
चित्र का नहीं, होने वाली क्रिया का लेबल दें। कूड़ेदान के बजाय Delete इस्तेमाल करें। उपयोगकर्ता को चिन्ह का वर्णन नहीं, क्रिया चाहिए।
अकेले title एट्रिब्यूट का उपयोग कभी न करें
HTML का title एट्रिब्यूट नाम के रूप में अविश्वसनीय है: यह स्पर्श और कीबोर्ड उपयोगकर्ताओं को पूरी तरह छोड़ देता है। इसके बजाय aria-label या छिपा हुआ पाठ इस्तेमाल करें।
टॉगल बटन को स्थिति चाहिए
mute जैसे आइकन टॉगल के लिए aria-pressed भी जोड़ें, ताकि बटन बता सके कि वह इस समय चालू है या बंद।
<button aria-label="Mute" aria-pressed="false">
<svg aria-hidden="true">...</svg>
</button>नाम को स्थिति के अनुरूप रखें
यदि आइकन बटन का अर्थ बदलता है, तो उसका नाम भी बदलें। Play बटन Pause बन जाए, तो अब उसे Play नहीं, Pause घोषित करना चाहिए।
बोले गए नाम की जाँच करें
सुगम्यता निरीक्षक में बटन चुनें और उसका परिकलित नाम पढ़ें। उसे क्रिया से मेल खाना चाहिए और कभी खाली नहीं होना चाहिए।
त्वरित जाँच
आपके पास केवल magnifier SVG वाला बटन है और कोई पाठ नहीं है। आप उसे सुगम नाम कैसे देंगे?
पुनरावलोकन: हर आइकन बटन को नाम दें
केवल आइकन वाले बटनों को aria-label या दृश्य रूप से छिपे पाठ से नाम दें, आइकन छिपाएँ और क्रिया का लेबल दें। अब हर बटन बोलता है। ✅
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “ऐसे आइकन बटन जिनका नाम फिर भी हो” पाठ निःशुल्क है?
हाँ—“ऐसे आइकन बटन जिनका नाम फिर भी हो” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Web Accessibility Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“ऐसे आइकन बटन जिनका नाम फिर भी हो” में मैं क्या सीखूँगा?
बिना शब्दों वाले बटन को स्पष्ट एक्सेसिबल लेबल दें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Web Accessibility Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Web Accessibility Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Web Accessibility Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“ऐसे आइकन बटन जिनका नाम फिर भी हो” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Web Accessibility Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Web Accessibility Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- इनलाइन SVG: role img और title
- aria-hidden से सजावटी आइकन छिपाना
- ऐसे आइकन बटन जिनका नाम फिर भी हो
- आइकन फ़ॉन्ट और उनकी एक्सेसिबिलिटी समस्याएँ