علامة صورة Avatar تفتقد سمة alt

ساهم تجربة المستخدم
1

أقوم بالتحقيق في مستخدم لا يمكنه رؤية الصفحة الرئيسية للموقع (قضية مختلفة).

أثناء ذلك، قمت بتشغيل مصدر موقعي عبر أداة التحقق التابعة لـ W3. وقد أظهرت الأداة العديد من الأخطاء على النحو التالي:

يجب ألا يحتوي عنصر img الذي لا يحتوي على سمة alt على أي سمات aria-* باستثناء aria-hidden.

وبالرغم من أن هذه الأخطاء لا تسبب توقف الموقع عن العمل بشكل واضح، إلا أنني أعتقد أنه يجب ترتيبها في وقت ما.

أعتذر، لكنني لست في وضع يسمح لي بتقديم طلب سحب (PR) في الوقت الحالي.

3 إعجابات
2

أنا فضولي لمعرفة ما إذا كان التنسيق الحالي سيسبب مشكلة لقارئات الشاشة، أو هل ستستخلص المعلومات المطلوبة من وسم aria-label للصورة الرمزية؟

يبدو أن إضافة alt="" إلى الصورة ستزيل رسالة الخطأ من المصحح.

إعجابَين (2)
3

أفترض أن هذا يتعلق بصور الرموز (الآفاتار) في قائمة المواضيع؟ تلك هي الصور التي أراها بـ alt فارغ وـ aria-label مملوء.

وفقًا لهذا الرابط `img` with null `alt` and non-null `aria-label` attributes - Screen reader compatibility

ستقوم أحدث قارئات الشاشة بقراءة aria-label، وهو ما أعتقد أنه نيتنا هناك. ومع ذلك، يجب أن نستخدم alt بدلاً من aria-label، لأن ذلك سيغطي قارئات الشاشة الأقدم وسيكون تقنيًا صحيحًا.

3 إعجابات
4

لأغراض تحسين محركات البحث (SEO)، وخاصة جوجل، سيكون من الرائع جداً إذا أمكن ملء سمة alt لصور الملف الشخصي بنفس النص المستخدم حالياً في سمة title.

هل من الممكن القيام بذلك بنفسي؟

أحاول فعل ذلك على النحو التالي وتعديل {{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}:

<script type="text/x-handlebars" data-template-name="list/posters-column.hbr">
<td class='posters'>
{{#each posters as |poster|}}
  {{#if poster.moreCount}}
    <a class="posters-more-count">{{poster.moreCount}}</a>
  {{else}}
    <a href="{{poster.user.path}}" data-user-card="{{poster.user.username}}" class="{{poster.extraClasses}}">{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}</a>
  {{/if}}
{{/each}}
</td>
</script>

لكن يبدو أنه لا توجد طريقة لإضافة وسم إلى الصورة عند تعديل قوالب Handlebars.

هل لديك أي فكرة؟

3 إعجابات