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