개념
IR (Image Replacement) 기법은
이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 말한다
웹 접근성의 일환으로,
그림을 보는 데에 장애가 있어 리더기를 통해 웹 문서에 접근할 때에 필수적이다
웹 접근성이란?
어떠한 사용자가 어떠한 기술환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것이다
즉, 모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것을 말한다
IR 기법에는 다음과 같은 경우가 있다
태그의 alt 속성 값으로 표현하기에 대체 텍스트가 너무 길 때
- CSS background 속성을 사용하여 처리한 의미 있는 이미지 일 때 마크업으로 대체 텍스트 제공
-
배경 이미지로 처리한 의미 있는 아이콘, 로고
광고배너같은 경우 데이터가 계속 변하기 때문에 서버에서 이미지를 내려줌. 이런 경우에만 img를 사용
이외의 고정된 이미지들은 여러개를 모아서 한장의 이미지로 만든 다음 CSS로 배경처리를 함.
ex) 네이버 로그인 버튼
여러가지 버튼 이미지들이 모여서 한장의 이미지로 되어있음.
이를 sprite 이미지라고 부른다
작은 이미지를 여러개 불러오는것보다 큰 이미지를 하나 불러오는게 속도가 훨씬 빠르기 때문에 sprite 이미지라는 방식을 사용한다. -
대체 텍스트가 너무 긴 경우
보이지 않던 텍스트들이 CSS를 모두 지우니까 나타남
이미지의 alt값으로 처리하기엔 그 내용이 너무 길고 복잡
그렇기 떄문에 IR 기법을 사용해서 대체 텍스트를 제공
전체가 이미지로 되어있는 이벤트 페이지의 경우 IR 기법 많이 사용
IR 기법 (요소 숨김 처리)
1. img 태그의 alt 속성 값으로 표현하기에 대체 텍스트가 너무 길 때
다음 그림을 보자
위와 같이 img 태그 alt 속성 내에 작성하기에 텍스트가 너무 길 경우에,
텍스트 태그를 따로 분리하고, visually_hidden 클래스를 css로 숨김 처리한다
(blind 클래스명은 공격적일 수 있다고 한다)
더불어 IR 대체 텍스트를 작성할 때, 시멘틱 구조를 생각하고 작성해야 한다
그래야 리더기가 알맞게 읽어주기 때문.
2. CSS background 속성을 사용하여 처리한 의미 있는 이미지 일 때 마크업으로 대체 텍스트 제공
다음 그림을 보자
위와 같은 이미지를 css background 속성으로 처리하였을 때,
우리는 해당 이미지의 대체 텍스트들을 마크업 해주어야한다
a 태그를 제외한 태그들에 visually_hidden 클래스를 적용시켜 숨김 처리한다
a 태그는 따로 위치를 조정하여 *포인트가 부족하다면? / 신청하기 버튼에 적용시킨다
visually_hidden code
.visually_hidden1 {
/* 스크린 리더가 읽을 수 있도록 */
height: 1px;
width: 1px;
/* 레이아웃에 영향을 끼치지 않도록 */
position: absolute;
/* 이하 눈에 보이는 부분을 제거 */
overflow: hidden;
/* 네개의 좌표로 지정한 직사각형 모양대로 요소를 잘라내는 속성.
포토샵의 mask 효과와 같다고 한다.
position 속성 값이 absolute 혹은 fixed인 요소여야하고,
만약 overflow 속성 값이 visible일 경우에는 적용이 되지 않는다. */
clip: rect(1px 1px 1px 1px);
/* clip:rect(0 0 0 0);
margin 값 -1로 할 경우, 순서가 꼬일 수 있다 */
margin: 0;
/* + clip-path: inset(50%);
+ white-space: nowrap; */
}
.visually_hidden2 {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}position, width, height, margin으로 옮기고 줄인다음
clip으로 0으로 잘라버니리까 보이지 않게 됨
clip이 overflow:visible일 경우에 적용되지 않으므로 overflow:hidden넣음. 마치 리셋해주는것이라고 생각
top과 left에 각각 -1px를 넣어주지 않고 margin:-1px를 사용하는 이유?
position:absolute는 top과 left, bottom이런값들을 지정해주지 않으면 원래 있던 자리에 있게 됨.
만약 top과 left에 -1로 넣어주게 되면 relative 부모가 어디에 있느냐에 따라서 그 부모 위치를 쫓아가게 된다.
그러면 text_indent로 처리한것처럼 요소 크기가 커지게됨
그래서 원래 위치 기준으로 이동하도록 margin으로 처리
clip속성
clip:rect(top right bottom left);(0,0)을 기준으로 해서 4개의 좌표로 지정한 모양대로 요소를 잘라내는 속성
포토샵의 마스크를 씌우는것과 유사한 효과
- position값이 absolute, fixed로 띄워져 있는 경우에만 사용가능
- overflow속성이 visible일때는 적용되지 않음
- default:auto
CSS는 클래스로 정의해서 사용하는것이 좋다.
전체 웹페이지에는 숨김 처리가 필요한 요소들이 굉장히 많아서 요소들이 갖고 있는 클래스를 다 선택해서 css를 적어주기 보다는
그냥 숨김이 필요한 요소에게 하나의 공통된 클래스를 부여해서 처리를 해주는게 훨씬 편리하다.
다음은 잘못된 코드이다
1. 스크린 리더가 인식하지 못하는 속성값
/* 투명도를 0으로 주는 것과 동일하게 화면에서 사라지지만, 스크린 리더 인식 안함 */
visibility: hidden;
/* 요소가 아예 없는 것으로 인식 */
display: none;
/* 요소의 사이즈를 0으로 만들면 스크린 리더 인식 안함 */
width: 0;
height: 0;
font-size: 0;
line-height: 0;2. 스크린 리더는 인식하지만, 레이아웃이나 성능 등에 이슈 발생 가능
/* 투명해진 것 뿐, 위치를 그대로 잡고 있기 때문에 단독으로 사용 불가능 */
opacity: 0;
/* 전체 레이어의 크기가 지나치게 크게 잡힘: 성능 이슈
100%로 처리하여 성능 이슈는 피할 수 있다 */
text-indent: -9999px;
/* position 속성 추가해야 함: 성능 이슈 */
z-index: -1;
