일시적이고 영구적인 운동 장애가 있는 사용자부터 더 효율적이고 생산성을 높이기 위해 단축키를 사용하는 사용자에 이르기까지 다양한 사용자가 키보드를 사용하여 애플리케이션을 탐색합니다. 애플리케이션에 적합한 키보드 탐색 전략이 있으면 모든 사용자에게 더 나은 환경이 생성됩니다.
포커스 및 탭 순서
특정 시점에 focus는 애플리케이션의 요소 (예: 필드, 체크박스, 버튼, 링크)가 현재 키보드에서 입력을 수신하는지를 나타냅니다. 포커스가 맞춰진 요소는 키보드 이벤트를 수신하는 것 외에도 클립보드에서 붙여넣은 콘텐츠도 가져옵니다.
페이지로 포커스를 이동하려면 TAB를 사용하여 '앞으로' 이동하고 SHIFT + TAB를 사용하여 '뒤로' 탐색합니다. 현재 포커스가 설정된 요소는 종종 포커스 링으로 표시되며 브라우저마다 포커스 링의 스타일을 다르게 지정합니다. 포커스가 대화형 요소를 통해 앞뒤로 이동하는 순서를 탭 순서라고 합니다.
텍스트 필드, 버튼, 선택 목록과 같은 대화형 HTML 요소는 암시적으로 포커스 가능합니다. DOM에서의 위치에 따라 탭 순서에 자동으로 삽입됩니다. 이러한 대화형 요소에는 키보드 이벤트 처리도 내장되어 있습니다. 단락 및 div와 같은 요소는 일반적으로 사용자가 상호작용할 필요가 없기 때문에 암시적으로 포커스를 맞출 수 없습니다.
논리적인 탭 순서를 구현하는 것은 사용자에게 원활한 키보드 탐색 환경을 제공하는 데 중요한 부분입니다. 탭 순서를 평가하고 조정할 때 유념해야 할 두 가지 주요 아이디어는 다음과 같습니다.
- 논리적 순서가 되도록 DOM의 요소 정렬
- 포커스를 받지 않아야 하는 오프스크린 콘텐츠의 공개 상태를 올바르게 설정합니다.
논리적 순서가 되도록 DOM의 요소 정렬
애플리케이션의 탭 순서가 논리적인지 확인하려면 페이지를 탭하여 이동해 보세요. 일반적으로 포커스는 읽기 순서를 따라야 하며 왼쪽에서 오른쪽으로, 페이지 상단에서 하단으로 이동해야 합니다.
포커스 순서가 잘못된 것 같다면 탭 순서가 더 자연스럽게 보이도록 DOM의 요소를 재정렬해야 합니다. 항목을 화면 초기에 시각적으로 표시하려면 DOM에서 요소를 더 일찍 이동합니다.
아래의 두 버튼 집합을 탭하여 논리적 탭 순서와 비논리적인 탭 순서를 비교해 보세요.
논리 탭 순서
Illogical 탭 순서
이 두 가지 예의 코드는 아래에 비교되어 있습니다.
논리 탭 순서
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Illogical 탭 순서
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
CSS를 사용하여 요소의 시각적 위치를 변경할 때는 비논리적인 탭 순서가 생성되지 않도록 주의하세요. 위의 비논리적인 탭 순서를 수정하려면 플로팅 'Kiwi' 버튼을 DOM에서 'Coconut' 버튼 뒤에 오도록 이동하고 인라인 스타일을 삭제합니다.
오프스크린 콘텐츠의 공개 상태를 올바르게 설정합니다.
화면 밖 상호작용 요소가 DOM에 있어야 하지만 탭 순서에 있으면 안 되는 경우가 있습니다. 예를 들어, 버튼을 클릭할 때 열리는 반응형 측면 탐색이 있다면 사용자는 측면 탐색 메뉴를 닫을 때 측면 탐색에 포커스를 둘 수 없어야 합니다.
특정 상호작용 요소가 포커스를 받지 않도록 하려면 이 요소에 다음 CSS 속성 중 하나를 제공해야 합니다.
display: nonevisibility: hidden
예를 들어 측면 탐색이 열릴 때 요소를 탭 순서에 다시 추가하려면 위의 CSS 속성을 각각 다음과 같이 바꿉니다.
display: blockvisibility: visible
다음 단계
거의 전적으로 키보드나 다른 입력 기기로만 컴퓨터를 조작하는 사용자의 경우 논리적인 탭 순서는 애플리케이션의 접근성과 사용성을 높이는 데 필수적입니다. 탭 순서를 확인하는 습관을 들이는 것이 좋습니다. 각 게시 전에 애플리케이션을 탭 이동해 보세요.