키보드 전용 포커스 스타일을 구현하고 접근성을 유지하는 방법은 무엇입니까?

키보드 전용 초점 스타일 구현

배경:
기본 초점 스타일을 선호하지 않을 수도 있습니다. 강요. 그러나 키보드 접근성이 있는 사용자는 여전히 포커스 링을 볼 수 있어야 합니다. 포커스 스타일을 맞춤설정하면서 접근성을 유지하는 것은 어려울 수 있습니다. 이 기사에서는 키보드를 사용할 때만 초점 스타일을 활성화하는 솔루션을 살펴봅니다.

해결책:

1. 기본 초점 스타일 제거:

CSS를 사용하여 포커스 가능한 모든 요소에서 기본 포커스 스타일을 제거하세요. 이렇게 하면 초점이 필요하지 않을 때 혼란스러운 스타일을 방지할 수 있습니다.

2. 맞춤형 초점 가능 요소 만들기:

범위 또는 div와 같은 컨테이너 요소의 경우 다음을 사용하세요. tabindex 속성을 사용하여 포커스 가능하게 만듭니다.

3. 사용자 정의 포커스 스타일 적용:

a. 내부 요소 포커스:

• 컨테이너 요소 내의 내부 요소에 포커스 스타일을 추가합니다.
• 이렇게 하면 여러 레이어가 있는 요소에서 포커스 스타일이 표시됩니다.

ㄴ. 외부 요소 포커스:

• 마우스 클릭이나 터치 시 포커스 링을 제거하려면 외부 요소에 이벤트 리스너를 추가하세요.
• 이는 마우스를 사용하는 동안 불필요한 포커스 스타일을 방지하면서 접근성을 유지합니다. 상호 작용.

예제 코드:

<code class="css">button, a, span {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  font-size: inherit;
}

.btn {
  all: initial;
  margin: 1em;
  display: inline-block;
}

.btn__content {
  background: orange;
  padding: 1em;
  cursor: pointer;
  display: inline-block;
}

.btn__content:focus {
    box-shadow: 0 0 2px 2px #51a7e8;
    color: lime;
}

.btn:focus,
.btn__content:focus {
    outline: none;
}</code>

<code class="html"><button id="btn" class="btn" type="button">
    <span class="btn__content" tabindex="-1">
        I'm a button!
    </span>
</button></code>

결론:
중첩된 내부 요소를 사용하고 외부 요소에서 기본 포커스 스타일을 제거하면 키보드 전용 포커스 스타일을 활성화할 수 있습니다. 이를 통해 포커스 모양을 맞춤 설정하면서 접근성을 유지할 수 있습니다.

위 내용은 키보드 전용 포커스 스타일을 구현하고 접근성을 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!