मैं फ़ॉन्ट विस्मयकारी WCAG 2.0 संगत कैसे बना सकता हूं?

Question

यदि मेरे पास साइट पर कुछ फ़ॉन्ट भयानक आइकन हैं, उदा।

<i class="fa fa-fw fa-cloud "></i> 

और डब्लुसीएजी 2.0 सत्यापनकर्ता मैं निम्नलिखित त्रुटि मिलती है के माध्यम से इस चलाएँ:

Success Criteria 1.4.4 Resize text (AA) 

    Check 117: i (italic) element used. 

    Repair: Replace your i elements with em or strong. 

    Error Line 185, Column 158: 

    <i class="fa fa-fw fa-cloud"></i> 

मुझे लगता है कि नियम वास्तव में इस मामले में लागू नहीं करना चाहिए, क्योंकि यह नहीं है यह सुनिश्चित करें कि <em> और <strong> का उपयोग उनके गैर-अर्थात् समकक्ष <i> और <b> के बजाय किया जाता है। लेकिन समस्या अभी भी मौजूद है यदि मेरे पास एक ग्राहक है जिसके लिए मुझे सभी डब्ल्यूसीएजी 2.0 बॉक्सों की जांच करने की आवश्यकता है।

तो क्या किसी को पता है कि उचित तरीका क्या होगा। क्या मुझे उन्हें <em> पर बदलना चाहिए, क्या इससे स्क्रीन-पाठकों को कोई कठिनाई मिलती है? अन्य सुझावों का स्वागत है!

Answer 1

फ़ॉन्ट भयानक दस्तावेज़ से

:

आप फ़ॉन्ट बहुत बढ़िया प्रतीक जहां कहीं भी CSS उपसर्ग पिता और आइकन के नाम का उपयोग कर रख सकते हैं। फ़ॉन्ट विस्मयकारी इनलाइन तत्वों के साथ उपयोग करने के लिए डिज़ाइन किया गया है (हमें ब्रेवटी, के लिए 'i' टैग पसंद है लेकिन 'स्पैन' का उपयोग करना अधिक अर्थात् सही है)।

तो, आप 'span' के लिए अपने 'i' टैग को बदलने का प्रयास कर सकते हैं।

Answer 2

यह बहुत अधिक निर्भर करता है कि i टैग के अंदर सामग्री क्या है, अर्थात् है। WCAG2.0 दिशानिर्देशों का एक सेट है, कठिन और तेज़ नियम नहीं।

एचटीएमएल 5 कल्पना के अनुसार:

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

From: http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-i-element

यदि सामग्री कुछ है कि होने की जरूरत है कि "पर जोर देती है" तो, कोई फायदा नहीं है कि के रूप में em टैग सभी उपयोगकर्ता एजेंटों भर में अर्थ की दृष्टि से सही है। एक जानवर के लिए एक लैटिन तकनीकी नाम के साथ, spec पर उदाहरण, ऐसा कुछ का एक आदर्श उदाहरण है जिसे इटालिसिस किया जाएगा, लेकिन जोर नहीं दिया गया है (हालांकि दृष्टि से वे वही देखेंगे)।

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p> 

स्टाइल चाहेंगे जा:

The Felis silvestris catus is cute.

इसलिए, यदि आप सही साबित कर सकते क्यों पाठ "इटैलिक" है, लेकिन जोर नहीं है, यह इसी रूप में रखने के लिए, नहीं तो एक अर्थ की दृष्टि से उपयुक्त टैग के लिए इसे बदल।

Answer 3

पहला, <i> का HTML5 में अर्थपूर्ण अर्थ है (लेकिन इससे पहले केवल प्रस्तुतिकरण था)। मान लें कि आप एचटीएमएल 5 का उपयोग कर रहे हैं, आप जिस सत्यापनकर्ता का उपयोग कर रहे हैं वह सभी<i> की अनुपस्थितियों को ध्वजांकित करने के लिए गलत है।

दूसरा, बदलते

<i class="fa fa-fw fa-cloud"></i> 

को

<span class="fa fa-fw fa-cloud"></span> 

अच्छा है, लेकिन यह असली पहुंच मुद्दा है, जो यह है कि आप के लिए किसी भी पाठ विकल्प नहीं है ठीक नहीं होती, आइकन (कम से कम ऐसा प्रतीत होता है कि आप नहीं करते हैं)।तर्क के लिए, मान लीजिए कि आपका एफए-क्लाउड आइकन <a> टैग के अंदर है। कुछ इस तरह (बूटस्ट्रैप के sr-only CSS वर्ग का प्रयोग करके):

<a href="..."> 
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span> 
    <span class="sr-only">Download</span> 
</a> 

या इस तरह (का उपयोग कर WAI-ARIA के aria-label विशेषता):

<a href="..." aria-label="Download"> 
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span> 
</a> 

समाधान है।

<a href="..."> 
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span> 
    Download 
</a> 

Answer 4

danielnixon जवाब (+1) को जोड़ना:: यहां तक ​​कि सरल हर किसी करने के लिए पाठ को दिखाने के लिए हो सकता है अगर मैं (यूआई में एक सजावटी बात नहीं एक लिंक, बटन के रूप में एक fontawesome आइकन का उपयोग करें , आदि), मैं एक WAI-ARIA विशेषता के साथ एक अवधि जोड़ें:

<span class="fa fa-small-arrow" role="presentation"></span>