[웹 접근성] a tag와 button의 차이는 무엇일까?

a tag와 button의 차이는 무엇일까?

HTML 측면에서의 차이

⚓️ Anchor

href 속성의 유무에 따라 차이가 있음

• href 속성 ⭕️

  • 콘텐츠로 라벨링 된 하이퍼링크

• href 속성 ❌

  • 링크가 있을 수 있는 위치에 대한 자리 표시자 (placeholder)

  <li>
  	<a>Example</a>
  </li>

👇 Button

콘텐츠로 라벨링 된, 사용자가 어떤 액션을 트리깅 할 수 있는 컨트롤

웹 접근성 측면에서 본 차이

⚓️ Anchor

초점이 갔을 때 '링크'라고 읽어줌

이때 사용자가 ‘사이트를 이동하구나’하고 알아차릴 수 있음

간혹 손가락 모양(커서) 때문에 혹은 눌리는 기능 때문에 링크를 거는 경우도 있음

이동할 곳이 없는데 링크를 건 경우이므로 사용자에게 혼동을 줄 수 있음

Voice Over의 경우 href가 없으면 텍스트 내용만 읽고 ‘링크’라고 읽어주지 않음

또한, Tab 키로 접근할 수 없음

👇 Button

포커스 모드일 때는 Input 요소와 button 요소만 읽음

초점이 갔을 때 '버튼'이라고 읽어줌

이때 사용자는 현재 요소가 활성 가능하다는 것을 알 수 있고, 활성화했을 때 링크 이동이 아닌 무언가 동작이 일어날 것을 예상할 수 있음

만약 ‘좋아요’라는 버튼이 있다고 하면, 사용자는 이 버튼을 활성화할 것인지, 활성화하지 않을 것인지 선택할 수 있음

간혹 span이나 img 태그로 버튼을 마크업 하는 경우가 있음

이 경우 ‘버튼’이라고 읽어 주지 않음

이때 NVDA에서는 onClick을 넣으면 ‘클릭 가능’이라고 읽어주지만, Voice Over는 버튼 내부 글자만 읽어 활성화 여부를 인식하기 어려움

버튼을 사용해야 할 곳에 링크를 사용하면 어떻게 될까?

만약 회원 가입 중 추천인을 입력하는 input이 있고 확인 버튼이 있다고 생각해 보자

스크린 리더 사용자는 추천인을 입력하고 추천인 확인 버튼을 누르려고 하는데 ‘추천인 링크’라고 읽어준다면 혼란에 빠지게 된다.

링크는 어디론가 이동한다는 뜻인데, ‘그럼, 이전에 입력한 회원 가입 정보들은 다 어떻게 되는 거지?’ 하는 의문을 가지게 되는 것이다.

따라서 상황에 따라 알맞게 버튼 태그와 링크 태그를 사용하자.

✋🏻 여기서 잠깐! 브라우저 모드와 포커스 모드란?

브라우저 모드의 경우 웹 페이지 콘텐츠를 구조 순서대로 읽음

이 과정에서 사용자는 헤더, 링크, 리스트 등 각종 요소를 순차적으로 탐색할 수 있음

하지만 입력 필드나 콤보 박스 등에 직접 작성하거나 선택할 수 없음

포커스 모드의 경우 키 입력에 직접 반응해 웹 페이지 요소에 상호작용이 가능해짐

입력 필드나 콤보 박스 등에 직접 작성하거나 선택할 수 있음

하지만 input이나 button 요소와 같은 일부 요소에만 접근함

출처: https://www.youtube.com/@AOA11Y