포커스Focus
한 줄 정의
포커스는 클릭이나 키보드의 탭(Tab) 키로 페이지 안의 버튼 · 링크 · 입력칸 중 하나가 선택돼, 다음 입력을 받을 준비가 된 상태예요.
쉽게 말하면
입력폼에서 이름 칸을 누르면 칸 테두리 색이 바뀌고 글자를 칠 수 있게 되는데, 이 상태가 포커스예요. 마우스 없이 키보드만으로 페이지를 쓰는 방문자는 탭 키를 누를 때마다 포커스를 다음 버튼이나 링크로 옮겨 가요. 지금 포커스가 어디에 있는지 보여 주는 테두리를 '포커스 링'이라고 불러요.
어디서 나온 말인가요
포커스는 웹페이지의 모양을 정하는 언어인 CSS의 표준에 :focus라는 이름으로 정의된 상태예요. W3C(웹 표준을 만드는 국제 단체)의 선택자 표준 문서는 :focus를 사용자 입력 포커스를 가진 요소로 설명해요(W3C Selectors Level 4).
왜 꼭 보여야 하나요
웹 접근성 국제 기준인 WCAG(웹 콘텐츠 접근성 지침)는 키보드로 조작할 수 있는 화면이라면 키보드 포커스 표시가 보이는 방식이 있어야 한다고 정해요. W3C는 해설 문서에서 포커스 표시가 없으면 화면을 볼 수 있는 키보드 사용자도 페이지를 조작할 수 없다고 설명해요(W3C WCAG 2.2 해설). 키보드 사용자는 포커스 링을 보고 다음에 누를 키가 어느 버튼에 적용될지 알기 때문이에요. 그래서 디자인을 깔끔하게 하려고 포커스 테두리를 지우면, 키보드로 사이트를 쓰는 방문자는 지금 어디에 있는지 알 수 없게 돼요.
헷갈리는 말
| 헷갈리는 말 | 뜻 | 포커스와 다른 점 |
|---|---|---|
| 호버 | 마우스 커서를 올려놓은 상태 | 호버는 커서가 떠나면 풀리고, 포커스는 커서를 치워도 고른 요소에 그대로 남아요 |
| 탭(화면 요소) | 이름표를 눌러 같은 자리의 내용을 바꿔 보는 화면 요소 | 키보드의 탭 키와 이름만 같아요. 탭 키는 포커스를 옮기는 키이고, 화면 요소 탭은 내용 묶음을 바꿔 보여 줘요 |
같은 말
아래 이름으로도 불러요. 모두 같은 뜻이에요.
키보드 포커스