웹 접근성 향상을 위한 탭 전환: 왜 a 태그 대신 button 태그를 써야 할까?

 

 

얼마 전에 신규 프로젝트 구축을 맡으면서 접근성 마크까지 취득해야하는 경우가 있었다.

구축을 해야하니 처음부터 코드를 잘 짜놔야 접근성 개선 항목이 줄어들기 때문에, 굉장한 부담감이 있었다,

 

그 중 메인 페이지에서 적용했던 기본적인 예시 코드를 공유해보겠다 !

 

내가 받은 시안상으로는 ul li 구조가 아니면 반응형에서 너무 힘들 것 같아서 그냥 ul li로 구조를 짜버렸다.

그래서 순서대로 포커싱이 가게 하는 코드를 짜야했다.

그리고 접근성 개선을 위해 추가해야 하는 항목들을 정리했다.

 

필수는 아니지만 미리 잘 구축해놓지 않으면 나중의 내가 고생할 것 같아서 수많은 고민을 했다...

 

1. 키보드 이벤트 리스너 추가:
   • keydown 이벤트를 사용
   • Tab을 누르면 다음 탭 버튼으로 이동하고, Shift + Tab을 누르면 이전 탭 버튼으로 돌아가게 구현
   • e.preventDefault()를 사용하여 기본 Tab 키 동작을 방지하고, nextTab으로 이동하도록
2. 순차적으로 탭 버튼 이동:
   • 탭 버튼 클릭 시 해당 콘텐츠로 포커스가 이동하지만, Tab 키를 눌러도 탭 버튼들 사이를 순차적으로 이동할 수 있습니다. 또한 Shift + Tab을 사용하면 이전 탭 버튼으로 돌아가도록

 

 

접근성을 위해 추가한 항목들

1. role="tablist": 요소가 탭 목록임을 명시하는 역할을 한다.
2. aria-controls: 탭 버튼이 제어하는 콘텐츠 영역을 정의하여 사용자가 탭을 클릭했을 때,
   어떤 콘텐츠가 활성화되는지 알 수 있게 해준다.
3. aria-selected: 현재 활성화된 탭을 명시하여, 어떤 탭이 선택되었는지를 인식하도록 도와준다.
4. role="tabpanel": 탭 콘텐츠 영역임을 명시하여, 해당 콘텐츠가 활성화된 탭에 속한 내용임을 알게 해준다.
5. aria-labelledby: 탭 콘텐츠가 어떤 탭에 의해 설명되는지 명시하여, 탭과 콘텐츠 간의 연결을 이해할 수 있게 합니다.
6. tabindex="-1": 탭 콘텐츠가 기본적으로 키보드 내비게이션에서 제외되어 사용자가 Tab 키로 이동하지 않게 하여,
   스크린 리더 사용자가 포커스를 올바르게 처리할 수 있게 한다.

 

내가 구축한 프로젝트 사이트가 오픈 되면 링크를 공유하도록 하겠다 !

 

 

또 입사한지 1년이 지나서야 깨달은 것...

탭 메뉴 짤 때, a 태그만 사용했었는데 링크 이동이 아니라면 button 태그를 쓰는 게 더 적합하는 사실(?)...

왜 이제서야 알았을까 반성하며,,

 

 

왜 <button> 태그가 더 적합한가?

1. 네비게이션이 아니라 동작을 수행하는 목적
   • a 태그는 네비게이션을 위한 링크를 정의하는데 사용되며, 사용자가 다른 페이지나 URL로 이동하기 위해 클릭합니다. 반면, 탭 버튼처럼 콘텐츠를 동적으로 보여주거나 숨기기 위한 요소는 동작을 수행하는 버튼이므로, button 태그가 더 적합하다.
   • 예를 들어, 탭을 클릭할 때 페이지 이동을 하는 것이 아니라, 페이지 내에서 콘텐츠의 표시 여부를 제어하는 기능을 하므로, button이 더 의미에 맞는 태그이다.
2. 스크린 리더와 접근성 향상
   • <a> 태그는 기본적으로 링크라는 의미를 내포하고 있어 스크린 리더가 이 요소를 링크로 인식합니다. 그러나 탭 버튼은 링크와는 다르게 동작을 수행하는 버튼이기 때문에,
     a 태그를 사용할 경우 스크린 리더 사용자는 이 요소가 "링크"라고 잘못 인식할 수 있다.
   • 반면, <button> 태그는 본래 버튼을 정의하는 태그로, 스크린 리더는 버튼으로 인식하고 해당 버튼이 수행하는 기능을 명확히 안내한다.
   • 예를 들어, 탭 버튼을 클릭하면 그에 해당하는 탭 콘텐츠가 보여지는 동작을 수행하는 것이므로, button 태그를 사용하면 스크린 리더가 버튼으로 제대로 인식하고, "탭 1을 활성화"와 같은 명확한 안내를 제공할 수 있다.
3. 폼 제출 및 href 없이 사용할 수 있는 기능
   • a 태그는 기본적으로 href 속성을 요구하지만, 탭 버튼처럼 href 속성이 필요 없는 동적 요소에는 button 태그가 더 적합하다.
   • button 태그는 type="button"으로 설정하면 URL 이동 없이 원하는 동작을 정의할 수 있습니다.
     예를 들어, JavaScript로 해당 탭 콘텐츠를 동적으로 변경하는 경우,
     button 태그가 더 직관적이고 의미에 맞는 선택이다.
4. 키보드 탐색 및 사용자 경험 개선
   • button 태그는 기본적으로 tabindex="0"가 설정되어 있어, 키보드 사용자가 Tab 키로 탭 버튼을 순차적으로 탐색할 수 있다.
   • a 태그는 기본적으로 href 속성이 있어야 링크로 동작하지만, href가 없으면 tabindex="-1"가 적용되어 키보드 탐색에서 제외될 수 있습니다.
     a 태그를 사용하면서 href를 비워두거나 JavaScript로 링크를 제어하는 것은 웹 접근성 측면에서 바람직하지 않으며, button 태그를 사용하는 것이 더 직관적이고 접근성이 좋다.
5. 브라우저 기본 동작
   • <a> 태그는 클릭 시 기본적으로 페이지 이동을 수행합니다. 이로 인해 a 태그를 클릭했을 때 이동하지 않게 하려면 JavaScript에서 event.preventDefault()를 호출해야 하는 번거로움이 있다.
   • 반면, <button> 태그는 기본적으로 페이지 이동을 하지 않으며, 사용자가 클릭했을 때 바로 이벤트를 처리할 수 있어 동작을 제어하는 데 더 적합하다.