모바일에서 caption 속성 처리 시 유의점

 

 

웹 접근성을 준수하기 위해 img의 alt값이 태그로 구성하여 처리해야 하는 경우(현역 표)나 ir 기법을 사용할경우 화면상에 내용은 존재하여야 하지만 일반 사용자의 시각에는 보이지 않게 처리해야 하는 경우가 왕왕 있습니다.

이럴때 특정 클래스를 만들어서 처리하는데 웹에서 사용할 때는 caption, legend 에도 동일한 속성을 주어서 처리 하는 경우가 많습니다.  일반적으로 가장 많이 사용하는 방법이 position:absolute 속성을 추가하여 화면 밖으로 안 보이게 처리하는 방법을 사용하는데 이 방법은 모바일에서 caption에 적용하면 colgroup의 width값을 제대로 인식하지 못하는 버그가 발생하게 됩니다. 

일반적인 hidden 처리 CSS

.hidden {    
    position:absolute;        
    top:0;    
    left:0;    
    width:1px;    
    height:1px;    
    font-size:0;    
    line-height:0;    
    visibility:hidden;    
    overflow:hidden;
}

 

위에 방법으로 모바일에서 caption에 속성을 적용하면 위에서 말씀드린 것처럼 colgroup의 width값을 제대로 인식하지 못하게 되는데 그 이유는 position:absolute 속성때문에 발생합니다.

 

hidden속성을 적용한 예제 이미지

 

 

위 문제는 position:absolute 속성이 문제가 되는 것이기 때문에 해당 속성을 빼주거나 아니면 span 태그를 이용하여 처리하면 됩니다. 

 

해결방법 1

caption {    
    overflow:hidden;    
    width:1px;    
    height:0;    
    font-size:0;    
    line-height:0;
}

 

해결방법 2

caption {position:relative;}
caption span {    	
    position:absolute;    
    top:0;    
    left:0;    
    width:1px;    
    height:1px;    
    font-size:0;    
    line-height:0;
    visibility:hidden;    
    overflow:hidden;
}

 

해결방법 1,2를  적용한 예제 이미지