키보드 접근성을 유지하면서 포커스 스타일을 비활성화하려면 어떻게 해야 합니까?

포커스가 필요하지 않을 때 포커스를 비활성화할 수 있나요?

포커스가 있을 때 내비게이션 모양이 마음에 들지 않기 때문에 필요하지 않을 때 포커스를 비활성화하고 싶습니다. 그것에. .active와 동일한 스타일을 사용하므로 혼란스럽습니다. 그러나 키보드를 사용하는 사람들을 위해 이 클래스를 제거하고 싶지는 않을 것입니다.

문제가 해결될 수 있습니다

일부 포스터에서는 :focus-visible 의사 클래스를 언급했는데, 이제 괜찮은 브라우저 지원이 있습니다. 사양에 따라 이제 브라우저는 사용자가 키보드나 기타 비포인팅 장치를 통해 페이지와 상호 작용할 때와 같이 사용자에게 도움이 될 때만 포커스를 표시해야 합니다.

이는 대부분의 경우 브라우저에서 사용자가 버튼(또는 포커스 가능한 다른 요소)을 클릭/탭하면 버튼에 포커스가 있어도 사용자 에이전트는 포커스 링을 표시하지 않습니다. 이 경우 포커스 링은 사용자에게 도움이 되지 않기 때문입니다.

하위 호환성

이와 같이 :focus-visible을 사용할 때 발생할 수 있는 문제는 이를 지원하지 않는 브라우저에서 기본 포커스 링을 표시한다는 것입니다. design.

원래 답변

:focus-visible 솔루션이 이전 버전과의 호환성을 위해 충분하지 않은 경우 다음을 사용하여 버튼, 링크 및 기타 컨테이너 요소에 대해 키보드 전용 포커스 스타일을 얻을 수 있습니다. 다음 해결 방법:

button {
  -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;
}


/* Fixing the Safari bug for `<button>`s overflow */
.btn__content {
    position: relative;
}

/* All the states on the inner element */
.btn:hover > .btn__content  {
    background: salmon;
}

.btn:active > .btn__content  {
    background: darkorange;
}

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

/* Removing default outline only after we've added our custom one */
.btn:focus,
.btn__content:focus {
    outline: none;
}

이 기술은 모든 스타일을 컨테이너의 내부 요소에 배치하여 마우스를 사용할 때 포커스 스타일이 나타나는 것을 방지합니다.

위 내용은 키보드 접근성을 유지하면서 포커스 스타일을 비활성화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!