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