웹 접근성을 고려한 요소 숨기

CSS에서 요소를 안보이게하는 다양한 방법

• display: none : HTML 구조는 남고, 화면에서 영역이 사라진다.

• visibility: hidden : 화면에서 사라지지만 영역은 가지고있다.

• opacity: 0 : 불투명도를 조절하는거라 영역은 그대로 있다. 애니메이션 적용가능

• transfrom : scale(0) : 요소의 크기를 축소시켜 안보이게함. 애니메이션 적용가능

  • 다른사람들은 영역도 사라진다는데..? 실제로 작성해서 보면 영역은 그대로있다.

• position: absolute : top, left 를 함께 사용해 요소를 다른곳으로 보내버린다. 영역도 사라짐.

• width: 0; height: 0; : 화면에서 영역이 사라진다. 단, 텍스트는 남을 수 있는데 overflow: hidden을 추가해주면 텍스트도 사라짐

각 속성들이 어떻게 숨겨지는지 궁금하다면 아래 코드펜을 확인해보자!

See the Pen Untitled by So-An (@So-An) on CodePen.

그렇다면 모두 웹 접근성을 준수한 방법일까?

웹 접근성 (Web Accessibility)

웹 접근성이란 고령자, 장애인, 비 장애인 등 웹을 이용하려는 사용자 모두에게 동등한 정보를 제공해야 하는것을 말한다.

예시로 네이버 사이트에 접속을 했다고치자. 대부분의 사람들은 아이콘을 봤을때 아 저게 메뉴구나, 페이구나를 알아볼 수 있다. 하지만 시각장애인이 접속했을때 저런 아이콘 하나로 이게 무슨 버튼인지, 무슨아이콘인지 알 수 없다. 웹 접근성을 위해서는 스크린 리더가 읽을 수 있도록 보조로 설명하는 글이 필요하다.

실제로 개발자 도구를 켜서 네이버 사이트를 보다보면 blind 클래스를 가진 요소들을 찾아볼 수 있다. 이 클래스를 가진 요소들은 화면상에서 보여지진 않지만, 스크린리더가 읽을 수 있는 요소들이다.

웹 접근성을 위한 요소 숨기기

앞서 다양한 CSS 속성을 사용해서 요소 숨기는법을 알려줬다. 하지만 대표적으로 display: none같은 경우는 스크린리더기에서 읽히지 않는다.
웹 접근성을 위해서는 화면에서만 보이지 않으면서 스크린 리더가 읽을수 있게 작성을 해줘야한다.

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* 줄바꿈 금지 */
}

.hide {
    display: block;
    position: absolute;
    border: 0;
    width: 1px;
    height: 1px;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
}

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

작성자마다 사용하는 속성이 약간씩 다르지만 핵심은 이거인듯하다

• position: absolute를 이용해 본문의 흐름에서 떼어놓고
• width: 1px hight: 1px을 주어 최소 크기로 만들고
• margin: -1px 요소에 역마진을 부여함으로써 요소가 차지하는 공간을 제거한다.
• clip: rect(0, 0, 0, 0) : 요소를 클리핑하여 표시되지않게 한다
• overflow: hidden 속성으로 요소를 넘치지 않게 만들어준다.

See the Pen CSS 요소 숨기기2 by So-An (@So-An) on CodePen.