글자가 포함된 사진의 경우 보통 <img> 의 alt 속성에 대체 글자를 적어 리더기가 읽을 수 있도록 작성합니다.
허나 반응형으로 사용하기 편한 배경 속성으로 사용하면 리더기에서 읽을 수 없습니다. 또한 section 마다 리더기의 목차로 쓰일 heading 요소를 리더기에서만 보이고 싶을 때 스타일로 보이지 않도록 설정할 때가 있는데 이때, display:none 이나 font-size: 0 left: -9999px 같은 속성들은 실제 리더기에서 읽지 않습니다.
그래서 웹 리더기를 고려한다면 다음과 같은 코드를 사용해야합니다.
1. 배경 속성 사용 최소화
배경 속성으로 사용하면 중앙배치나 반응형 조절하기에 편하지만 리더기에서 대체해서 읽을 수가 없습니다. 그래서 1차적으로 리더기에 전달이 필요한 이미지는 <img> 태그의 alt 속성으로 대체 설명을 넣어줍니다.
2. 배경 설명글 숨기기
이미 배경으로 마크업된 경우 해당 요소에 텍스트를 추가하고 보이지 않도록 스타일을 수정해야합니다. 대부분의 리더기는 페이지에서 보이지 않으면 안읽기 때문에 보통 숨기는 속성과 다르게 사용해야합니다.
CSS clip을 사용하기
overflow: hidden;
position: absolute;
border: 0;
width: 1px;
height: 1px;
clip: rect(1px, 1px, 1px, 1px);clip속성은 지정된 부분만 보이는 속성입니다.rect()값을 통해 좌표를 지정합니다.position속성값이absolute또는fixed일 때만clip이 적용됩니다.rect(<top>, <right>, <bottom>, <left>)
top에서 bottom까지 left에서 right까지 영역이 지정됩니다.
- 사이즈가 0일 경우 리더기가 읽지 않기 때문에 너비와 높이를 1px 지정합니다.
3. 시간 표기하기
리더기가 날짜나 시간을 인지해서 읽기 위해서는 <time> 요소를 사용해야 합니다. 시간으로 리더기가 인지하지 못하면 각각 숫자를 아라비아 숫자로 읽게 됩니다.
- 예제
<p>
행사는 <time>22년 11월 11일 수요일 11:30 </time> 에 진행됩니다.
</p>웹 리더기 마다
<time>을 사용하여도 읽는 방식이 다르기 때문에 가장 좋은 방법은 단위까지 적어주는게 정확합니다.
참조
프라다 신은 빈지노와 쿠페를 타는 꿈을 꿨다.