[HTML] 웹 접근성

✔️ 접근성이란?

• 웹 사이트,도구, 기술이 장애를 가진 사용자들이 사용할 수 있도록 설계 및 개발된 것을 말합니다.
• 또한, 일시적인 장애, 상황적 제약, 연로한 사람, 스마트 워치 등의 디바이스를 사용하는 사람에게도 이점을 줍니다.

 

📌 이미지의 alt 속성

<img src=".png" alt="~~한 사진">

• 이미지가 보이지 않는 사용자들을 위해 alt 속성에 설명을 넣어줘야합니다.
• 또는, 이미지가 로드되지 않을 시 대체 텍스트로 사용될 수 있습니다.
• alt 속성이 없으면 src 값을 읽기 때문에 의미 없는 또는 읽을 필요 없는 이미지에도 공백으로 alt 속성을 꼭 넣어줘야합니다.

 

📌 sr-only

.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;
}

• sr-only는 스크린 리더만을 위한 요소로 화면에서는 숨겨지지만 스크린 리더에 의해 읽혀집니다.
• 설명을 위한 부분을 class="sr-only"를 사용해 클래스를 지정하고 css로 화면에서 숨겨줍니다.

 

📌 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>

• alt 속성과 같이 해당 요소가 어떤 것을 의미하는지 알려주고 웹에 정보를 전달하기 위해 사용합니다.

 

📌 aria-hidden과 role

  <div class="example">
    <span aria-hidden="true">😀</span> 반갑습니다!
  </div>
  <div class="example">
    I <span role="img" aria-label="love">❤️</span> CODING!
  </div>

• aria-hidden 속성은 읽을 필요 없는 요소를 스크린 리더에게 감추기 위해 사용합니다.
• role 속성은 특정 정보를 나타내는 요소를 스크린 리더가 임의의 텍스트로 읽도록 정보의 형태를 명시합니다.

 

📌 <figure> 와 <figcaption>

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="">
    <figcaption>An elephant at sunset</figcaption>
</figure>

• 이미지에 긴 설명을 넣거나 다른 종류의 미디어에 설명을 붙일 때 사용합니다. (이 때 alt는 공백으로 해줍니다)
• <figure> 안에 요소를 넣고 <figcaption>을 사용하여 설명하는 방식을 사용합니다.
• <figcaption> 태그는 sr-only 클래스를 지정하여 화면에서 숨깁니다.

 

📄 참고

https://www.yalco.kr/

https://nuli.navercorp.com/

https://developer.mozilla.org/