[HTML,Sonarlint] "Anchor tags should not be used as buttons" 경고는 <a> 태그를 버튼처럼 사용하는 경우

배경 : 희성님께서 카톡방에 소나린트 쓰면 좋다 해서, 나도 한번 써봤다. 그 시작을 JSP 파일 내 html 영역에서 부터 시작이다.

 

내용 : 챗gpt 답변이 잘되어있어서 복사 붙여넣기 한다.

 

Q. sonarlint 에서 Anchor tags should not be used as buttons 경고를 알려줬어. 이거 어떻게 수정하라는 말인거야?

 

 

A.SonarLint에서 "Anchor tags should not be used as buttons" 경고는 <a> 태그를 버튼처럼 사용하는 경우 발생합니다. <a> 태그는 원래 하이퍼링크를 정의하는 데 사용되며, 다른 페이지로 이동하거나 특정 URL을 가리킬 때 사용해야 합니다. 그러나, 때때로 개발자들은 이 태그를 스타일링하여 버튼처럼 사용하기도 합니다.

이 경고는 접근성 문제와 관련이 있습니다. 버튼처럼 동작해야 하는 요소는 <button> 태그를 사용하는 것이 더 적절합니다. 이렇게 하면 브라우저와 스크린 리더가 해당 요소를 더 잘 이해하고, 사용자 경험이 향상됩니다.

수정 방법:

링크가 아닌 동작을 수행할 때:

 

<a> 태그 대신 <button> 태그를 사용하세요.

예를 들어, 아래와 같은 코드는:아래와 같이 변경되어야 합니다 

 

html

<button type="button" onclick="someFunction()">Click me</button>

 

html

<a href="#" onclick="someFunction()">Click me</a>

 

링크를 사용하는 경우:

 

링크가 실제로 페이지 이동을 수행하는 경우 <a> 태그를 사용할 수 있지만, 버튼처럼 보이도록 CSS로 스타일링합니다.

 

예를 들어:여기서 button-style 클래스를 사용해 버튼처럼 보이도록 스타일링할 수 있습니다.

 

html

<a href="https://example.com" class="button-style">Visit</a>

 

이렇게 수정하면 SonarLint의 경고를 해소할 수 있고, 더 나은 접근성과 코드의 명확성을 유지할 수 있습니다.