[CSS] 웹 접근성을 고려한 ir 와 blind

웹 접근성이란? 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것.

 

ir (Image Replacement)

• 웹 접근성을 고려하여 대체 텍스트를 써야하지만 숨기고 싶고, 스크린 리더기에는 인식이 되어야 할 필요가 있는 경우
• <img> 태그의 alt 속성 값으로 표현하기에 대체 텍스트가 길 때
• CSS background 속성으로 처리한 의미 있는 이미지일 때
• 클래스명을 blind로 사용하기도 함

아래의 속성들은 화면에서 영역 자체를 잡히지 않도록 할 수는 있지만, 스크린 리더로 읽히지 않기 때문에 웹 접근성에 좋지 않다.

display: none;
visiblity: hidden;
font-size: 0;
line-height: 0;
width: 0; height: 0;

 

사용 방법

<h2 class="ir">숨기려는 텍스트</h2>

.ir {
  /* 레이아웃에 영향을 끼치지 않음 */
  position: absolute;
  
  /* 스크린 리더가 인식할 수 있음 */
  width: 1px;
  height: 1px;
  
  /* 눈에 보이지 않도록 함 */
  margin: -1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
}