버튼을 사용하라

• 웹 인터페이스에서 <div> 대신 <button>을 사용하는 것이 접근성과 기능 면에서 올바른 선택임
• <div>는 스크린 리더에 인터랙티브 요소로 인식되지 않으며, 키보드 포커스나 Enter, Spacebar 입력에도 반응하지 않음
• [role="button"]이나 [tabindex="0"] 속성을 추가해도 포커스 순서 오류와 키보드 이벤트 처리 문제가 남음
• 이러한 문제를 해결하기 위해 여러 이벤트 리스너와 조건문을 추가하는 것은 불필요한 복잡성을 초래함
• <button>은 접근성, 포커스, 키보드 입력 처리 기능을 기본 제공하므로, 단순하고 표준적인 해결책임

잘못된 접근: <div>로 버튼 만들기

• React나 HTMX 사용자들 사이에서 <div onclick="..."> 형태로 모달 열기 등 인터랙션을 구현하는 사례가 많음
  • 예시 코드: <div onclick="showSignIn()">Open Modal</div>
• 이 방식의 문제점
  • 스크린 리더가 해당 요소를 인터랙티브 요소로 인식하지 않음
  • 키보드로 포커스 이동 불가
  • click 이벤트만 작동하며, Enter나 Spacebar 입력에는 반응하지 않음

접근성 “수정” 시도의 한계

• [role="button"] 속성을 추가하면 스크린 리더 인식 문제는 해결되지만,
  포커스 가능성이나 키보드 입력 처리 문제는 여전히 남음
• [tabindex="0"]을 추가해 포커스를 가능하게 할 수 있으나,
  포커스 순서가 꼬이거나 예기치 않은 이동이 발생할 위험이 있음
• 키보드 입력을 처리하려면 keydown 이벤트를 전역(document)에 등록하고,
  Enter 또는 ' '(space) 키를 감지해 포커스된 요소를 찾아 실행해야 함 document.addEventListener('keydown', (event) => { if (event.key !== 'Enter' && event.key !== ' ') return; const notRealBtn = document.activeElement.closest('[onclick]'); if (!notRealBtn) return; // 실행 코드 });
• 결과적으로, <button>이 기본적으로 제공하는 기능을 복잡하게 재구현하는 셈임

<button>이 제공하는 기본 기능

• <button> 요소는 다음을 자동으로 지원
  • 암묵적 역할([role="button"])
  • 자동 포커스 가능성
  • 포커스 상태에서 Enter와 Spacebar 입력 시 click 이벤트 발생
• 동일한 동작을 <div>로 구현하려면 여러 속성과 스크립트가 필요하지만,
  <button>은 단 한 줄로 해결 가능 <button onclick="showSignIn()">Open Modal</button>

결론: 단순함이 최선

• <button>은 접근성 표준을 충족하면서도 코드량을 줄이는 가장 단순한 방법
• 불필요한 이벤트 처리나 속성 추가 없이 표준 HTML 요소를 사용하는 것이 유지보수성과 효율성 측면에서 유리
• “게으른 개발자일수록 올바른 요소를 사용하라”는 메시지로,
  불필요한 복잡성을 피하고 기본 기능을 활용하는 개발 습관의 중요성을 강조함