[웹접근성]웹접근성을 고려한 CSS 디자인_숨김 콘텐츠

숨김 콘텐츠

디자인에서 보이지 않는 정보이더라도 콘텐츠의 정보와 내용을 이해하기 위해 필요함. diplay: none 속성을 이용하면 애니메이션이 통하지 않는 것과 같이 해당 속성을 사용하여 콘텐츠를 숨길 경우, 스크린 리더 등 보조기기가 인식할 수 없는 문제가 생긴다.

//화면의 초점이 해당 영역에 머물면서도 스크린 리더가 정보를 읽을 수 있게 함

.ally-hidden{
	position:absolute !important;
    clip:rect(0, 0, 0, 0);
    clip-path: polygon(0 0, 0 0, 0 0);
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
    white-space:nowrap;
 }
 
 스크린 리더의 가상초점 이용