[프론트엔드] 웹 접근성 및 UX 1편 - Button 컴포넌트

웹 표준 vs 웹 접근성 

웹 표준은 다양한 브라우저와 플랫폼에서 웹사이트가 동일하게 동작하도록 기술적 규칙을 정한 것이고, 웹 접근성은 장애인이나 고령자 등 모든 사용자가 웹사이트에 동등하게 접근할 수 있도록 하는 것이다.

즉, 웹 표준은 ‘기술적 일관성’에 초점을 두고, 웹 접근성은 ‘사용자 모두의 접근 가능성’에 초점을 둔다.

따라서 가능한 많은 사용자들의 경험 향상을 위해 웹 접근성을 고려하는 것은 프로페셔널한 프론트엔드 개발자로 성장하기 위해 중요한 요소 중 하나라고 볼 수 있다.

 

버튼 컴포넌트의 접근성 개선

일반적으로 버튼 컴포넌트를 개발할 때, 접근성 측면에서 가장 먼저 고려해야 할 건 키보드 조작이 가능해야 한다는 것이다.

즉, Tab 키로 포커스가 이동되고, Enter나 Space 키로 버튼이 눌릴 수 있어야 한다.

키보드 접근성을 보완하려면 리액트 기준, onClick 이벤트외에도 onKeyDown 이벤트로 Enter나 Space 키 입력을 처리해주면 된다.

<button	
	onClick={onClick}
	onKeyDown={(e) => e.key === "Enter" && onClick}
	disabled={disabled}
	>버튼</button>

 

그리고 두 번째는 disabled 상태일 때 사용자가 의도치 않게 상호작용하지 않도록 접근을 확실히 막아주는 것도 중요하다.

 

cursor에 관하여

예전에는 사용자 피드백을 더 잘 주기 위해 버튼에 습관처럼 cursor-pointer를 적용하곤 했다.
하지만 최근 들어 이 방식에 대해 다시 생각해볼 필요가 있다는 걸 알게 됐다.

cursor-pointer를 강제로 적용하면, 버튼이 disabled 상태로 바뀌어도 커서가 여전히 손 모양으로 유지된다.
이렇게 되면 실제로는 클릭이 불가능한데도 사용자 입장에선 클릭 가능한 버튼으로 오해할 수 있고, 이는 UX 관점에서 바람직하지 않다.

 

HTML 기본 <button> 요소는 브라우저마다 기본 커서가 default로 설정되어 있다.
즉, 마우스를 올려도 손 모양 커서가 나오지 않는 것이 정상이다.
이는 <button>이 링크처럼 "이동"을 보장하는 요소가 아니기 때문에 브라우저도 pointer 커서를 기본으로 적용하지 않는 것이다.

여기서 중요한 점은 커서 스타일 자체는 접근성 기준이 아니라는 것이다.
손 모양 커서가 나왔다고 해서 접근성이 향상되는 건 아니다.

 

접근성에서 중요한 건

• 요소의 역할을 명확히 지정하는 것(role="button")
• 키보드 접근 가능성 보장
• 스크린 리더를 위한 aria-* 속성 처리
  같은 부분들이다.

결론적으로, cursor-pointer는 필수 접근성 요소가 아니라 보조적인 UX 개선 도구다.
사용자 경험을 고려해 적절히 활용하되, disabled 상태일 땐 커서 관련 예외 처리도 함께 고려할 필요가 있다.

// Tailwind 기준 예시
className="cursor-pointer disabled:cursor-not-allowed"