숨김 요소

CSS 숨김 요소

이번 시간은 요소를 숨겨지는 여러가지 CSS 요소들이 있는데 해당 요소들을 알아보겠습니다.

---

.sr-only

페이지에서는 가리지만, 스크린 리더에서는 접근 가능하도록 하는 일종의 CSS 선언이다.

aria-hidden

true로 설정되면, accessibility tree에서 해당 콘텐츠를 가리지만,
시각적으로는 볼 수 있으며, aria-hidden="true" 엘리먼트에 기본 스타일을 적용하는 브라우저는 없다.
주의 할 점은 , aria-hidden="true"가 focusable한 요소가 되어서는 안된다는 것이다.
스크린리더에는 보이지 않지만, focus가 되기 때문이다.

display: none / hidden

두 가지 방법은 모두 렌더링트리와 접근성 트리에서 사라지게 하며,
hidden은 별도의 CSS가 없이도 HTML을 통해서 완전히 마스킹할 수 있어서 편리한 점이 있다.

visibility :hidden

레이아웃에 영향을 미치지 않고 엘리먼트를 감춘다. 사라진 공간은 빈 공간으로 남으며,
리플로우가 일어나지 않으며, 접근성 관점에서 보았을 때는 위의 display:none과 동일하다.

opacity:0 / clip-path: circle(0)

엘리먼트의 요소를 안보이게 하지만, visibility: hidden과 마찬가지로 빈공간이 남아 있게 된다.
이 콘텐츠에 접근할 수 있는지 여부는 접근성 기술에 따라 다르다.
따라서 일관되게 숨기려면 이것을 사용하지 않는 것이 좋다.

transform: scale(0)

시각적으로 엘리먼트를 감추지만, 빈 공간이 남는다.
그러나 스크린 리더에서는 이 요소에 접근할 수가 있다.

width: 0, height: 0

특정 요소의 너비와 높이를 0으로 설정하여 숨기는 방식으로, 스크린리더
또한, 이 엘리먼트가 접근 가능하지 않은 것으로 간주하고 건너뛴다.

content-visibility: hidden

이 속성은 크롬브라우저에서 특정 요소의 렌더링을 뷰포트내에 있기전까지는 가리는 방법으로 도입되었다.
이 속성은 display: none과 마찬가지로 접근성 트리에서 사라진다.
접근성차원에서 봤을 때는 그다지 좋은 기술은 아니므로 쓰지 않는 것이 좋다.

method	Visible	Accessible
.sr-only	X	O
aria-hidden="true"	O	X
hidden=""	X	X
display: none	X	X
visibility: hidden	X	X
opacity: 0	X	-
clip-path: circle(0)	X	-
transform: scale(0)	X	O
width: 0 / height: 0	X	X
content-visibility: hidden	X	X