아바타 img 태그에 alt 속성이 없습니다

기여 UX
1

사이트의 첫 화면을 볼 수 없는 사용자에 대해 조사하고 있습니다(별개의 문제입니다).

조사 과정에서 사이트 소스를 w3 검증기에 통과시켰는데, 다음과 같은 형태의 오류가 여러 개 반환되었습니다:

An img element with no alt attribute must not have any aria-* attributes other than 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을 읽습니다. 이것이 우리의 의도라고 생각합니다. 하지만 구형 스크린 리더를 지원하고 기술적으로 유효한 마크업을 유지하기 위해 aria-label 대신 alt를 사용하는 것이 좋습니다.

3개의 좋아요
4

SEO, 특히 Google의 경우, 아바타의 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개의 좋아요