इसलिए हम सभी को पता होना चाहिए कि एचटीएमएल में छवियों का उपयोग करते समय वैकल्पिक पाठ प्रदान करना अच्छा अभ्यास है ... हाल ही में मैं वेबपी देख रहा हूं ... एक नया छवि प्रारूप और लाभ छोटे फ़ाइल आकार, गुणवत्ता और तेज वेबसाइटों को बनाए रखना है।

हालाँकि जब मैंने पहुँच के लिए सर्वोत्तम अभ्यास की तलाश शुरू की तो मुझे कुछ भी नहीं मिला ... कोई सलाह नहीं, वेबपी छवियों के लिए स्क्रीन पाठकों के लिए वैकल्पिक पाठ बनाने के लिए कोई शीर्ष सुझाव नहीं।

ऑल्ट टेक्स्ट परोसने के लिए मेरा कोड वर्तमान में इस तरह दिखता है ...

{% set optimizedImages = item.itemImage.one().imageVariantsThumb %}
{% set imageTitle = item.itemTitle %}
{% set imageClass = "br-100 h4 dib pa2" %}

<picture>
         {% if craft.imageOptimize.serverSupportsWebP() %}
             <source srcset="{{ optimizedImages.srcsetWebP() }}"
                             sizes="100vw"
                             type="image/webp"
                             class="{{ imageClass }}"
                             title="{{ item.itemTitle }}"
                             alt="{{ item.itemTitle }}" />
         {% endif %}
             <img src="{{ optimizedImages.src() }}"
                        srcset="{{ optimizedImages.srcset() }}"
                        sizes="100vw"
                        class="{{ imageClass }}"
                        title="{{ item.itemTitle }}"
                        alt="{{ item.itemTitle }}" />
</picture>
1
Dan Lee 14 पद 2018, 17:45

2 जवाब

सबसे बढ़िया उत्तर

source तत्व में alt विशेषता नहीं है, img तत्व के विपरीत, जहां आपने उस विशेषता को सही ढंग से जोड़ा है।

source तत्व पर, आप { जोड़ने का प्रयास कर सकते हैं aria-label विशेषता.

1
Tsundoku 14 पद 2018, 19:17

वेबपी छवियों के लिए स्क्रीन पाठकों के लिए वैकल्पिक टेक्स्ट बनाने के लिए कोई शीर्ष युक्तियाँ नहीं

क्योंकि छवि प्रारूप के बारे में ऐसा कुछ भी नहीं है जो आपके वैकल्पिक पाठ को लिखने के तरीके को प्रभावित करे।

यह किसी भी अन्य <img> या <picture> तत्व के लिए समान है।

0
Quentin 14 पद 2018, 17:52