मैं लिंक के लिए 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 प्रदान करने के लिए पर्याप्त होगा? तुम क्या सोचते हो?

सभी सिफारिशों का स्वागत है। अग्रिम धन्यवाद!

दिए गए साइट सुधार त्रुटि का स्क्रीनशॉट जोड़ने के लिए संपादित करें:

Siteimprove error given

2
kram08980 13 जिंदा 2021, 14:39

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 "कार्यक्षमता विवरण" कहता है, जिससे मुझे लगता है कि आप बटन के लिए एंकर का उपयोग कर रहे हैं।

मैं आपको इस पर कई उत्तरों से जोड़ सकता हूं यदि आपको इस बारे में अधिक जानकारी चाहिए कि यह पहुंच के लिए क्यों महत्वपूर्ण है।

2
Graham Ritchie 13 जिंदा 2021, 15:18
वाह, विस्तृत प्रश्न @ ग्राहम-रिची के लिए बहुत बहुत धन्यवाद :) कुछ चीजें हैं जो मुझे समझ में नहीं आती हैं। जिस कारण से मैं इसे ठीक करने का प्रयास कर रहा था, क्योंकि हमने साइटइम्प्रोव के साथ वेबसाइट का विश्लेषण किया और यह इसे एक महत्वपूर्ण त्रुटि के रूप में चिह्नित करता है। यह पढ़ता है: "लिंक में हमेशा एक टेक्स्ट विकल्प होना चाहिए। लिंक को HTML में डाला जा सकता है - इस चेक को पास करने के लिए इसे दृश्यमान होने की आवश्यकता नहीं है"। तो यह आपका सबसे अच्छा विकल्प ले रहा है और दूसरे को छोड़ रहा है। हालांकि इसे लागू करने में लागत आएगी! मैंने सोचा था कि एंकर के अंदर कुछ भी aria-label से अधिक हो जाएगा और मैं थोड़ा खो गया हूँ!
 – 
kram08980
13 जिंदा 2021, 18:20
और हाँ, एंकर href="#" मुख्य रूप से इसे यहाँ लिखने के लिए थे। सलाह के लिए धन्यवाद!
 – 
kram08980
13 जिंदा 2021, 18:22
1
तो नेत्रहीन छिपे हुए पाठ विकल्प के साथ आप एरिया लेबल का उपयोग नहीं करते हैं, नेत्रहीन छिपा हुआ पाठ पाठ के रूप में कार्य करता है, आप मौजूदा aria-label को हटा देंगे। इस कारण से सामग्री को ओवरराइड करने वाले aria-label के बारे में अब लागू नहीं है। जहां तक ​​साइटइम्प्रोव की बात है जो चीजों को संसाधित करने के तरीके में उनके अंत में एक त्रुटि प्रतीत होती है, तो मुझे देखने के लिए एक परीक्षण बिस्तर सेट करना होगा, लेकिन एक aria-label एक उपयुक्त टेक्स्ट विकल्प है। क्या आप सटीक त्रुटि का स्क्रीनशॉट ले सकते हैं (या यदि आप कर सकते हैं तो पृष्ठ के यूआरएल को त्रुटि के साथ बेहतर साझा करें) ताकि मैं दोबारा जांच कर सकूं कि यह गलतफहमी नहीं है।
 – 
Graham Ritchie
13 जिंदा 2021, 18:52
धन्यवाद फिर से ग्राहम! मैंने स्क्रीनशॉट के साथ पोस्ट को अपडेट किया है और पता वेबसाइट में कहीं भी हो सकता है जिसमें एक आइकन हो... लेकिन साइटइम्प्रोव द्वारा फ़्लैग की गई मूल त्रुटि इस सूची में "हरे दस्तावेज़ बड़े आइकन" से संबंधित प्रतीत होती है: udg.edu/ca/mitjans-de-comunicacio/notes-de-premsa हालांकि मैं पहले से ही उनके लिए भूमिका = प्रस्तुति के साथ एक नया संस्करण बना चुका हूं। यह बैकएंड देव टीम थी क्योंकि वे जल्दी में थे।
 – 
kram08980
13 जिंदा 2021, 19:18
1
मैं उलझन में हूं, मैंने पृष्ठ पर साइट सुधार चलाया और हरे रंग के आइकन से संबंधित कोई त्रुटि नहीं थी (जो समझ में आता है क्योंकि आपके पास हाइपरलिंक के भीतर लिंक टेक्स्ट है)। केवल iamge संबंधित त्रुटि पाद लेख में SVG है जहां यह शिकायत करता है कि लिंक टेक्स्ट ऑल्ट टेक्स्ट के समान है (जो कि एक गलत सकारात्मक है क्योंकि aria-label SVG के शीर्षक को ओवरराइड करता है)।
 – 
Graham Ritchie
13 जिंदा 2021, 19:44