[HTML] 웹 접근성 - 스크린리더

웹 접근성 관련 참고자료

• 👉 W3C 페이지
• 👉 널리 (체험 및 교육)

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>