본문 바로가기

JavaScript/SonarQube

[SonarQube] Replace this <i> tag by <em>

반응형

 

"<strong>" and "<em>" tags should be used

 

<strong>/<b> 및 <em>/<i> 태그는 대부분의 웹 브라우저에서 정확히 동일한 효과를 갖지만 둘 사이에는 근본적인 차이가 있습니다: <strong> 및 <em>은 의미론적 의미를 갖는 반면 <b > 및 <i>는 CSS와 같은 스타일 정보만 전달합니다.

 

<b>는 디스플레이가 제한된 일부 장치나 시각 장애인이 스크린 리더 소프트웨어를 사용하는 경우 아무런 영향을 미치지 않지만 <strong>은:

  • 일반 브라우저에서 텍스트를 굵게 표시
  • Jaws와 같은 화면 판독기를 사용할 때 낮은 톤으로 말하기

따라서,

  • 의미를 전달하기 위해 <b> 및 <i> 태그를 사용해서는 안 됩니다.
  • 스타일링 정보를 전달하기 위해서는 <b>와 <i>를 피하고 CSS를 사용해야 합니다.

비준수 코드 예

<i>car</i>             <!-- Noncompliant -->
<b>train</b>         <!-- Noncompliant -->

결과

car train

준수 솔루션

<em>car</em>
<strong>train</strong>

결과

car train

예외

이 규칙은 아이콘 글꼴 사용의 경우 완화됩니다

<i class="..." aria-hidden="true" />    <!-- Compliant icon fonts usage -->
반응형