모두가 이용할 수 있는 웹사이트 만들기 | Notion

이미지는 alt 속성에 설명을 넣는다

img 태그의 alt 속성에 해당 이미지의 설명을 넣는다.
```
<img src="house-shape.png" alt="홈으로">
```

의미 없는, 또는 읽을 필요 없는 이미지에도 공백의 alt 속성이 필요하다

불릿이나 배경 이미지 등
alt 속성이 없다면 스크린 리더가 src 속성에 담긴 파일명을 읽게 된다. 따라서 alt에 공백임을 명시하고 스크린 리더가 읽지 않게 한다.
```
<img src="shopping-cart.png" alt="">
장바구니에 담기
```

숨겨진 요소에 설명 넣기

이미지의 설명이 길거나, 웹페이지에 나타낼 단어들의 카테고리를 알릴 때 class 속성을 사용하여 숨겨진 설명을 넣을 수 있다. 다만 이 태그는 웹페이지에 나타나면 안 되므로 css 속성을 이용하여 요소를 감춘다.

다음은 class=”sr-only” 라고 지정된 요소를 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;
    }

aria-label 속성으로 설명 넣기


  <div class="page-buttons">
    <button aria-label="이전 페이지로">◀</button>
    <button aria-label="1번째 페이지로 (현재 페이지)" class="current">1</button>
    <button aria-label="2번째 페이지로">2</button>
    <button aria-label="3번째 페이지로">3</button>
    <button aria-label="4번째 페이지로">4</button>
    <button aria-label="5번째 페이지로">5</button>
    <button aria-label="다음 페이지로">▶</button>
  </div>

aria-hidden 속성과 role 속성

이모지나 SVG 요소 등을 스크린 리더에게만 감추고 싶다면 aria-hidden 속성을 true로 설정한다.
혹은 스크린 리더가 특정 텍스트로 읽도록 하려면 role 속성으로 이미지임을 명시하고

aria-label 속성에 값을 넣는다.
```
<span aria-hidden="true">😀</span> 반갑습니다!
```
```
 <span role="img" aria-label="love">❤️</span>
```

figure과 figcaption 태그

이미지에 긴 설명을 넣거나(img 요소의 alt 요소는 비운다) 아스키 아트 등 다른 종류의 미디어에 설명을 붙일 때

이들을 <figure> 에 넣고, 그 안에 나란히 <figcaption> 을 사용하여 설명을 넣는 방식도 널리 사용된다.