[SonarQube] Add an "alt" attribute to this image

 

 

Image, area and button with image tags should have an "alt" attribute

 

alt 속성은 이미지에 대한 텍스트 대안을 제공합니다.

실제 이미지를 렌더링할 수 없을 때 사용됩니다.

 

일반적인 이유는 다음과 같습니다.

• 이미지를 더 이상 찾을 수 없습니다
• 스크린 리더 소프트웨어를 사용하는 시각 장애가 있는 사용자
• 휴대폰에서 데이터 소비를 줄이기 위해 이미지 로드가 비활성화

alt 속성을 정보가 아닌 값으로 설정하지 않는 것도 매우 중요합니다. 예를 들어 <img ... alt="logo">는 사용자에게 어떤 정보도 제공하지 않기 때문에 쓸모가 없습니다. 이 경우 다른 장식 이미지와 마찬가지로 <img> 태그 대신 CSS 배경 이미지를 사용하는 것이 좋습니다. CSS background-image를 사용할 수 없는 경우 빈 alt=""가 허용됩니다. 아래 예외를 참조하십시오.

 

이 규칙은 다음과 같은 경우 문제를 제기합니다.

• <input type="image"> 태그 또는 <area> 태그에 alt 속성이 없거나 해당 alt 속성에 빈 문자열 값이 있습니다.
• <img> 태그에는 alt 속성이 없습니다.

 

 

비준수 코드 예

<img src="foo.png" /> <!-- Noncompliant -->
<input type="image" src="bar.png" /> <!-- Noncompliant -->
<input type="image" src="bar.png" alt="" /> <!-- Noncompliant -->

<img src="house.gif" usemap="#map1"
    alt="rooms of the house." />
<map id="map1" name="map1">
  <area shape="rect" coords="0,0,42,42"
    href="bedroom.html"/> <!-- Noncompliant -->
  <area shape="rect" coords="0,0,21,21"
    href="lounge.html" alt=""/> <!-- Noncompliant -->
</map>

 

준수 솔루션

<img src="foo.png" alt="Some textual description of foo.png" />
<input type="image" src="bar.png" alt="Textual description of bar.png" />

<img src="house.gif" usemap="#map1"
    alt="rooms of the house." />
<map id="map1" name="map1">
  <area shape="rect" coords="0,0,42,42"
    href="bedroom.html" alt="Bedroom" />
  <area shape="rect" coords="0,0,21,21"
    href="lounge.html" alt="Lounge"/>
</map>

 

예외

빈 문자열 alt="" 속성이 있는 <img> 태그는 문제를 일으키지 않습니다. 그러나 이 기술은 다음 두 가지 경우에만 사용해야 합니다.

 

1. 이미지가 장식적이며 CSS 배경 이미지를 사용할 수 없는 경우. 예를 들어, 데이터베이스에서 가져온 소스 이미지와 함께 자바스크립트를 통해 장식 <img>를 생성하는 경우 CSS 코드를 생성하는 것보다 <img alt=""> 태그를 사용하는 것이 좋습니다.

<li *ngFor="let image of images">
    <img [src]="image" alt="">
</li>

 

2. 이미지가 장식적이지 않지만 대체 텍스트가 근처에 있는 텍스트를 반복하는 경우. 예를 들어 링크에 포함된 이미지는 alt 속성에서 링크의 텍스트를 복제해서는 안 됩니다. 스크린 리더가 텍스트를 두 번 반복하게 하기 때문입니다.

<a href="flowers.html">
    <img src="tulip.gif" alt="" />
    A blooming tulip
</a>