포커스

정의

포커스는 지금 이 요소가 키보드 입력을 받고 있다는 사실을 눈에 보이게 표시하는 상태입니다. 마우스 없이 Tab 키만으로 화면을 넘나들 때, 요소 둘레에 나타나는 또렷한 테두리, 이른바 포커스 링이 지금 내가 어디에 서 있는지를 알려 줍니다. 여기서 Enter나 Space를 누르면 그 요소가 눌리고, Tab을 다시 누르면 다음 자리로 이동합니다. 마우스 사용자에게 커서가 현재 위치를 알려 주듯, 포커스 링은 키보드 사용자에게 없어서는 안 될 나침반 역할을 합니다. 버튼, 링크, 입력 칸처럼 조작할 수 있는 요소라면 무엇이든 이 포커스를 받을 수 있어야 합니다.

왜 중요한가

모든 사용자가 마우스를 쓰는 것은 아닙니다. 손이 불편한 사람, 화면 낭독기를 함께 쓰는 사람, 그리고 그냥 키보드가 빠른 개발자까지, 많은 이들이 Tab 키로 화면을 조작합니다. 이들에게 포커스 표시가 없으면 지금 커서가 어느 버튼에 있는지 전혀 알 수 없어, 눈을 감고 방 안을 더듬는 것과 다르지 않습니다. 그래서 포커스 링은 취향이 아니라 접근성의 기본 요건입니다. 또렷한 포커스 표시는 키보드 사용자가 헤매지 않고 원하는 곳까지 정확히 도달하게 해 주고, 폼처럼 순서가 중요한 화면에서 지금 어느 칸을 채우고 있는지도 분명히 보여 줍니다. 잘 갖춰진 포커스는 더 많은 사람이 이 화면을 실제로 쓸 수 있게 만드는 문입니다. 접근성은 소수만을 위한 배려가 아니라, 상황에 따라 누구나 키보드에 의존하게 되는 순간을 위한 기본기라는 점을 기억해 두면 좋습니다. 마우스가 갑자기 말을 안 들을 때나 긴 폼을 빠르게 채워야 할 때, 결국 우리 모두가 잠깐씩 키보드 사용자가 되기 때문입니다.

흔한 실수

• 보기 싫다는 이유로 outline을 없애 버리고 대체 표시를 전혀 두지 않는 것입니다. 이러면 키보드 사용자는 커서가 어디 있는지 알 수 없어 화면 안에서 완전히 길을 잃습니다. 접근성을 가장 크게 해치는 흔한 실수입니다.
• 포커스 링의 대비가 너무 약한 것입니다. 배경과 거의 구분되지 않는 연한 테두리는 있으나 마나 하며, 밝은 환경에서는 사실상 보이지 않습니다.
• 마우스로 눌렀을 때까지 포커스 링이 크게 남아 어수선해 보이는 것입니다. 이걸 없애려다 링 자체를 지워 버려 키보드 사용자까지 피해를 보는 경우가 많습니다.

실무 팁

• outline을 지우고 싶다면 반드시 다른 또렷한 표시로 대체하세요. 그냥 없애 버리면 키보드 사용자가 길을 잃으므로, 테두리나 그림자 같은 대안을 함께 마련하는 것이 원칙입니다.
• 마우스 클릭에는 링을 숨기고 키보드 이동에만 링을 보이고 싶다면 focus-visible를 활용하세요. 두 상황을 구분해 주면 화면은 깔끔해지고 접근성은 그대로 지킬 수 있습니다.
• 포커스 링은 배경과 대비가 충분하도록 색과 두께를 정하세요. 어떤 배경 위에서도 한눈에 들어와야 표시로서 제 역할을 합니다.

관련 개념