Redundant alt attribute. Screen-readers already announce `img` tags as an image.

3030 단어 HTMLgatsby
Gatsby.js에서 홈페이지를 만들려고했을 때. 뭔가 경고를 냈다.
warn ESLintError: 
<JavaScriptファイルの絶対パス>.js
  5:5  warning  Redundant alt attribute. Screen-readers already announce `img` tags as an image. You don’t need to use the
words `image`, `photo,` or `picture` (or any specified custom words) in the alt prop  jsx-a11y/img-redundant-alt

이 경고는 무엇입니까?



tsby @ 2.18.8에는 에 s ぃ t p ㎅ 긴 - jsx - 11y @ 6.2.3이 종속 패키지로 포함되어 있습니다.
% npm ls eslint-plugin-jsx-a11y
<プロジェクトのpackage名>@<プロジェクトのバージョン> <プロジェクトのルートディレクトリパス>
└─┬ [email protected]
  └── [email protected] 

이것이 경고를 내주고 있다.

'스크린 리더는 'img' 태그를 이미지로 인식합니다. 의 alt 속성에 「image」, 「photo」 또는 「picture」라는 단어를 사용할 필요는 없습니다」라고 한다.

원래 태그에 넣는 alt 속성이란?



이미지 설명. 접근성으로 준비하는 것 외에도 이미지를 얻을 수 없을 때 대신 표시됩니다.
필수는 아니다.
<img src="./hogepage.png" alt="ほげぱげ">

장식의 경우는 빈 문자열로 좋은 것 같다.
<img src="./hogepage.png" alt="">

참고


  • eslint-plugin-jsx-a11y/img-redundant-alt.md at v6.2.3 · evcohen/eslint-plugin-jsx-a11y
  • [번역] Airbnb React/JSX Style Guide - Qiita
  • <img>: 포함된 이미지 요소 - HTML: HyperText Markup Language | MDN
  • html - accessibility in decorative images or repetitive information images - Stack Overflow
  • javascript - What does this warning message mean? 'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images' - Stack Overflow
  • 좋은 웹페이지 즐겨찾기