초점 이동과 표시 - by. UXKM

요약 설명

관련 지침 : 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.
웹 페이지에서 제공하는 모든 기능은 키보드만으로 사용할 수 있어야 하며, 이때 사용자 입력 간 초점 이동은 논리적이고 적절한 순서를 따라야 합니다. 초점 이동 과정에서 콘텐츠가 조작 불가능한 상태가 되거나 예기치 않게 페이지가 전환되어서는 안 됩니다.
또한 초점을 받은 콘텐츠는 저시력 사용자와 지체 장애인도 쉽게 인지할 수 있도록 시각적으로 명확히 구분되어야 합니다.

관련 WCAG 2.2 성공 기준

  • 초점 이동 순서 유지

    사용자가 키보드를 이용하여 초점을 이동하는 경우, 이동 순서가 일반적인 관례를 벗어나면 혼란을 줄 수 있으므로 초점 이동은 사용자가 예측할 수 있는 순서를 따라야 합니다. 가장 바람직한 방법은 널리 사용되는 관례를 따르는 방식으로 콘텐츠를 제공하는 것입니다.
    예를 들어, 로그인 양식에서는 초점이 [사용자 아이디 → 비밀번호 → 로그인 버튼]의 순서로 이동해야 하며, 이는 사용자의 예상을 벗어나지 않는 자연스러운 흐름입니다.
    만약 불가피하게 관례와 다른 초점 이동 순서를 적용해야 할 경우에는, 사용자 입력 간의 초점 이동이 논리적 흐름에 따라 이루어지도록 구현하는 것이 필요합니다.

  • 함정 또는 오류 방지

    웹 콘텐츠는 더 이상 키보드 조작이 불가능한 상태로 구현되지 않아야 합니다. 즉, 사용자가 초점을 이동하거나 다음 입력으로 이동할 수 없는 상태가 되어서는 안 됩니다. 또한, 이전 페이지로 초점을 이동하거나, 다른 사용자 입력이나 제어 요소로의 초점 이동이 불가능해지는 상태가 되지 않도록 구현해야 합니다.

  • 초점의 시각화

    사용자가 키보드 조작이나 마우스를 사용해 초점을 이동했을 때, 해당 콘트롤이 초점을 받았음을 명확히 시각적으로 구별할 수 있도록 해야 합니다. 예를 들어, 키보드를 이용해 버튼을 선택할 때 버튼 주위에 점선 테두리가 나타나는 것과 같이, 초점이 맞춰진 요소가 사용자에게 명확히 인식되도록 해야 합니다.
    또한, 위치 지정 도구(마우스)에 의한 초점과 키보드에 의한 초점 표시 방법이 다를 수 있으므로, 각 경우에 맞는 적절한 시각적 표시를 제공할 수 있습니다. 예를 들어, 마우스로 클릭한 요소는 다른 방식으로 강조될 수 있으며, 키보드로 이동한 요소는 다른 스타일로 강조될 수 있습니다.
    초점의 시각적 표시에는 시간 제한이 없어야 하며, 사용자가 초점을 맞추었을 때 그 표시가 충분히 명확하고 지속적으로 유지될 수 있도록 해야 합니다. 이는 저시력 사용자나 키보드를 사용하는 사용자에게 특히 중요합니다.

2.4.3 포커스 순서 (Focus Order) (Level A) 2.4.7 포커스 표시 (Focus Visible) (Level AA) WAI - Understanding Focus MDN - CSS outline 속성

기대효과

  • 화면낭독프로그램을 이용하는 사용자의 경우, 사용자 입력 주변의 상하좌우에 위치한 콘텐츠에 대한 정보를 알 수 없습니다. 따라서 웹 콘텐츠를 사용하는 과정에서 키보드 조작에 의한 사용자 입력 간의 이동 순서는 관례를 따라야 합니다. 그렇지 않으면 사용자 입력의 조작 과정에서 혼란을 주게 됩니다.
  • 마우스나 키보드 조작을 통해 특정 영역으로 콘트롤을 이동하였을 경우, 해당 영역이 초점을 받았음을 시각적으로 알려주면 저시력장애인, 고령자, 지체장애인뿐만 아니라 비장애인들도 현재 초점이 어느 콘트롤에 위치하고 있는지 확인할 수 있고, 콘트롤의 기능을 활성화시킬 수 있는지 쉽게 인지할 수 있습니다.

필요성

키보드로 웹 페이지를 탐색할 때, 포커스가 논리적인 순서로 이동하고, 사용자가 현재 위치를 시각적으로 인지할 수 있도록 표시(Outline 등) 되어야 합니다. 포커스가 보이지 않거나, 순서가 뒤섞이면 혼란을 초래할 수 있습니다.

  • 시각장애 사용자 및 키보드 전용 사용자는 포커스만으로 위치 파악할 수 있습니다.
  • 포커스 순서가 엉킬 경우 기능 사용이 불가합니다.
  • 포커스 시각화는 정보 인지와 조작 상태 인식을 도와줍니다.

대상

  • 사용자 유형
  • 이유

  • 시각장애인

    스크린 리더와 포커스 탐색 병행

  • 지체 장애 사용자

    키보드 전용 조작

  • 인지장애 사용자

    시각적 피드백이 필요

체크리스트

  • tab 키로 요소를 탐색할 때 논리적 순서로 이동하는가?
  • 현재 포커스된 요소가 시각적으로 구분 가능한가?
  • 포커스 outline 제거 없이 사용자 정의 스타일을 제공하는가?
  • JavaScript로 강제 초점 이동 시에도 자연스럽게 이동하는가?

테스트 방법

  • tab 키만으로 전체 페이지 탐색을 확인합니다.
  • 포커스 시각적 표시(outline, border 등)를 확인합니다.
  • 스크린 리더 사용자 테스트로 초점 이동 및 탐색을 확인합니다.

QA 지표

  • 포커스 outline 누락 비율
  • 포커스 시각화 누락 영역 수
  • Tab 순서 오류 발생률

개발방법

html 예시 – 포커스 스타일 제공

Vue 예시 – 사용자 정의 포커스 스타일

React 예시 – 논리적 포커스 순서

점검 기준

  • 포커스가 논리적인 순서로 이동하는가?
  • 포커스가 시각적으로 명확히 표시되는가?
  • outline 제거 시 대체 스타일이 제공되는가?

점검 방법

  • 키보드(Tab)만으로 UI 탐색을 확인합니다.
  • 포커스가 눈에 보이는지 육안으로 확인합니다.
  • 요소간 포커스 이동 순서 논리성을 점검합니다.

준수/미준수 사례

미준수 사례

문제점 :
<div> 요소에 클릭 이벤트가 적용되어 있지만, 기본적으로 키보드 초점을 받을 수 없기 때문에 키보드 사용자는 <div> 요소에 접근할 수 없습니다.
<button> 요소는 초점을 받을 수 있지만, <div>는 클릭할 수 있더라도 초점 이동이 불가능하여 화면 리더 사용자나 키보드 사용자가 그 요소에 접근하지 못합니다.
초점 이동 시 시각적 표시도 없어서 사용자는 어디에 초점이 있는지 알 수 없습니다.

준수 사례

설명 :
<div> 요소에 tabindex="0" 속성을 추가하여 키보드 초점이 가능해졌습니다. 키보드 사용자도 이 요소를 탐색할 수 있습니다.
<button> 요소는 기본적으로 키보드 초점을 받을 수 있으며, 버튼을 클릭할 때와 키보드로 활성화할 때 동일한 동작을 보장합니다.
초점 이동 시, 시각적으로도 초점이 있는 요소가 강조되거나 하이라이트되어야 합니다. 예를 들어 CSS에서 :focus 상태를 이용하여 스타일을 적용할 수 있습니다.

관련 영상

출처 : AOA11Y (Academy Of Accessibility)

접근성 테스트 도구 활용 점검방법

결론

접근성은 시작은 있지만 끝이 없는 작업입니다.
오류 항목을 정기적으로 점검하여 접근성 개선을 한다면 점차 검사를 할 항목이 줄어들게 될 것입니다. 모두가 차별 없이 서비스를 이용할 수 있도록 접근성 유지를 위한 모두의 노력이 필요합니다. 무엇보다 접근성 작업은 서비스를 제공한다면 선택이 아닌 필수로 지켜야하는 항목임을 잊지 말아야 합니다.

접근성 작업 시 점검 필수사항

  • 접근성 가이드(WCAG, KWCAG, WAI-ARIA) 내용 숙지
  • 접근성 체크리스트 작성
  • 접근성 자동 및 수동 검사(스크린리더) 진행
  • 접근성 검사 툴(Lighthouse Accessibility 등) 활용 오류 항목 개선 및 내용 정리
  • 접근성 사용자 테스트
  • 접근성 정기적인 모니터링