웹 애플리케이션에서 키보드 탐색은 어떻게 작동해야 합니까?

사용자가 웹 콘텐츠에 액세스할 수 있도록 하려면 키보드만으로 탐색할 수 있어야 합니다. 이는 운동 및 시각 장애가 있는 사용자를 포함하되 이에 국한되지 않는 모든 사용자에게 도움이 됩니다.

내 웹 콘텐츠는 키보드로 탐색할 때 어떻게 작동해야 합니까?

tab 키

를 사용하여 모든 대화형 항목(예: 버튼, 링크, 양식 입력) 간에 이동할 수 있어야 합니다.

페이지를 탭으로 이동할 때 비대화형 항목(예: 단락, 이미지)에 초점이 맞춰지지 않습니다

.

항목을 탭할 때 초점이 맞춰진 요소가 명확하게 강조 표시되어야 합니다

.

항목을 탭하는 순서는 의미가 있어야 합니다. 일반적으로 이것은 일반적으로 화면을 읽는 것과 동일한 순서를 따른다는 것을 의미합니다. 위에서 아래로, 대부분의 경우 왼쪽에서 오른쪽으로

콘텐츠에 따라 많은 추가 노력 없이 앱에서 좋은 키보드 탐색을 달성할 수 있지만 일부 영역에는 특별한 주의가 필요할 수 있습니다.

HTML 문제를 선언하는 순서

키보드를 사용하여 탭을 이동하는 경우 HTML을 선언하는 순서가 중요하며 CSS가 항목을 정렬한 후 페이지에서 시각적으로 보이는 방식이 아니라는 점을 기억하는 것이 중요합니다.

페이지에서 서로 옆에 가로로 표시되는 요소에 특히 주의를 기울이세요. 예를 들어 보조 링크가 있는 측면 패널이 있는 경우 마지막으로 선언하여 더 중요한 요소의 탭 순서를 방해하지 않도록 하세요.

탭 순서를 확인하는 간단한 방법 중 하나는 말 그대로 브라우저에서 직접 모든 대화형 항목을 탭하는 것입니다. 그러나 페이지에 많은 항목이 있거나 명확한 버그 티켓을 기록하고 싶다면 탭 순서에 대한 시각적 보고서를 생성하는 "탭 정지 표시"기능을 적극 권장합니다Accessibility Insights. , 예를 들어:

tabIndex를 현명하게 사용

대화형 사용자 지정 구성 요소를 만든 경우 tabIndex 특성을 사용해야 합니다. 이에 대한 좋은 예는 클릭 가능한 카드 구성 요소입니다.
tabIndex를 사용하기 전에 표준 대화형 HTML 요소(예: 버튼, 링크)가 목적에 맞는지 고려해야 합니다.

탭 순서에 사용자 정의 구성 요소를 삽입하려면 속성tabIndex="0"을 추가할 수 있습니다. 이렇게 하면 기본 위치에서 탭 순서에 요소가 삽입됩니다. 예를 들어 클릭 가능한 카드 구성 요소는 다음과 같습니다.

<div class="card-component" tabIndex="0">
  ... 
</div>

초점 스타일에 유의하세요.

모든 브라우저에는 초점이 맞춰진 요소의 기본 스타일이 제공됩니다(가장 일반적으로 요소 주변의 일반 파란색 윤곽선). 많은 디자인 또는 브랜딩 지침이 이 초점 스타일과 충돌할 수 있지만 기본 스타일이 제거되면 다른 초점 표시로 대체되어야 한다는 점을 기억하는 것이 중요합니다. 그렇지 않으면 키보드 사용자는 현재 어떤 요소와 상호 작용할 수 있는지 시각적 단서가 없습니다.

포커스는 :focus CSS 의사 선택기로 스타일을 지정할 수 있습니다. 예를 들면 다음과 같습니다.

.my-button:focus {
  background-color: yellow;
}

소용돌이를 줘!

모든 개발자가 효율성을 위해 키보드 단축키에 의존한다고 생각하는데, 오후에 총력을 기울이는 것은 어떨까요? 마우스/트랙패드를 사용하지 않고 키보드만 사용해 보십시오. 사이트와 응용 프로그램이 예상대로 작동합니까? 댓글로 어떻게 지내는지 알려주세요😄


이 게시물이 유용했습니까? 계속해서 콘텐츠를 만들 수 있도록 buying me a coffee 고려해 주세요 🙂