키보드 포커스

많은 사람들이 키보드 또는 스위치 기기와 같은 키보드의 기능을 모방한 기타 소프트웨어/하드웨어를 기본 탐색 수단으로 사용합니다. 손목 염좌, 수근관과 같은 미세 운동 장애 등 일시적인 신체적 제약이 있는 사용자 및 장애가 없는 일부 사용자는 개인적인 선호, 효율성, 하드웨어 고장으로 인해 키보드를 사용하여 페이지를 탐색할 수 있습니다.

저시력 또는 시각장애인 사용자는 키보드를 사용하여 확대 또는 스크린 리더 소프트웨어와 결합하여 탐색할 수 있습니다. 그러나 일반 사용자와는 다른 단축키 명령어를 사용하여 화면을 탐색할 수 있습니다.

이러한 모든 장애와 상황에 대한 키보드 지원은 매우 중요합니다. 키보드 접근성의 대부분은 포커스에 중점을 둡니다. 포커스는 화면의 어떤 요소가 현재 키보드로부터 입력을 받는지를 나타냅니다.

이 모듈에서는 키보드 및 포커스 가능 요소의 HTML 구조와 CSS 스타일 지정에 중점을 둡니다. JavaScript 모듈에 대화형 요소의 포커스 관리 및 키 입력에 관한 자세한 내용이 포함되어 있습니다.

포커스 순서

키보드 사용자가 이동할 수 있는 요소를 포커스 가능 요소라고 합니다. 탭 또는 탐색 순서라고도 하는 포커스 순서는 요소가 포커스를 받는 순서입니다. 기본 포커스 순서는 논리적이고 직관적이어야 하며 페이지의 시각적 순서와 일치해야 합니다.

대부분의 언어에서 포커스 순서는 페이지 상단에서 시작되어 하단에서 시작하여 왼쪽에서 오른쪽으로 이동합니다. 하지만 오른쪽에서 왼쪽으로 읽는 언어도 있으므로 페이지의 기본 언어에 따라 포커스 순서가 달라질 수 있습니다.

기본적으로 포커스 순서는 링크, 체크박스, 텍스트 입력과 같이 자연스럽게 포커스 가능한 HTML 요소를 포함합니다. 자연스럽게 포커스를 맞출 수 있는 HTML 요소에는 내장된 탭 순서 지원 및 기본 키보드 이벤트 처리 기능이 포함됩니다.

비대화형 HTML 요소, 맞춤 구성요소, 자연 포커스 시맨틱스를 재정의하는 ARIA가 있는 요소와 같이 일반적으로 포커스를 받지 않는 요소를 포함하도록 포커스 순서를 업데이트할 수 있습니다.

Tabindex

포커스 순서는 양수 tabindex 속성이 있는 경우 이 속성이 있는 요소로 시작하고 가장 작은 양수에서 큰 숫자(예: 1, 2, 3)로 이동합니다. 그런 다음 DOM의 순서에 따라 tabindex가 0인 요소까지 진행합니다. 음수 tabindex가 있는 요소는 모두 자연스러운 포커스 순서에서 삭제됩니다.

일반적으로 포커스 불가능한 요소에 0 (tabindex="0")인 tabindex가 적용되면 DOM에서 표시되는 방식에 따라 페이지의 자연스러운 포커스 순서에 추가됩니다. 하지만 자연스럽게 포커스 가능한 HTML 요소와 달리 완전하게 액세스할 수 있으려면 추가적인 키보드 지원을 제공해야 합니다.

마찬가지로 일반적으로 포커스 가능하지만 비활성 상태인 요소(예: 입력란이 채워질 때까지 작동하지 않는 버튼)가 있는 경우 이 요소에 음수 tabindex(tabindex="-1")를 추가해야 합니다. 보조 기술 및 키보드에 이 버튼이 자연스러운 포커스 순서에서 삭제되어야 한다는 부정적인 tabindex 신호를 추가합니다. 하지만 걱정하지 마세요. 필요할 때 자바스크립트를 사용하여 요소에 포커스를 다시 추가할 수 있습니다.

이 예에서는 자연스럽게 포커스를 받지 않는 요소에 tabindex 속성을 추가했습니다. 요소의 순서는 포커스 순서에 미칠 수 있는 힘을 나타내기 위해 tabindex를 사용하여 조작되었습니다. 금지사항의 예입니다.

링크 건너뛰기

오늘날 대부분의 웹사이트는 페이지 기본 헤더에 페이지마다 일관된 메뉴 링크 목록이 많습니다. 이는 일반적인 탐색에는 유용하지만 키보드 전용 사용자가 여러 번 탭하지 않고도 웹사이트의 주요 콘텐츠에 쉽게 접근하기 어려울 수 있습니다.

중복되거나 유용하지 않은 링크 그룹을 건너뛰는 한 가지 방법은 건너뛰기 링크를 추가하는 것입니다. 건너뛰기 링크는 사용자를 웹사이트의 다른 페이지나 외부 리소스로 보내는 대신 해당 섹션의 ID를 사용하여 동일한 페이지의 다른 섹션으로 이동하는 앵커 링크입니다. 건너뛰기 링크는 일반적으로 사용자가 웹사이트에 방문할 때 처음으로 보게 되는 포커스 가능 요소로 추가되며 디자인 요구사항에 따라 사용자가 탭할 때까지 표시하거나 시각적으로 숨길 수 있습니다.

사용자가 Tab 키를 누르고 활성 건너뛰기 링크가 있는 경우 키보드 포커스를 건너뛰기 링크로 보냅니다. 사용자는 건너뛰기 링크를 클릭하고 헤더 섹션과 기본 탐색 메뉴를 건너뛸 수 있습니다. 사용자가 건너뛰기 링크를 클릭하지 않고 DOM을 계속 탭할 경우 다음 포커스 가능 요소로 이동합니다.

모든 링크와 마찬가지로 건너뛰기 링크에는 링크의 용도에 대한 맥락이 포함되어야 합니다. '주요 콘텐츠로 이동'이라는 문구를 추가하면 사용자가 링크를 통해 어디로 연결되는지 알 수 있습니다. 예에 나와 있는 것처럼 aria-labelledby, aria-label과 같이 링크에 추가 컨텍스트를 제공하거나 <a> 요소의 텍스트 콘텐츠에 추가할 때 선택할 수 있는 다양한 코드 옵션이 있습니다.

포커스 표시기

방금 배운 것처럼 포커스 순서는 키보드 접근성의 중요한 측면입니다. 포커스의 스타일을 지정하는 것도 중요합니다. 포커스 순서가 훌륭하더라도 적절한 스타일 지정 없이 사용자가 페이지에서 자신의 위치를 어떻게 알 수 있을까요?

표시되는 포커스 표시기는 사용자에게 항상 페이지에서 어디에 있는지 알려주는 필수 도구입니다. 키보드만 사용하는 사용자에게 특히 중요합니다.

브라우저 기본 스타일 지정

오늘날 모든 최신 웹브라우저에는 웹사이트 또는 앱의 포커스 가능한 요소에 적용되는 서로 다른 기본 시각적 스타일이 있으며, 다른 것보다 더 쉽게 표시됩니다. 사용자가 페이지를 탭할 때 요소가 키보드 포커스를 받으면 이 스타일이 적용됩니다.

브라우저에서 포커스 스타일을 처리하도록 허용하는 경우 코드를 검토하여 테마가 브라우저의 기본 스타일을 재정의하지 않는지 확인하는 것이 중요합니다. 재정의는 스타일시트에서 "outline: 0" 또는 "outline: none"로 작성되는 경우가 많습니다. 이 작은 코드는 브라우저의 기본 포커스 표시기 스타일을 삭제할 수 있으며, 이로 인해 사용자가 웹사이트나 앱을 탐색하기가 매우 어렵습니다.

a:focus {
  outline: none; /* don't do this! */
}

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

맞춤 스타일

물론 기본 브라우저 스타일을 넘어 테마를 보완하는 맞춤 포커스 표시기를 만들 수 있습니다. 맞춤 포커스 지표를 만들 때 창의력을 자유롭게 발휘할 수 있습니다.

포커스 표시기 도형은 윤곽선, 테두리, 밑줄, 상자, 배경 변경 또는 기타 색상에만 의존하지 않고 키보드의 포커스가 해당 요소에 활성화되어 있음을 나타내는 몇 가지 명확한 스타일 변경 등 다양한 형태를 취할 수 있습니다.

백그라운드에서 사라지지 않도록 포커스 표시기 스타일을 변경할 수 있습니다. 예를 들어 페이지 배경이 흰색이면 버튼 포커스 표시기를 파란색 배경으로 설정할 수 있습니다. 페이지 배경이 파란색이면 동일한 버튼 포커스 스타일을 흰색 배경으로 설정할 수 있습니다.

요소 유형에 따라 포커스 요소 스타일을 변경할 수 있습니다. 예를 들어 본문 링크에는 점선으로 밑줄을 사용하지만 버튼 요소에는 둥근 테두리를 선택할 수 있습니다.

한 페이지에 있는 포커스 표시기 스타일의 수에 관한 규칙은 없지만 불필요한 혼동을 피하기 위해 적절한 수로 유지해야 합니다.

요약정리

웹사이트나 앱이 액세스 가능한 것으로 간주되려면 마우스로 액세스할 수 있는 모든 항목에 키보드로 액세스해야 합니다. 이 모듈에서는 키보드 접근성의 시각적 측면, 특히 포커스 순서와 포커스 표시기에 중점을 두었습니다.

학습 내용 확인하기

ARIA 및 HTML에 대한 지식 테스트