LabEx
로그인무료 가입

접근 가능한 화면 밖 요소 숨기기

Beginner

This tutorial is from open-source community. Access the source code

소개

이 랩에서는 CSS 에서 요소를 화면 밖으로 숨기는 개념을 탐구합니다. 이 기술을 사용하면 시각적으로나 위치적으로 요소에 접근할 수 없도록 하면서도 보조 기술 (assistive technologies) 을 통해 접근할 수 있도록 할 수 있습니다. 이 랩을 마치면, 이 기술을 사용하여 접근성이 더 좋고 레이아웃 친화적인 웹 페이지를 만드는 방법에 대한 확실한 이해를 갖게 될 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

화면 밖 (Offscreen)

index.html과 style.css는 이미 VM 에 제공되어 있습니다.

이 기술은 DOM 에서 요소를 완전히 숨기면서도 접근 가능하게 만듭니다. 이를 위해 다음 단계를 따를 수 있습니다.

  • 모든 테두리와 패딩을 제거하고 요소의 오버플로우 (overflow) 를 숨깁니다.
  • clip을 사용하여 요소의 어떤 부분도 표시되지 않도록 합니다.
  • 요소의 height와 width를 1px로 설정하고 margin: -1px를 사용하여 음수로 만듭니다.
  • position: absolute를 사용하여 요소가 DOM 에서 공간을 차지하지 않도록 합니다.
  • 이 기술은 접근성과 레이아웃 친화성 측면에서 display: none (스크린 리더에서 읽을 수 없음) 및 visibility: hidden (DOM 에서 물리적 공간을 차지함) 의 더 나은 대안입니다.

HTML 과 CSS 에서 이 기술을 사용하는 방법의 예는 다음과 같습니다.

<a class="button" href="https://google.com">
  Learn More <span class="offscreen">about pants</span>
</a>

.offscreen {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! Offscreen 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.