CSS-blind

blind

• blind를 사용하는 이유?

  웹 표준을 지키기 위해,
  자세히말하면 장애를 가진 사람이 웹사이트 이용시 불편함을 겪지 않게 하기 위해 컨텐츠를 숨기더라도 스크린 리더기에 읽히게끔 하기 위함.

• blind를 사용하는 법?
  아래 코드를 css에 복사 해 두고, 숨기고싶은 컨텐츠에 사용하자.

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

ex)아래처럼 div 또는 section이나, 특별히 설명해야하는 곳에 blind클래스를 주고 간단하게 설명넣기

           <div class="blind">회사 실적 소개 영역</div>

• 느낀점
  여태 뭔가를 숨길때, display:none / visibility:hidden 을 써 왔었는데, 이 두가지가 스크린 리더기에 읽히지 않는다는 걸 깨달았고, 앞으로는 나보다 타인이 웹사이트를 쓸 때 편리한 웹사이트를 만들어야 겠다는걸 깨달았다.