미래 지향적인 두 가지 유형의 시각적 숨겨진 콘텐츠

원래 게시됨https://dear-dia11y.com/future-proof-two-types-of-visually-hidden-content.html

친애하는 dia11y,

누구에게도 콘텐츠를 숨기고 싶지 않지만 디자인이 충분히 포괄적이지 않을 때 추가 컨텍스트와 기능을 제공해야 할 때가 있습니다.

.visually-hidden "clip pattern" from The A11y Project은 화면 판독기 사용자를 위한 콘텐츠를 숨기는 데 탁월하며 <button>와 같이 화면 판독기, 키보드 및 기타 보조 장치 사용자 모두에게 초점을 맞추는 대화형 요소를 제공하는 데 활용할 수 있습니다. . 해당 웹 사이트의 권장 사항은 다음과 같습니다.

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

대부분의 사용 사례에서 이것은 훌륭합니다. 그러나 대규모 코드베이스에서 수행한 작업은 이것이 공간을 차지하지 않도록 하려면 과시하고 미래의 변경 사항에 대해서도 경계해야 한다는 것을 보여주었습니다.

.visually-hidden:not(:focus):not(:active) {
  border: none !important;
  clip-path: inset(50%) !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  margin: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

내 인생에서 내가 하는 대부분의 일은 나 외에는 누구에게도 중요하지 않지만 시각적으로 숨겨진 콘텐츠를 올바르게 얻는 것은 매우 !important .

이러한 추가 기능을 통해 기존 설계를 손상시키지 않도록 할 수 있습니다.

그러나 한 페이지/뷰에서 다른 페이지/뷰로 전환하고 포커스 컨텍스트를 관리하기 위해 시각적으로 숨겨진 요소에서 element.focus()를 호출해야 하는 경우에는 어떻게 될까요? 우리는 다음과 같은 것을 가질 수 있습니다:

<h1 class="visually-hidden" tabindex="-1">
  A necessary hidden h1 for whatever reason
</h1>

그 .focus() 에서 <h1> 를 호출하면 :not(:focus) 정의의 .visually-hidden 부분이 숨겨지지 않도록 합니다!
.visually-hidden 클래스는 링크와 버튼도 설명하기 위한 포괄적인 것으로 의도되었으며, 우리는 확실히 이를 활용하고 싶지만, 초점이 맞춰지는 것을 결코 원하지 않는다는 것을 알고 있기 때문에 명시적일 수 있습니다. 추가 클래스.visually-hidden-always를 사용하여 이를 수행하고 그룹화된 선택기를 통해 코드를 재사용합니다.

.visually-hidden:not(:focus):not(:active),
.visually-hidden-always {
  border: none !important;
  clip-path: inset(50%) !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  margin: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

주목해야 할 중요한 것은 1px 의 사용법입니다. em 또는 rem 또는 ch 또는 ex 또는 영리한 것을 사용하고 싶은 유혹을 받을 수 있지만 이렇게 해서는 안 됩니다! font-size , 브라우저, 모니터 DPI 등에 따라 0.1em 와 같은 것이 절반 픽셀로 끝나고 0 로 반올림되어 스크린 리더에서 액세스할 수 없게 됩니다! 사용1px , 미래의 나에게 부탁합니다. 특정 항목에는 px를 사용하는 것이 좋습니다.

당신 것,
로버트 W. 피어스