키보드 액세스 기본사항

롭 도슨

일시적이고 영구적인 운동 장애가 있는 사용자부터 효율성과 생산성을 높이기 위해 단축키를 사용하는 사용자까지 다양한 사용자가 키보드를 사용하여 애플리케이션을 탐색합니다. 애플리케이션에 적절한 키보드 탐색 전략을 세우면 모두에게 더 나은 환경을 만들 수 있습니다.

포커스 및 탭 순서

특정 시점에 포커스는 애플리케이션의 어떤 요소 (예: 필드, 체크박스, 버튼, 링크)가 현재 키보드에서 입력을 수신하는지를 나타냅니다. 포커스가 맞춰진 요소는 키보드 이벤트를 수신하는 것 외에도 클립보드에서 붙여넣는 콘텐츠도 가져옵니다.

페이지에서 포커스를 이동하려면 TAB를 사용하여 '앞으로'로 이동하고 SHIFT + TAB를 사용하여 '뒤로' 이동합니다. 현재 포커스가 설정된 요소는 포커스 링으로 표시되는 경우가 많으며 다양한 브라우저에서 포커스 링의 스타일을 다르게 지정합니다. 포커스가 대화형 요소 간에 앞뒤로 진행되는 순서를 탭 순서라고 합니다.

텍스트 필드, 버튼, 선택 목록과 같은 양방향 HTML 요소는 암시적으로 포커스 가능합니다. 즉, DOM에서의 위치에 따라 탭 순서에 자동으로 삽입됩니다. 이러한 상호작용 요소에는 키보드 이벤트 처리가 내장되어 있습니다. 단락 및 div와 같은 요소는 일반적으로 사용자가 상호작용할 필요가 없으므로 암시적으로 포커스 가능하지 않습니다.

논리적인 탭 순서를 구현하는 것은 사용자에게 원활한 키보드 탐색 환경을 제공하는 데 중요한 부분입니다. 탭 순서를 평가하고 조정할 때 유의해야 할 두 가지 기본 아이디어가 있습니다.

  1. DOM의 요소를 논리적 순서로 정렬
  2. 포커스를 받지 않아야 하는 오프스크린 콘텐츠의 공개 상태를 올바르게 설정합니다.

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를 사용하여 요소의 시각적 위치를 변경할 때 탭 순서가 잘못되지 않도록 주의하세요. 위의 비논리적 탭 순서를 수정하려면 플로팅 'Kiwi' 버튼을 DOM에서 'Coconut' 버튼 뒤에 오도록 이동하고 인라인 스타일을 삭제합니다.

오프스크린 콘텐츠의 공개 상태를 올바르게 설정

화면 밖 상호작용 요소가 DOM에 있어야 하지만 탭 순서는 아니어야 하는 경우가 있습니다. 예를 들어 버튼을 클릭할 때 열리는 반응형 측면 탐색이 있는 경우 사용자가 닫을 때 측면 탐색에 포커스를 맞출 수 없어야 합니다.

특정 상호작용 요소가 포커스를 받지 못하게 하려면 요소에 다음 CSS 속성 중 하나를 제공해야 합니다.

  • display: none
  • visibility: hidden

탭 순서에 다시 요소를 추가하려면(예: 측면 탐색 메뉴가 열릴 때) 위의 CSS 속성을 각각 다음과 같이 바꿉니다.

  • display: block
  • visibility: visible

다음 단계

거의 전적으로 키보드나 다른 입력 기기로 컴퓨터를 작동하는 사용자의 경우 논리적 탭 순서가 있어야 애플리케이션의 접근성과 사용성을 높일 수 있습니다. 탭 순서를 확인하는 습관으로 각 게시 전에 애플리케이션을 탭해 보세요.