웹접근성 1편

div에 onclick만 사용한 버튼은 커서 및 호버 효과가 없어 사용자 경험을 저해합니다. 🖱️
div 버튼은 tabindex가 없어 키보드 포커스가 건너뛰어 시각 장애인이나 마우스를 못 쓰는 사용자에게 심각한 접근성 문제를 야기합니다. ♿
겉으로 드러나지 않는 접근성 문제가 더 위험하며, QA를 통해 키보드 탐색 오류를 발견할 수 있습니다. 🕵️‍♀️
<button> 태그는 기본 CSS 속성이 많아 커스텀 스타일링이 어렵다는 이유로 div를 사용하는 경우가 있습니다. 🎨
클릭 가능한 요소 내부에 또 다른 클릭 가능한 요소가 디자인으로 필요할 때 div 사용을 고려하기도 합니다. 🧩
<button>의 기본 스타일을 초기화하려면 all: unset;을 사용하거나, 특정 속성만 !important나 높은 명시도로 오버라이딩할 수 있습니다. 🔄
웹 접근성을 위해 버튼은 <button> 태그를 사용하고, div를 사용해야 할 경우 tabindex를 반드시 고려해야 합니다. ✅
숨겨진 접근성 문제를 간과하면 나중에 큰 어려움에 직면할 수 있으므로, 초기부터 웹 접근성을 고려하는 것이 중요합니다. 🚧

로딩 중...