닫기 이벤트 버튼에 대하여.. button vs a

<a class="close" onclick="close()">×</a>

 

위와 같이 a 버튼으로 이벤트를 주는 것에 대해서 어떻게 생각하시나요?

 

왜 나쁜가요? 위 a 태그는 href가 없으므로 실제로는 링크가 아닙니다 (닫기 버튼은 링크가 아님).

말할 것도 없이, 누락 된 href에 대한 태그에 대해서 포커스를 맞출 수도 없습니다.

게다가, 위의 x 기호는“곱하기”또는“시간”으로 읽힐거에요... 전혀 SEO 설명에도 도움이되지 않습니다.

 

대신에 무엇을 사용할 것인가요?

 

<button aria-label="Close">
  <span aria-hidden="true">×</span>
</button>

위와 같이 좋은 패턴으로 사용합시다.

 

아이콘을 넣고 싶을 때는?

<button type="button">
  Close
  <span aria-hidden="true">×</span>
</button>

스크린 리더는 단지 Close, Button이라고만 읽힐 것입니다. (aria-hidden 속성이 있기 때문에)

 

bootstrap 등을 사용할 경우에는 font-awesome을 사용할 수도 있겠지요.

<button type="button" class="close" aria-label="Close">
  <span class="fa fa-times" aria-hidden="true"></span>
</button>

부가적으로, 버튼에 대한 설명을 충분히 해주는 것이 중요합니다.

가장 좋은 것은 역시 button에 텍스트로 그 버튼에 대한 설명을 표시하는 것이 가장 좋겠지요.

 

 

출처 : https://css-tricks.com/the-many-bad-and-good-patterns-for-close-buttons/?fbclid=IwAR22_tce_o3McAd5B4kFYT3XfzrOVCMTqQ-Z8KiQj0PKq5aMnalNCfrZp6M