키보드 액세스 기본사항

Rob Dodson

키보드에 의존하여 사용자의 애플리케이션을 탐색할 수 있는 키보드를 사용하는 사용자에게 일시적이고 영구적인 운동 장애가 있는 경우 더 효율적이고 생산적으로 만들 수 있습니다. 원활한 키보드 탐색 모든 사용자에게 더 나은 경험을 선사하는 것이 중요합니다.

포커스 및 탭 순서

특정 시점에 focus는 애플리케이션의 어떤 요소 (예: 필드, 체크박스, 버튼 또는 링크)는 현재 키보드에서 입력을 수신합니다. 포커스가 설정된 요소는 키보드 이벤트를 수신하는 것 외에도 콘텐츠를 받습니다. 텍스트를 표시합니다.

페이지로 포커스를 이동하려면 TAB를 사용하여 '앞으로'로 이동합니다. 및 SHIFT + TAB '뒤로' 이동할 수 있습니다 현재 포커스가 설정된 요소는 보통 포커스 링을 사용하며, 브라우저마다 포커스 링의 스타일을 다르게 지정합니다. 이 포커스가 상호작용 요소를 통해 앞뒤로 이동하는 순서 탭 순서라고 합니다.

텍스트 필드, 버튼, 선택 목록과 같은 대화형 HTML 요소는 암시적으로 포커스 가능: 탭 순서에 자동으로 삽입됨 기반으로 DOM. 이러한 대화형 요소에는 키보드 이벤트 처리도 내장되어 있습니다. Elements 암시적으로 포커스를 맞출 수는 없는데, 왜냐하면 사용자는 일반적으로 상호작용할 필요가 없습니다.

논리적인 탭 순서를 구현하는 것은 사용자에게 원활한 키보드 탐색 환경을 제공합니다. 기억해야 할 두 가지 주요 아이디어는 다음 사항을 염두에 두시기 바랍니다.

  1. 논리적 순서가 되도록 DOM의 요소 정렬
  2. 수신해서는 안 되는 오프스크린 콘텐츠의 공개 상태를 올바르게 설정합니다. 집중

논리적 순서가 되도록 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를 사용하여 요소의 시각적 위치를 변경할 때는 비논리적인 탭 순서를 만듭니다. 위의 비논리적인 탭 순서를 수정하려면 떠다니는 '키위' '코코넛' 버튼 다음에 오도록 버튼을 사용하고 인라인 스타일을 제거합니다.

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

화면 밖 상호작용 요소가 DOM에 있어야 하지만 표시됩니다. 예를 들어 반응형 측면 탐색 메뉴가 버튼을 클릭할 때 사용자가 측면 탐색 메뉴에 포커스를 둘 수 없어야 합니다. 닫힐 때.

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

  • display: none
  • visibility: hidden

예를 들어 측면 탐색 메뉴가 위의 CSS 속성을 각각 다음으로 대체합니다.

  • display: block
  • visibility: visible
를 통해 개인정보처리방침을 정의할 수 있습니다.

다음 단계

거의 전적으로 키보드나 키보드만으로 컴퓨터를 작동하는 사용자의 경우 다른 입력 장치가 있는 경우, 논리적인 탭 순서는 애플리케이션을 액세스하고 사용할 수 있습니다. 탭 순서를 확인하는 습관을 들이면 게시하기 전에 애플리케이션을 탭해 보세요.