2012-05-08 18 views
7

मुझे पता है कि मैं अगर मैं एक क्लिक करने योग्य लिंक में एक छवि चालू करना चाहते हैं निम्न कर सकते हैं:क्या यह एक खाली एंकर टैग होना ठीक है?

<a href="http://twitter.com/username"><img src="icons/twitter.png" /></a> 

लेकिन मैं एक सीएसएस पृष्ठभूमि छवि का उपयोग करने के लिए इतना है कि मैं एक हॉवर राज्य हो सकता है पसंद करेंगे:

<a class="twitter" href="http://twitter.com/username"></a> 

# css 
.twitter{display:block; width:16px; height:16px; background:url("twitter.png")} 

यह ठीक काम करता है सिवाय इसके कि मुझे यकीन नहीं है कि यह एंकर लिंक के लिए पूरी तरह से मान्य है जिसमें कुछ भी नहीं है। क्रोम इसे ठीक करता है, जैसा कि एफएफ करता है, लेकिन मुझे यकीन नहीं है कि अन्य समान हैं।

मुझे लगता है मैं सिर्फ लिंक के अंदर कुछ पाठ डाल सकता है, और text-indent: -9999px साथ इसे छिपाने, लेकिन मुझे लगता है कि दृष्टिकोण पसंद आया कभी नहीं किया है variousreasons के लिए,। क्या मेरा कोड क्रॉस-ब्राउज़र संगत है?

उत्तर

12

यह वैध है, लेकिन अगर तुम वहाँ में कुछ रखा है और इसे दूर छिपाने के लिए

font-size: 0; 

की तरह कुछ इस्तेमाल किया यह सबसे अच्छा है। इस तरह, अगर किसी के पास सीएसएस नहीं है (उदाहरण के लिए स्क्रीन पाठक), तो वह अभी भी बताने में सक्षम होगा कि लिंक किस बारे में है।

Here's a great article on the subject

+3

या 'फ़ॉन्ट आकार: 0; ', शायद, लेकिन' em' इकाइयों के आधार पर कोई सापेक्ष आकार संभावित रूप से प्रभावित होगा। –

+0

@ डेविड थॉमस: यही कारण है कि मैंने कहा "कुछ ऐसा" कई समाधान हैं :) –

+2

या विभिन्न छवि प्रतिस्थापन तकनीकों में से कोई भी: http://css-tricks.com/css-image-replacement/ –

2

यह पूरी तरह से मान्य है, लेकिन यदि आप चाहते हैं, तो आप अंदर एक रिक्त स्थान डाल सकते हैं: &nbsp;

+0

धन्यवाद, उस बारे में सोचा नहीं था :) – stephenmurdoch

7

के बाद से यह मौलिक पहुंच सिद्धांतों टूट जाता है यह बिल्कुल भी ठीक नहीं है,। पृष्ठभूमि छवि के लिए वैकल्पिक टेक्स्ट निर्दिष्ट करने का कोई तरीका नहीं है, वैसे ही आप सामग्री छवि के लिए img टैग में alt विशेषता का उपयोग करके इसे निर्दिष्ट कर सकते हैं। डब्ल्यूसीएजी 2.0 Guideline 1.1 देखें।

यदि आप माउसओवर पर कोई छवि बदलना चाहते हैं, तो इसके लिए सीएसएस और जावास्क्रिप्ट तकनीकें हैं।

+0

पहुंच के बारे में अच्छा बिंदु, लिंक – stephenmurdoch

1

& nbsp; का उपयोग करें; पाठ के रूप में, और आप अच्छे हैं।

+1

के लिए धन्यवाद ऊपर दिए गए मेरे उत्तर पर टिप्पणियां देखें कि यह क्यों करना एक बुरा अभ्यास है। –

1

मार्कअप.tips पर हमने हाल ही में आईओएस 8 में कुछ एक्सेसिबिलिटी परीक्षण किया और पाया कि वॉयसओवर खाली लिंक पर नेविगेशन नहीं करेगा। कम से कम एक गैर-ब्रेकिंग स्पेस होना चाहिए। चाहे इसे आईओएस बग माना जाना चाहिए या नहीं, हम निश्चित नहीं हैं।

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