मैं फ़ॉन्ट-भयानक का उपयोग करता हूं और उनके फोंट को इस तरह प्रदर्शित करता हूं :
<i class="icon-lock"></i>
यह एक अच्छा सा लॉक प्रतीक प्रदर्शित करेगा। उपयोगकर्ता को यह जानने के लिए कि वास्तव में इसका क्या मतलब है, मैंने शीर्षक और ऊंचाई जैसी विशेषताओं को जोड़ने की कोशिश की, लेकिन कोई फायदा नहीं हुआ।
क्या कोई विशेषता है जो मैं उस <i>टैग के लिए उपयोग कर सकता हूं जो लिंक के लिए छवियों और शीर्षक के लिए समान कार्य को निष्पादित करता है?
जवाबों:
आप किसी तत्व titleपर विशेषता का उपयोग कर सकते हैं i, किसी भी तत्व की तरह, जैसे
<i class="icon-lock" title="This symbolizes your being locked inside"></i>
क्या यह मदद करता है एक अधिक कठिन मुद्दा है। आमतौर पर ब्राउज़र titleमाउस पर "टूलटिप" के रूप में विशेषता मान दिखाते हैं , लेकिन आइकन पर उपयोगकर्ता माउस क्यों करेगा? और ऐसे उपकरण खराब प्रयोज्य के हैं; तथाकथित सीएसएस टूलटिप्स अक्सर बेहतर काम करते हैं।
स्क्रीन रीडर उपयोगकर्ता को वैकल्पिक एक्सेस दे सकते हैं title, लेकिन मुझे यकीन नहीं है कि वे खाली सामग्री वाले तत्वों के साथ क्या करते हैं।
titleआम तौर पर पढ़ा जाता है, यहां तक कि बिना किसी सामग्री के भी, इसलिए जब तक कि तत्व स्वयं चयन करने योग्य हो
<i>टैग आम तौर पर चयन-सक्षम नहीं होते हैं, जब तक कि आप उनके लिए एक टैबइंडेक्स नहीं जोड़ते हैं।
titleविशेषता काम करेगी, या शायद नहीं, कौन जानता है? " 120 लोगों द्वारा अपवोट करने के लिए काफी अच्छा समझा गया था, जो कि अधिकांश वेब डेवलपर्स से स्क्रीनरीडर का समर्थन प्राप्त करता है (मुझे शामिल है, मैं मानता हूं) पूर्ण प्रयास को दिखाता है। एक पेशे के रूप में, हमें यह पता लगाने की आवश्यकता है कि इन समस्याओं को इससे अधिक कठोरता से कैसे संबोधित किया जाए।
titleएक नेत्रहीन छिपा पाठ (जैसे .sr-onlyबूटस्ट्रैप में वर्ग) के साथ जोड़ने की सिफारिश की गई है । अच्छे उदाहरण यहाँ देखें: fontawesome.com/how-to-use/on-the-web/other-topics/…
WAI-ARIA के अग्रिम के साथ , फ़ॉन्ट आइकन का उपयोग करते समय, आपको पहुंच में सुधार के लिए संभवतः निम्नलिखित संयोजन का उपयोग करना चाहिए:
लेखक MAY, सावधानी के साथ, सहायक तकनीकों से दृश्यमान रूप से प्रदान की गई सामग्री को छिपाने के लिए aria- छिपी का उपयोग करते हैं, यदि इस सामग्री को छुपाने का कार्य निरर्थक या बाहरी सामग्री को हटाकर सहायक प्रौद्योगिकियों के उपयोगकर्ताओं के लिए अनुभव में सुधार करना है। स्क्रीन पाठकों से दृश्यमान सामग्री को छिपाने के लिए aria- हिडन का उपयोग करने वाले लेखक यह सुनिश्चित करते हैं कि सहायक तकनीकों के समान या समकक्ष अर्थ और कार्यक्षमता उजागर हो।
मुझे आपके सटीक उपयोग के मामले की जानकारी नहीं है, इसलिए मैं फोन नंबर प्रदान करने के सरल मामले का उपयोग करने के लिए स्वतंत्रता लेता हूं। वरीयता के घटते क्रम में, मैं उपयोग करूंगा:
<span aria-label="Our phone number">
<span class="icon-phone" aria-hidden="true"></span>
+33 7 1234576
</span>
(or any variation implying:
- an `i` element with a `role` presentation attribute
instead of the inner `span` element
- a `title` attribute instead of an `aria-label` attribute)
<span class="icon-phone"
aria-label="Our phone number">+33 7 1234576</span>
(or any variation using `title` instead of `aria-label`)
<i class="icon-phone" role="presentation"
aria-label="Our phone number">+33 7 1234576</i>
(or any variation using `title` instead of `aria-label`)
कृपया ध्यान दें कि एरीया-लेबल और शीर्षक विशेषताओं को तत्व की सामग्री का वर्णन करना चाहिए । अगला भाई तत्व नहीं। इसलिए मुझे लगता है कि निम्नलिखित समाधान चश्मे के अनुसार नहीं है (भले ही अधिकांश एक्सेसिबिलिटी टूल वास्तव में एक ही देखने योग्य व्यवहार होगा जैसे कि फोन नंबर वास्तव में spanतत्व के अंदर था ):
<span class="icon-phone"
title="Our phone number"></span>+33 7 1234576
आपको <span>इसके बजाय उन रेखाओं का उपयोग या कुछ करना चाहिए । title=""होवर पर कुछ टेक्स्ट देने के लिए आप उस विशेषता का उपयोग कर सकते हैं , यदि आप वही खोज रहे हैं जो आप देख रहे हैं। जहाँ तक स्क्रीन पाठकों, या एसईओ मूल्य तक पहुँच प्रदान करने की बात है, आप निम्नलिखित सीएसएस जोड़ सकते हैं:
.icon-lock{
text-indent:-99999px;
}
और फिर अपना मार्कअप लिखें जैसे:
<span class="icon-lock">What I want the screen reader to say</span>
<i>HTML 4.01 में पदावनत नहीं किया गया था।
<u>और <s>, मैं हमेशा खुद को सोचता हूं <b>और <i>वैसे भी, खासकर जब से वे हैं <em>और हैं <strong>, लेकिन आप बिल्कुल सही हैं।
<i>टैग पाठ को चिह्नित करने के लिए हैं। आप इस टैग के शब्दार्थ अर्थ को उस चीज़ में बदल रहे हैं जिसका इटालिक का उपयोग करने से कोई लेना-देना नहीं है (और यहां तक कि इटैलिक टैग एक बुरा विचार है)। आपको SPANइसके बजाय उपयोग करना चाहिए ।
इटैलिक तत्व altविशेषताओं का समर्थन नहीं करते हैं, IMGतत्व करते हैं। यदि आप एक ALTविशेषता चाहते हैं , तो एक छवि का उपयोग करें।
<i>कहते हैं , इसलिए आपको शायद यह कहना चाहिए कि यदि आप इसे इस तरह से करते हैं तो क्या गलत होगा। इस तरह से कुछ (इस मामले में <i>) का उपयोग करना जो मूल रूप से इरादा नहीं था, इसमें जोखिम हैं, लेकिन इस मामले में कि इस तथ्य से जोखिम को कम किया गया है कि सैकड़ों-लाखों उपयोगकर्ताओं के साथ हजारों सम्मानित साइटें पहले से ही फ़ॉन्ट-भयानक का उपयोग कर रही हैं।
मुझे लगता है कि फोंट के लिए भूमिका जो छवियों की तरह काम करती है, उसे भूमिका = "img" के लिए आरक्षित किया जाना चाहिए। इसके बाद aria-label = "alt-text" के साथ प्रयोग किया जा सकता है। यह ARIA पहुँच नाम एल्गोरिथम के कारण काम करता है। देखें: Img भूमिका का उपयोग कर Aria तकनीक ।
.sr-onlyएक अलग पर उपयोग करें<span>।