웹/HTML
[HTML] 웹 접근성 - 스크린리더
Judith Hopps
2023. 1. 7. 16:04
반응형
웹 접근성 관련 참고자료
1. 이미지는 alt 속성에 설명을 넣을 것
- 의미 없어도 alt = ""(공백)으로 처리
- alt가 없으면 스크린리더가 src의 링크를 읽음
2. css에 설명 넣기 (화면상에 보이지 않게)
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
3. aria-label로 설명 넣기
- 예시) <button aria-label="이전 페이지로">◀</button>
4. aria-hidden 속성과 role 속성
- <span aria-hidden="true"> : 스크린 리더가 읽지 않음
- <span role="img" aria-label="love"> : 특정 정보를 나타내는 이모지나 SVG 요소 등을 스크린 리더가 특정 텍스트로 읽도록 하려면 role 속성으로 이미지임을 명시하고 aria-label 속성에 값을 넣습니다.
5. figure과 figcaption 태그
- img의 설명이 너무 길다면
<figure>
<img src="./sr-only.png" alt="">
<figcaption class="sr-only">
노트북으로 뭔가 공부하고 있는 아이의 독백: 코딩을 배우면 아마 굶지는 않을거랬어.
</figcaption>
</figure>
반응형