मैं लिंक के लिए a11y को बेहतर बनाने का सबसे अच्छा तरीका खोजने की कोशिश कर रहा हूं जो केवल एक अवधि के अंदर पृष्ठभूमि छवियों का उपयोग करके बनाया गया है (पुराने स्कूल बड़े पैमाने पर आइकन स्प्राइटशीट दृष्टिकोण)। वे एक बड़ी वेबसाइट का हिस्सा हैं और पूरे आइकन सिस्टम को बदलना अभी वास्तविक परिदृश्य नहीं है।
हमारे पास मूल रूप से ये दो अलग-अलग कड़ियाँ हैं;
पहली समस्या है:
<a href="#" aria-label="Functionality Description">
<span class="icon-functionality"></span>
</a>
दूसरी लिंक शैली में टेक्स्ट है, इसलिए ठीक होना चाहिए।
<a href="#" aria-label="Functionality Description">
<span class="icon-text">Functionality</span>
<span class="icon-functionality"></span>
</a>
यह पता लगाने की कोशिश करते हुए कि हमें पहले मामले में क्या करना चाहिए, मुझे एक समाधान मिला जिसके बारे में मैं निश्चित नहीं हूँ; span पृष्ठभूमि युक्त role="img" और एक खाली alt विशेषता दे रहा है।
इस तरह, एंकर में एक छवि होती है, और खाली alt विशेषता का उपयोग करके, स्क्रीन रीडर समझ जाएगा कि यह एक सजावटी चित्र है। इस मामले में, पाठक के पास क्रियाशीलता को 'समझने' के लिए एंकर से जुड़ा aria-label है।
<a href="#" aria-label="Functionality Description">
<span class="icon-functionality" role="img" alt></span>
</a>
हालांकि मुझे पता है कि यह आदर्श नहीं है और लंबी अवधि के आधार पर हम पूरे आइकन सिस्टम को बदलना चाह सकते हैं, क्या यह एक अच्छा a11y प्रदान करने के लिए पर्याप्त होगा? तुम क्या सोचते हो?
सभी सिफारिशों का स्वागत है। अग्रिम धन्यवाद!
दिए गए साइट सुधार त्रुटि का स्क्रीनशॉट जोड़ने के लिए संपादित करें:
1 उत्तर
संक्षिप्त जवाब
aria-labels का उपयोग करके साइट पर वर्तमान कार्यान्वयन में कुछ भी गलत नहीं है। यदि aria-label को पढ़ा नहीं जाता है तो आपका बेहतर उदाहरण वास्तव में अभिगम्यता के लिए बदतर है।
लंबा उत्तर
स्क्रीन रीडर द्वारा पृष्ठभूमि छवि की घोषणा नहीं की जाएगी और इसे विशुद्ध रूप से सजावटी माना जाता है।
तो निम्नलिखित (आपका पहला उदाहरण) पूरी तरह से स्वीकार्य है:
<a href="#" aria-label="Functionality Description">
<span class="icon-functionality"></span>
</a>
aria-label एक स्क्रीन रीडर के लिए आवश्यक सभी जानकारी प्रदान करेगा।
आपके दूसरे उदाहरण में aria-label वैसे भी सामग्री को ओवरराइड कर देगा, इसलिए जहां तक स्क्रीन रीडर का संबंध है, icon-text अप्रासंगिक है।
आपके तीसरे उदाहरण में aria-label सामग्री को ओवरराइड करने के साथ आपके पास एक ही चीज़ है।
इसके साथ ही कहा जा रहा है कि यदि आपके पास aria-label नहीं है तो एक शून्य alt विशेषता सही नहीं है, यह एक खाली alt विशेषता होनी चाहिए जिसे छिपाया जाना चाहिए . (इसलिए alt="" नहीं alt, अन्यथा स्क्रीन रीडर छवि के लिए एक नाम खोजने का प्रयास करेगा (जिसके परिणामस्वरूप पृष्ठभूमि छवि के साथ अप्रत्याशित व्यवहार हो सकता है)।
आपने अब पृष्ठभूमि छवि को role="img" के साथ एक्सेसिबिलिटी ट्री (जैसा कि इसे पहले अनदेखा किया होगा) में पेश किया है, इसलिए वास्तव में आपके लिए और अधिक काम किया है।
सबसे बढ़िया विकल्प
एक बेहतर विकल्प दृष्टि से छिपा हुआ टेक्स्ट है यदि आप इसे लागू करने में सक्षम हैं, क्योंकि इसमें बेहतर संगतता है (aria-label सभी परिदृश्यों में 100% समर्थित नहीं है आश्चर्यजनक रूप से) और नेत्रहीन छिपा हुआ पाठ टेक्स्ट केवल ब्राउज़र में काम करता है।
यदि आप ऐसा करने में सक्षम हैं तो अनुकूलता के कारण चीजों को करने का यह बेहतर तरीका है, लेकिन आपकी aria-label विधि 99% परिदृश्यों में ठीक है, इसलिए यदि इसे लागू करना मुश्किल है तो बहुत चिंता न करें।
निम्नलिखित उदाहरण में मैंने आपकी पृष्ठभूमि छवि के बजाय प्रदर्शन उद्देश्यों के लिए एक इनलाइन एसवीजी शामिल किया है, लेकिन मुख्य भाग visually-hidden वर्ग के साथ अतिरिक्त <span> है।
a{
width: 25%;
display: block;
}
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}<a href="#">
<span class="icon-functionality">
<!----ignore this SVG it is for demonstration purposes only-->
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="#666" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
</path>
</svg></span>
<!----This is the key part, use this instead of `aria-label` if you can.-->
<span class="visually-hidden">Functionality Description</span>
</a>अतिरिक्त विचार
बस एक त्वरित लेकिन मुझे आशा है कि href="#" केवल प्रदर्शन उद्देश्यों के लिए है।
यदि आपको साइट पर href="#" का उपयोग करने वाला कोई एंकर मिलता है, तो यह एक विरोधी पैटर्न है और पहुंच के लिए एक बुरा अभ्यास है।
इसके बजाय ये बटन होने चाहिए यदि वे कोई क्रिया करते हैं अन्यथा वे मान्य URL होने चाहिए यदि वे नेविगेशन के लिए हैं।
मैं इस चिंता को केवल इसलिए उठाता हूं क्योंकि आपका aria-label "कार्यक्षमता विवरण" कहता है, जिससे मुझे लगता है कि आप बटन के लिए एंकर का उपयोग कर रहे हैं।
मैं आपको इस पर कई उत्तरों से जोड़ सकता हूं यदि आपको इस बारे में अधिक जानकारी चाहिए कि यह पहुंच के लिए क्यों महत्वपूर्ण है।
aria-labelसे अधिक हो जाएगा और मैं थोड़ा खो गया हूँ!href="#"मुख्य रूप से इसे यहाँ लिखने के लिए थे। सलाह के लिए धन्यवाद!aria-labelको हटा देंगे। इस कारण से सामग्री को ओवरराइड करने वालेaria-labelके बारे में अब लागू नहीं है। जहां तक साइटइम्प्रोव की बात है जो चीजों को संसाधित करने के तरीके में उनके अंत में एक त्रुटि प्रतीत होती है, तो मुझे देखने के लिए एक परीक्षण बिस्तर सेट करना होगा, लेकिन एकaria-labelएक उपयुक्त टेक्स्ट विकल्प है। क्या आप सटीक त्रुटि का स्क्रीनशॉट ले सकते हैं (या यदि आप कर सकते हैं तो पृष्ठ के यूआरएल को त्रुटि के साथ बेहतर साझा करें) ताकि मैं दोबारा जांच कर सकूं कि यह गलतफहमी नहीं है।aria-labelSVG के शीर्षक को ओवरराइड करता है)।