Avatar Img Tag fehlt das Alt-Attribut

Beitragen UX
1

Ich untersuche einen Benutzer, der die Startseite der Seite nicht sehen kann (ein anderes Problem).

Dabei habe ich den Quellcode meiner Seite durch den Validator des W3C laufen lassen. Dies ergab viele Fehler der folgenden Art:

Ein img-Element ohne alt-Attribut darf keine aria-*-Attribute außer aria-hidden enthalten.

Obwohl dies die Seite offensichtlich nicht beschädigt, dachte ich, es sollte irgendwann bereinigt werden.

Entschuldigung, ich bin derzeit nicht in der Lage, einen PR zu erstellen.

3 „Gefällt mir“
2

Ich bin neugierig, ob das aktuelle Markup Probleme für Bildschirmleser verursacht oder ob diese die benötigten Informationen aus dem aria-label-Tag des Avatars beziehen.

Es sieht so aus, als würde das Hinzufügen von alt="" zum Bild die Fehlermeldung des Validators entfernen.

2 „Gefällt mir“
3

Das gilt für die Avatare in der Themenliste, nehme ich an? Das sind die, die ich mit einem leeren alt-Attribut und einem gefüllten aria-label-Attribut sehe.

Laut dieser Quelle `img` with null `alt` and non-null `aria-label` attributes - Screen reader compatibility

werden die neuesten Bildschirmleser das aria-label vorlesen, was meiner Meinung nach unsere Absicht dort ist. Wir sollten jedoch alt anstelle von aria-label verwenden, da dies ältere Bildschirmleser abdeckt und technisch gültig ist.

3 „Gefällt mir“
4

Für SEO, insbesondere Google, wäre es sehr begrüßenswert, wenn das alt-Attribut für die Avatare mit demselben Text gefüllt werden könnte, der derzeit für das title-Attribut verwendet wird.

Ist es auf irgendeine Weise möglich, dies selbst umzusetzen?

Ich versuche es folgendermaßen und bearbeite {{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>

Es scheint jedoch keine Möglichkeit zu geben, durch die Bearbeitung von Handlebars ein Tag zum Bild hinzuzufügen.

Irgendeine Idee?

3 „Gefällt mir“