एचटीएमएल अभिगम्यता: छद्म तत्वों पर पृष्ठभूमि छवियों के साथ एंकर टैग - एचटीएमएल, छवि, पृष्ठभूमि, अभिगम्यता

मेरी कंपनी कुछ परिदृश्यों की खोज कर रही है जिनका उपयोग हम आमतौर पर अपने डिजाइन में करते हैं कि हम समझ रहे हैं कि WCAG 2.0 मानकों का 100% अनुपालन नहीं हो सकता है।

ऐसा ही एक परिदृश्य है कि हमारे पास एंकर टैग (उदाहरण के लिए सोशल मीडिया लिंक) हैं, जिसमें कोई सामग्री नहीं है और एक पृष्ठभूमि छवि है जो एक छद्म तत्व पर घोषित की गई है।

सबसे अच्छे विकल्प जो मुझे ज्ञात हैं:

1. का उपयोग title लिंक पर विशेषता

2. एक में लिपटे लिंक पर पाठ जोड़ें span एक "स्क्रीन रीडर केवल" वर्ग के साथ, जैसे कि इस उदाहरण से ईबे माइंड पैटर्न:

   .clipped {
   border: 0 !important;
   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px !important;
   overflow: hidden;
   padding: 0 !important;
   position: absolute !important;
   white-space: nowrap !important;
   width: 1px !important;
   }
   

और स्पष्ट होने के लिए, यह छद्म वर्ग पृष्ठभूमि छवि स्टाइल का एक उदाहरण है जिसका हम उपयोग कर रहे हैं

.pseudo::after {
content: "";
display: block;
width: 64px;
height: 64px;
background-image: url("images/pizza.png");
}

कोई भी विचार इनमें से कौन अधिक आज्ञाकारी है?

विकल्प 1: शीर्षक, अंदर कोई पाठ नहीं

<a title="pizza title" href="http://pizza.com" class="pseudo pizza"></a>

विकल्प 2: स्क्रीन रीडर लिंक में केवल पाठ

<a href="http://pizza.com" class="pseudo pizza">
<span class="clipped">pizza text</span>
</a>

उत्तर:

उत्तर № 1 के लिए 1

संक्षिप्त उत्तर: यदि संभव हो तो दूसरे को पसंद करें।

The title विशेषता थोड़ा मुश्किल के बाद से नहीं सभी स्क्रीन पाठकों को यह डिफ़ॉल्ट रूप से पढ़ा है ।तो सुरक्षित पक्ष और १००% स्क्रीन पाठकों द्वारा कवर पर होना करने के लिए, अंदर पाठ का उपयोग करें <a> टैग और यह स्क्रीन रीडर-केवल, अगर जरूरत है ।

---

उत्तर № 2 के लिए 1

मैं भी दूसरे विकल्प के लिए वोट देते हैं, लेकिन एक और तरीका है वास्तव में लिंक में पाठ सामग्री है, लेकिन जोड़ text-indent: -5000px; (या एक अंय इसी तरह उच्च नकारात्मक मूल्य) अपने सीएसएस के लिए स्क्रीन बंद पाठ ले जाने के लिए ।

---

जवाब के लिए 0 № 3

जब यह "मुश्किल एस दो दुनिया के सर्वश्रेष्ठ के बीच चुना है, करने की कोशिश नहीं है ।

सबसे आसान समाधान:

<a href="http://pizza.com" class="pseudo pizza" title="pizza text" aria-label="pizza test">
<span class="clipped">pizza text</span>
</a>

क्यूं कर? क्यों कि title विशेषता एक टूल टिप के रूप में गैर स्क्रीनरीडर उपयोगकर्ताओं के लिए पहुँच योग्य हो जाएगा, और स्क्रीनरीडर इसे का उपयोग करने के लिए कॉन्फ़िगर नहीं किया गया है, जब कोई क्लिप्ड पाठ का उपयोग कर सकते हैं ।

का उपयोग aria-label भी बहुत महत्वपूर्ण है के रूप में नेत्रहीन तत्वों को छुपाने के लिए सीएसएस का उपयोग करने सहायक प्रौद्योगिकी के आधार पर यादृच्छिक व्यवहार में परिणाम हो सकता है इस्तेमाल किया ।उदाहरण के लिए, कुछ सहायक तकनीकें अंय उंहें रखने के दौरान गैर दृश्यमान पाठ निकालने के लिए चुनी जा सकती हैं ।

सभी screenreaders के समर्थन के लिए सबसे अच्छा विकल्प तीन विकल्पों का उपयोग करने के लिए है: aria-label हाल ही में screenreaders के लिए, पुराने लोगों के लिए काटा पाठ, और title मानक उपयोगकर्ताओं के लिए विशेषता है ।

---