Как исправить избыточный атрибут alt?

Question

[Полина Титова]

При проверки программы на ошибки eslint, вывелось такое сообщение:

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

Участок кода, на который ссылается сообщение, выглядит так:

function ItemList(): JSX.Element {
  const href = '#';
  return (
    <div className="cities__image-wrapper place-card__image-wrapper">
      <a href={href}>
        <img className="place-card__image" src="img/apartment-01.jpg" width="260" height="200" alt="Place image" />
      </a>
    </div>
  );
}

export default ItemList;

С чем это связанно и как это можно исправить?

Answer 1

[Aetae]

Place image -> Place

Ну или отрубить это тупое eslint правило.

Comments

[Stalker_RED]

Или сделать alt="", что не противоречит никаким стандартам.

[Aetae]

Stalker_RED, нет. Так делать не надо. Даже если это ничему не противоречит. Это уродливо. В alt надо писать описание картинки. Это нужно для слепых. Если картинок много и лень - можно нейросеткой нагенерить с некоторой степенью успеха.)
Если на слепых плевать, то можно и на стандарт плюнуть, просто не указывая бессмысленный атрибут.
Если картина "техническая" и не несёт смысла - она должна быть в css.

[Алексей Уколов]

Aetae, как раз не указывать - хуже всего, потому что тогда ридер читает url. Корректно - указывать атрибут, но оставлять его пустым.

Answer 2

[Алексей Уколов]

You don’t need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the alt prop

Ну серьёзно, что тут может быть непонятно?