개요
HTML, CSS 숙달을 위해 메가박스 사이트를 만들어보았다. [링크]
유튜브에 있는 튜토리얼을 참고했지만 충분히 이해가 되고 스스로 납득이 가능한 코드만 작성하려고 노력했고 그 과정에서 고민했던 주제인 대체 텍스트에 관해서 간단하게 정리해보려한다.
대체 텍스트란?
대체 텍스트는 말 그대로 이미지를 대신하는 텍스트다. 웹 접근성을 준수하기 위한 필수 사항 중 하나로 이미지를 불러올 수 없을 때, 또는 시각장애를 가진 사용자가 텍스트가 아닌 콘텐츠의 내용을 파악할 수 없는 상황을 보완하기 위함이다. 전자의 경우 불러오지 못한 이미지의 설명을 담은 텍스트가 화면에서 이미지를 대체하고 후자의 경우 스크린 리더가 대체 텍스트를 읽어줌으로서 사용자에게 이미지의 정보를 제공해준다. 그 방법으로는 alt 속성을 통한 방법과 IR기법이 있다.
✽ 이미지라고 해서 img태그의 경우만을 의미하는 것은 아니다. background-img, input태그의 img type도 있다.
alt=""
alt 속성은 img태그 type이 img인 input태그에 사용한다. 느린 네트워크 환경, src 속성값의 오류로 이미지가 보이지 않을 때 alt의 텍스트를 대신 출력해줄 것이며 스크린 리더 또한 인식 가능하다. 단, alt값이 항상 필요한 것은 아니다. 배경 이미지와 같이 장식 목적인 이미지는 alt를 빈값으로 둔다.
<img src="monitor.png" alt="컴퓨터 모니터">
<img src="bg.jpeg" alt="">
<input type="image" src="more.gif" alt= "메뉴 더보기">IR기법(Image Replacement)
이미지 스프라이트(수정 용이, 적은 용량)등 background 속성으로 이미지를 표현하는 경우가 많아지면서 등장한 가상 대체 문자 기법이다. 다양한 방법이 있지만 H5BP에서 채택한 방법을 첨부한다. 접근성도 준수하면서 대체 텍스트를 제공할 수 있는 방법이다. 물론 이것도 몇가지 이슈가 있을 수 있지만 관련한 깊은 내용은 추후에 더 알아보도록 한다.
.hidden {
overflow: hidden;
position: absolute;
border: 0;
width: 1px;
height: 1px;
clip: rect(1px, 1px, 1px, 1px);
}✽ 주의:
.hidden {
display:none;
visivility:hidden
}
/* 스크린리더가 읽지 못하기 때문에 display, visivility속성은 사용하지 않는다. */
.hidden{
width: 0;
height: 0;
font-size: 0;
line-height: 0;
}
/* 크기를 0으로 만들면 일부 스크린 리더가 읽지 못하기 때문에 사용하지 않는다. */접근 가능한 숨김 텍스트
Beware smushed off-screen accessible text
네이버 접근성 가이드
