널리

안녕하세요, 엔비전스 입니다.

접근성을 준수하면서 미적으로 아름다운 웹사이트를 만들기 위한 노력에서 키보드 초점 표시기는 종종 도전 과제가 됩니다. 시각적 포커스 표시기는 키보드로 탐색하는 사용자에게 중요하지만, 디자이너들이 추구하는 의도된 시각적 스타일을 방해할 수 있습니다. 마우스로 특정 요소를 클릭하게 되면 초점이 해당 요소로 이동하게 되는데 이때 포커스 표시기가 보여져서 기획 의도를 해치게 되는 것이 대표적인 예라 할 수 있겠습니다.

이러한 문제를 해결하기 위해 CSS에서는 :focus-visible 의사 클래스를 도입했습니다. 이 클래스는 사용자가 키보드를 통해 요소에 초점을 맞출 때만 포커스 스타일을 적용하도록 설계되었습니다. 마우스 클릭으로 인한 초점에는 스타일이 적용되지 않아, 시각적 일관성을 유지할 수 있습니다.

하지만 :focus-visible 의사 클래스는 이 갈등을 해결하기 위한 한 걸음이었지만, 완벽한 해결책은 아닙니다. input 요소에서의 의도되지 않은 초점 표시기 보여짐 동작 등 한계점이 존재합니다.

이 글에서는 :focus-visible의 한계, 특히 입력 요소에 대한 동작을 살펴보고, 포커스 관리에 대한 더 강력한 JavaScript 기반 접근 방식을 탐구합니다. 포커스 표시기의 뉘앙스를 이해하고 맞춤형 솔루션을 구현함으로써, 우리는 아름답고 포용적인 웹사이트를 만들 수 있습니다.

1. 디자이너의 딜레마: 의도된 디자인과 접근성의 균형

웹 디자이너들은 종종 시각적으로 매력적이면서도 기능적인 인터페이스를 만들어야 하는 도전에 직면합니다. 키보드 포커스 표시기는 이러한 도전의 핵심 요소 중 하나입니다.

• 시각적 일관성: 포커스 표시기는 때때로 의도된 디자인을 방해할 수 있습니다.
• 사용자 경험: 마우스 사용자에게는 불필요할 수 있지만, 키보드 사용자에게는 필수적입니다.
• 브랜드 정체성: 기본 포커스 스타일이 브랜드 색상이나 디자인 언어와 충돌할 수 있습니다.

2. :focus-visible의 지원 한계

:focus-visible 의사 클래스는 이러한 문제를 해결하기 위해 도입되었지만, 몇 가지 한계가 있습니다:

• 브라우저 지원: 일부 구형 브라우저에서는 지원되지 않습니다.
• 일관성 없는 동작: 브라우저마다 :focus-visible을 다르게 해석할 수 있습니다.
• 입력 요소의 특별한 처리: 텍스트 입력 필드 등에서는 예상과 다르게 동작할 수 있습니다.

3. 우수한 포커스 관리를 위한 JavaScript 솔루션

이러한 한계를 극복하기 위해, JavaScript를 사용한 맞춤형 포커스 관리 솔루션을 구현할 수 있습니다:

let usingKeyboard = false;

document.addEventListener('keydown', function(e) {
  if (e.key === 'Tab') {
    usingKeyboard = true;
    document.body.classList.add('keyboard-user'); 
  }
});

document.addEventListener('mousedown', function() {
  usingKeyboard = false;
  document.body.classList.remove('keyboard-user'); 
});

document.addEventListener('focus', function(e) {
  if (usingKeyboard) {
    e.target.classList.add('keyboard-focus');
  }
}, true);

document.addEventListener('blur', function(e) {
  e.target.classList.remove('keyboard-focus');
}, true);
        

이 코드는 사용자의 입력 방식을 감지하고, 키보드 사용자에게만 포커스 스타일을 적용합니다.

4. 포커스 표시기 스타일링

JavaScript 솔루션과 함께 CSS를 사용하여 포커스 표시기를 스타일링할 수 있습니다:

/* 키보드 포커스 스타일 (JavaScript로 적용) */
.keyboard-focus {
  outline: 2px solid #007bff; 
  outline-offset: 2px;
}
/* 기본 포커스 스타일 제거 */
:focus {
    outline: none;
}
        

이 스타일은 키보드 사용자에게만 적용되며, 마우스 사용자의 경험을 방해하지 않습니다.

결론

키보드 포커스 관리는 웹 접근성과 사용자 경험의 중요한 부분입니다. :focus-visible은 좋은 시작점이지만, 완벽한 솔루션은 아닙니다. JavaScript를 활용한 맞춤형 접근 방식을 통해 우리는 다음과 같은 이점을 얻을 수 있습니다:

• 향상된 사용자 경험: 키보드와 마우스 사용자 모두에게 최적화된 경험을 제공합니다.
• 디자인 유연성: 브랜드 아이덴티티에 맞는 포커스 스타일을 적용할 수 있습니다.
• 크로스 브라우저 일관성: 브라우저 간 동작의 차이를 최소화할 수 있습니다.

이러한 접근 방식을 통해 우리는 접근성과 디자인의 균형을 맞추고, 모든 사용자를 위한 포용적인 웹 경험을 만들 수 있습니다.