NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


<button> 요소와 <label> 요소의 커서는 어떤 형태이어야 하는가?

본문 건너 뛰기

그동안은 단순히 “커서 모양만으로 클릭 가능하다는 것을 예측할 수 있으면 좋겠다.” 라고만 생각했습니다. 즉, <button>, <label> 모두 {cursor:pointer} 스타일로 처리해 왔는데 주변에서 이런 방식에 이의를 제기했던 사람은 없었습니다.

개인적 경험에 비춰 봐도 커서 모양이 나를 혼란에 빠트린 적은 없었거든요. 이래도 그만 저래도 그만 아주 사소한 문제일 수 있는데 사람들이 별로 관심을 두지 않는 문제라서 더 흥미롭게 느껴지네요.

W3C CSS cursor 명세와 함께 구글, 페이스북, 애플 웹 사이트를 돌아보고 내린 결론은 다음과 같습니다.

“가능하다면 W3C 권장 표준을 따르는 것이 좋겠다. 그럴 수 있을 것 같다. 그래도 될 것 같다.”

#1
표준에서 {cursor:pointer} 값은 링크를 가리킵니다. “The cursor is a pointer that indicates a link.” 라고 명시해 두었는데요. 따라서 앞으로 가능한 한 이 규칙에 따르려고 합니다.

#2
하지만 커서 모양만 놓고 봤을 때 문서 여백에 해당하는 <body> 요소와 <button>, <label> 요소의 커서 모양이 {cursor:default} 형태로 동일하다는 것은 좋은 사용자 경험이 아닐 거라고 생각합니다.

#3
커서 모양은 표준이 있으므로 따르고, 콘텐츠 스타일에는 표준이 없으므로 <button>, <label> 요소에 커서 모양 이외 다른 시각적 단서를 남기는 것이 좋겠습니다. 예를 들면 <button>, <label> 요소에 커서를 올렸을 때 해당 요소에 배경 색이나 명도를 다르게 처리함으로써 클릭할 수 있다는 시각적 단서를 남기고 사용자에게 확신을 줄 수 있을 것이라고 생각합니다.

“가능하다면 W3C 권장 표준을 따르는 것이 좋겠다. 그럴 수 있을 것 같다. 그래도 될 것 같다.”

영감을 주었던 글: 세상에서 가장 쪼잔한 질문 – 체크박스 옆 라벨 커서는 어떻게 만들어야 할까?

분류: CSS,웹 디자인,웹 표준 | 2016년 9월 7일, 3:29 | 정찬명 | 댓글: 2개 |
트랙백URI - http://naradesign.net/wp/2016/09/07/2197/trackback/