Skip to main content

웹접근성을 고려한 숨김처리

note

스크린리더와 같은 보조도구를 사용하는 사용자에게는 필요한 정보들이 있다. 스크린리더를 사용하는 사용자는 텍스트 정보에 의지해야된다. 이를 위해 접근성을 고려한 숨김처리 기술을 꼭 알아야한다.

콘텐츠를 숨기는 방법​

1. display: none; 와 visibility:hidden;​

  • 모든 사용자에게 콘텐츠를 숨김
  • 시각적흐름을 완전 제거, 스크린리더기도 무시됨.
  • 모든 사용자에게 숨기고 싶을 때만 사용.

2. width: 0px;와 height:0px;​

  • HTML/CSS로 정의된 크기가 없으면 페이지 흐름에서 제거. 대부분의 스크린리더가 읽지 않음.
  • font-size:0px;,line-height:0px;은 작동할 수 있지만, 가로 공간에 차지하게됨.
  • 악의적인 것으로 해석되어 검색 엔진에 불이익을 준다.(권장하지 않음)

3. text-indent: -9999px;​

  • 콘텐츠를 왼쪽으로 밀어버리는 방법, 스크린리더도 해당 텍스트를 읽게 됨.
  • 링크, 양식 컨트롤 또는 기타 포커스가 가능한 요소에 지정된 경우 포커스는 동작하나 페이지에서는 표시가 되지않음.

4. 콘텐츠를 화면 밖으로 보내기​

.sr-only {
  position: absolute;
  /* 페이지 흐름에서 요소를 제거 */
  left: -9999px;
  /* 왼쪽으로 밀어버리기 */
  top: auto;
  /* 원래 위치와 동일한 위치에 수직으로 배치 */
  width: 1px;
  height: 1px;
  overflow: hidden;
  /* 요소 크기를 1 * 1 픽셀로 만들고 해당 픽셀에 맞지 않는 모든 항목을 숨김 */
}

5. CSS 클립방법​

.a11y-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  /* clip은 구버전 브라우저에 호환을 위해 작성 */
  clip-path: inset(50%);
  /* clip의 최신 버전  */
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
/* 서울시청, naver, daum 등 다 비슷한 코드로 사용 중 */
/* 코드를 이해하는 것도 좋지만 snippet을 이용하여 사용하는 것이 가장 좋다. */
  • body 콘텐츠에서 가능한 앞쪽에 배치하는 링크로, 페이지의 주요 콘텐츠의 시작점을 알림
  • header의 네비게이션과 같이 여러 페이지에서 반복되는 콘텐츠를 키보드 사용자가 쉽게 생략할 수 있도록 도와줌.
  • 이용 방법은 tap키를 눌러 확인하고 원하는 목록을 찾고, Enter키를 눌러 선택한 화면으로 접근