많은 사람들이 키보드 또는 키보드의 주요 수단으로 스위치 장치 같은 키보드의 기능을 제공합니다. 손목을 염수하는 등 일시적인 신체적 제약이 있는 사람 수근관과 같은 미세 거동 장애, 장애는 개인적인 이유로 키보드로 페이지를 탐색할 수 있음 선호, 효율성, 하드웨어 고장 등입니다.
저시력 또는 시각장애인 사용자는 키보드와 함께 사용하여 확대 또는 스크린 리더 소프트웨어를 사용할 수 있습니다. 그러나 경우에 따라 시력이 정상인 사용자가 하는 것보다 화면을 탐색할 수 있습니다.
이러한 모든 장애와 환경을 위한 키보드 지원은 매우 중요합니다. 가 키보드 접근성의 대부분은 포커스에 있습니다. 포커스는 화면에서 어떤 요소를 표시할지를 가리킴 현재 키보드로부터 입력을 수신합니다.
이 모듈에서는 HTML 구조와 CSS 스타일링에 중점을 둡니다. 키보드 및 포커스 가능 요소가 있습니다. 이 JavaScript 모듈에는 포커스 관리 및 상호작용형 요소의 키 입력에 관한 정보를 제공합니다.
포커스 순서
키보드 사용자가 이동할 수 있는 요소를 포커스 가능 요소라고 합니다. 요소 포커스 순서, 탭 또는 탐색 순서라고도 하며 요소가 초점을 맞추고 있습니다. 기본 포커스 순서는 논리적이고 직관적이며 시각적 요소와 일치해야 합니다. 역할을 합니다.
대부분의 언어에서 포커스 순서는 페이지 상단에서 시작하여 하단에서 끝나며 왼쪽에서 오른쪽으로 이동합니다. 그러나 일부 언어는 오른쪽에서 왼쪽으로 읽기 때문에 페이지의 기본 언어가 포커스 순서를 다르게 해야 할 수도 있습니다.
기본적으로 포커스 순서는 다음과 같이 자연스럽게 포커스 가능한 HTML 요소를 포함합니다. 링크, 체크박스, 텍스트 입력입니다. 자연스럽게 포커스 가능한 HTML 요소에는 기본 제공되는 탭 순서 지원 및 기본 키보드 이벤트 처리 기능이 있습니다.
일반적으로 포커스되지 않는 요소를 포함하도록 포커스 순서를 업데이트할 수 있습니다. 비대화형 HTML 요소, 맞춤 구성요소, 요소를 재정의하는 ARIA가 포함된 자연 포커스 시맨틱스를 기반으로 합니다.
탭 색인
포커스 순서는 양수 값이 있는 요소로 시작합니다. tabindex 속성 (있는 경우)을 적용하고 가장 작은 양수에서 가장 큰 숫자입니다 (예: 1, 2, 3). 그런 다음 0으로 설정합니다. tabindex가 음수인 요소 자연 포커스 순서에서 삭제됩니다.
tabindex가
일반적으로 포커스 불가능한 요소에 적용되는 경우 (tabindex="0")는
표시되는 방식에 따라 페이지의 자연스러운 포커스 순서에 추가됩니다.
할 수 있습니다. 하지만 자연스럽게 포커스 가능한 HTML 요소와 달리
추가 키보드 지원 제공
완전히 액세스할 수 있도록 해야 합니다
마찬가지로, 일반적으로 포커스 가능하지만
비활성(예: 입력란이 채워질 때까지 작동하지 않는 버튼)
을 입력합니다. 이 요소에 음수 tabindex (tabindex="-1")를 추가해야 합니다. 추가 중
부정적인 tabindex 신호를 보내 이 시스템이 작동하는 보조 테크와 키보드에
버튼은 자연 포커스 순서에서 삭제되어야 합니다. 하지만 걱정하지 마세요.
자바스크립트를 사용하여 필요한 경우 요소에 포커스를 다시 추가합니다.
이 예에서는 tabindex 속성이 포함되지 않은 요소에 추가되었습니다.
자연스럽게 포커스를 받습니다. 요소의 순서는
tabindex - 포커스 순서에 미칠 수 있는 힘을 보여줍니다. 이것은
하지 말아야 할 일의 예입니다.
</ph>
<ph type="x-smartling-placeholder">링크 건너뛰기
오늘날 대부분의 웹사이트는 페이지의 기본 헤더에 긴 메뉴 링크 목록을 포함하고 있습니다. 일관성이 있어야 합니다. 이는 일반적인 탐색에 유용하지만 키보드만 사용하는 사용자는 웹사이트의 기본 여러 번 탭하지 않아도 됩니다
중복되거나 유용하지 않은 링크 그룹을 우회하는 한 가지 방법은 링크 건너뛰기를 참조하세요. 건너뛰기 링크는 앵커 광고임 같은 페이지의 다른 섹션으로 이동하는 링크에는 해당 섹션의 사용자를 웹사이트 또는 외부 사이트의 다른 페이지로 보내는 대신 리소스도 제공합니다 건너뛰기 링크는 일반적으로 사용자가 포커스할 수 있는 첫 번째 요소로 추가됩니다. 눈에 띄거나 시각적으로 숨겨질 수 있는 사용자가 탭할 때까지 계속 스크롤해야 합니다.
사용자가 Tab 키를 누르고 활성 건너뛰기 링크가 있으면 키보드 포커스를 건너뛰기 링크로 보낼 수 있습니다. 사용자가 건너뛰기 링크를 클릭하여 헤더 섹션과 기본 탐색을 진행합니다 만약 그들이 링크를 건너뛰고 DOM 아래로 계속 이동하면 다음 페이지로 이동하게 됩니다. 포커스 가능 요소
다른 모든 링크와 마찬가지로 건너뛰기 링크에는
링크 용도에 따라 다릅니다. '주요 콘텐츠로 이동'이라는 문구를 추가하면 사용자가 알 수 있도록
링크를 클릭하게 됩니다. 여러 가지 코드 옵션이 있는 경우
다음과 같은 추가 문맥을 링크에 제공
aria-labelledby
aria-label 또는 추가
위의 예에 표시된 대로 <a> 요소의 텍스트 콘텐츠에 적용됩니다.
</ph>
포커스 표시기
방금 배웠듯이 포커스 순서는 키보드의 중요한 측면입니다. 액세스할 수 있습니다 포커스의 스타일을 지정하는 것도 중요합니다. 왜냐하면 포커스 순서가 우수하더라도 사용자가 현재 어느 위치에 있는지 어떻게 알 수 있을까요? 페이지를 더 멋지게 꾸미려면 어떻게 해야 할까요?
가시적인 포커스 표시기 은(는) 사용자에게 웹사이트에서 항상 자신의 위치를 알려 주는 있습니다. 시력이 정상인 키보드만 사용하는 사용자에게 특히 중요합니다.
브라우저 기본 스타일 지정
오늘날 모든 최신 웹 브라우저는 포커스 가능 요소에 적용(일부는 더 쉽게 눈에 띄도록 설정) 더 높다는 것을 알 수 있습니다. 사용자가 페이지를 탭할 때 이 스타일 지정이 요소가 키보드 포커스를 받습니다.
브라우저에서 포커스 스타일을 처리하도록 허용하는 경우
코드를 사용하여 테마가 브라우저의 기본값을 재정의하지 않는지 확인
제공합니다. 재정의는 주로 다음 위치에서 "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 */
}
맞춤 스타일
물론 기본 브라우저 스타일을 넘어 맞춤 템플릿을 만들 수도 있습니다. 테마를 보완하는 포커스 표시기입니다. 맞춤 포커스를 만들 때 자유롭게 창의력을 발휘할 수 있습니다.
포커스 표시기 도형은 윤곽선, 테두리, 밑줄, 상자, 배경 변경 또는 다른 눈에 띄는 스타일 변경이 있는 경우 키보드의 포커스가 활성 상태임을 나타내기 위해 색상에만 의존하지 않는 지정할 수 있습니다.
포커스 표시기 스타일을 변경하여 있습니다. 예를 들어 페이지의 배경이 흰색이면 버튼 포커스 표시기를 파란색 배경으로 바꾸게 됩니다. 페이지에 파란색 동일한 버튼 포커스 스타일을 흰색 배경으로 설정할 수 있습니다.
요소 유형에 따라 포커스 요소 스타일을 변경할 수 있습니다. 예를 들어 본문 링크에는 점선 밑줄을 사용할 수 있지만 나타냅니다.
</ph>
<ph type="x-smartling-placeholder">하나의 포커스 표시기 스타일 수에 대한 규칙은 없습니다. 단, 불필요한 광고가 게재되지 않도록 적절한 수를 유지하는 것이 좋습니다. 합니다.
요약 정리
웹사이트나 앱이 액세스 가능한 것으로 간주되려면 키보드로도 액세스해야 합니다 이 모듈 키보드 접근성의 시각적 측면, 특히 포커스 포커스 지표를 지정할 수 있습니다.
이해도 확인
ARIA 및 HTML에 관한 지식 테스트
흰색 배경에서 가장 접근하기 쉬운 :focus CSS 스타일의 예는 무엇인가요?
outline: 0.5rem solid yellow;background-color:black;text-decoration: dotted underline 2px blue;outline: none; text-decoration:none; background:none;건너뛰기 링크의 목적은 무엇인가요?