<a role="button"> 과 <button> 차이는 무엇일까? [접근성, SEO]

상황 설명

텍스트 형식의 요소에 click 이벤트를 달아서 사용하려 할 때 다음과 같은 의문점이 들었다 "link 느낌의 요소라면 button 태그보다 a 태그를 쓰는 것이 더 적절하지 않나?"

거기에 더해서 role="button 속성을 사용해서 접근성을 보완해서 사용하면 적절하겠다는 결론에 다다라서 최종적으로 <a role="button" onClcik={...}>...</a> 형태로 구성했다.

그러던 와중 SEO 측면에서 과연 이런 방식이 유용한지에 대해 의문이 생겨 내용을 찾아보게 됐다.

WAI-ARIA의 role 이해

WAI-ARIA role 은 웹 페이지의 요소가 수행하는 기능을 명시적으로 정의하여 스크린 리더나 다른 보조 기술이 해당 요소를 이해하고 적절한 방식으로 상호작용할 수 있도록 도움을 줍니다.

HTML 요소는 본래 기본 역할을 가지고 있지만, ARIA 역할을 사용하면 보조 기술에 더 구체적인 정보를 제공하여 더 나은 접근성을 제공합니다.

WAI-ARIA의 role 역활을 크게 3 가지로 정리

1. 페이지 구조 및 뷰 관련

웹 페이지의 구조적 의미와 문서의 뷰를 정의할 수 있습니다.

• role="banner", role="main", role="contentinfo" (페이지의 헤더, 주요 콘텐츠, 푸터 등)
• role="article", role="section", role="navigation" (기사, 섹션, 내비게이션 등)

2. 상호작용 관련

사용자가 입력하거나 조작할 수 있는 위젯 요소들을 정의할 수 있습니다.

• role="button", role="checkbox", role="textbox", role="slider" (버튼, 체크박스, 텍스트 상자, 슬라이더 등)
• role="link" (링크 역할)

3. 동적 콘텐츠 관련

실시간으로 변경되는 콘텐츠를 정의할 수 있습니다.

• role="alert", role="status", role="marquee" (알림, 상태 메시지, 텍스트 스크롤 등)

WAI-ARIA의 role 속성과 SEO 관계

• 검색 엔진이 페이지의 콘텐츠를 분석할 때 각 요소의 역할을 인식할 때 도움을 줄 수 있다.
• 접근성이 좋아 사용자 경험 또한 좋아진다면 검색 순위에 긍정적인 영향을 줄 수 있다. (특히 구글은 사용자 경험을 점차적으로 중요한 순위 요소로 간주하고 있습니다.)

<button> vs <a role="button">

SEO 측면

<button> 태그는 HTML 시맨틱 요소로, 버튼 역할을 자연스럽게 수행합니다. 검색 엔진은 시맨틱 HTML 을 더 선호하고 명확히 이해할 수 있습니다.

반면 <a> 태그 role="button"을 사용하면 <a> 태그가 버튼처럼 동작한다고 알려주는 것이지만, 여전히 검색 엔진이나 보조 기술은 <a> 태그를 링크로 해석할 수 있습니다.

이것이 버튼 역할을 하는 링크임을 알 수 있지만, 시맨틱하게 명확하지 않기 때문에, SEO 측면에서는 다소 덜 바람직할 수 있습니다.

접근성

<button> 요소는 기본적으로 클릭 가능한 요소로, 키보드와 마우스를 사용하는 사용자 모두에게 적절히 동작합니다. 또한 이 요소는 기본적으로 ARIA 역할과 상태를 처리하기 때문에 보조 기술을 사용하는 사용자가 더욱 직관적으로 상호작용할 수 있습니다.

<a> 태그에 role="button"을 사용하면, 이 요소가 버튼처럼 동작해야 한다는 명시적인 정보를 보조 기술에 제공할 수 있습니다. 그러나, 기본적으로 <a> 태그는 링크로 동작하고, 마우스로 클릭할 수 있지만, 키보드 탐색을 고려할 때 문제가 발생할 수 있습니다.

최종 결론

<a role="button"> 은 사실상 잘못된 태그 사용법일 수 있으며 <button> 태그를 사용하여 버튼 역할을 수행하는 것이 접근성과 SEO 모두에 더 적합한 방법입니다.

---

참고

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles