사용자 포커스가 실수로 특정 리전에 갇히지 않음

키보드 포커스를 하나의 특정 페이지 요소에 잠그거나 가두어선 안 됩니다. 사용자가 키보드만 사용하여 모든 페이지 요소에서 이동할 수 있어야 합니다.

수동 테스트 방법

사용자가 실수로 포커스를 트래핑할 수 없는지 테스트하려면 키보드만 사용하여 모든 페이지 요소에서 또는 모든 페이지 요소에서 이동합니다. '앞으로' 이동하려면 TAB를 사용하고 '뒤로' 이동하려면 SHIFT + TAB를 사용합니다.

모든 페이지 요소를 탭할 수 없다면 테스트에 실패한 것입니다. 테스트할 때는 특히 키보드 포커스가 멈출 수 있는 자동 완성 위젯에 주의하세요.

해결 방법

모달 대화상자 및 위젯과 같이 콘텐츠를 여러 형식으로 표시하는 페이지에서는 포커스 트랩이 발생할 위험이 있습니다. 모달을 표시하는 경우 사용자가 페이지의 나머지 부분과 상호작용하지 않게 하려면 일시적으로 사용자를 트랩하는 것이 좋습니다.

그러나 모달을 이스케이프하는 키보드로 액세스 가능한 방법을 제공하는 것도 목표로 해야 합니다. 액세스 가능한 모달을 만드는 방법에 관한 이 예를 확인하세요. 모달 및 키보드 트랩도 참고하세요. 이 예에서는 사용자가 포커스 트랩에서 벗어나기 위해 페이지를 새로고침하지 않고도 원하는 모달 동작을 얻을 수 있습니다.

중요한 이유

마우스를 사용할 수 없거나 사용하지 않기로 선택하는 사용자의 경우 키보드 탐색이 화면의 모든 항목에 도달하는 기본 수단입니다. 좋은 키보드 환경은 논리적인 탭 순서와 쉽게 구분할 수 있는 포커스 스타일이 필요합니다. 키보드 사용자가 특정 페이지 요소에 갇히게 되면 페이지와 상호작용할 수 없습니다.

접근성 검토 방법에서 자세히 알아보세요.

자료

사용자 포커스가 실수로 리전에 갇히지 않음 감사를 위한 소스 코드