2016-08-30 7 views
8

From MDN:पहुँच: एसआर केवल या aria-लेबल

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

<button aria-label="Close" onclick="myDialog.close()">X</button> 

बूटस्ट्रैप प्रलेखन के अनुसार:

साथ .sr-केवल

तो मुझे लगता है कि मैं भी लिख सकता है, स्क्रीन रीडर को छोड़कर सभी उपकरणों के लिए एक तत्व छिपाएं:

<button onclick="myDialog.close()"><span class="sr-only">Close</span>X</button> 

बूटस्ट्रैप समर्थक में जेक्ट, मैं कैसे चुन सकता हूं कि कौन सा पसंद करना है?

+0

'sr-only' के पास पहुंच के साथ कुछ भी नहीं है। यह स्क्रीन पाठकों को छोड़कर ** ** तत्व छुपाता है। इसका मतलब यह नहीं है कि यह स्वचालित रूप से तत्व स्क्रीन रीडर अनुकूल बनाता है। –

+3

ध्यान दें कि बीएस 4 '.sr-only' में कोड में ' कोड में बदल दिया गया है। – 10basetom

उत्तर

8

एमडीएन उदाहरण में, एक स्क्रीन रीडर केवल "बंद" शब्द बोलता है क्योंकि aria-label बटन में टेक्स्ट को ओवरराइड करता है। यह बूटस्ट्रैप के बिना कोड का पुनः उपयोग करने के बावजूद भी काम करेगा।

आपके उदाहरण में, एक स्क्रीन रीडर "करीबी एक्स" बोलेंगे क्योंकि आप स्क्रीन पाठकों से "एक्स" छिपाने के लिए कुछ भी नहीं कर रहे हैं। आप इसे कक्षा के साथ छिपाने के लिए एक टेक्स्ट नोड भी जोड़ रहे हैं।

मैं एमडीएन से उदाहरण का उपयोग करूंगा।

+0

यह वास्तव में स्क्रीन रीडर/टेक्स्ट-टू-स्पीच क्लाइंट पर निर्भर करता है। मैं पहले इन लेखों से परामर्श लेता हूं, लेकिन ध्यान रखें कि वे पहले से ही पुराने हो सकते हैं: (1) [टेक्स्ट लिंक: स्क्रीन रीडर के लिए सर्वोत्तम अभ्यास] (http://www.deque.com/blog/text-links-practices- स्क्रीन पाठकों /); (2) [शीर्षक और एरिया-लेबल विशेषता अभिगम्यता परीक्षण केस] (http://pauljadam.com/demos/title-aria-label.html)। – 10basetom

संबंधित मुद्दे