적절한 대체 텍스트 제공

HTML 태그 내 적절한 대체 텍스트를 제공해야한다.

대체 텍스트를 제공하는 방법과 그 사유에 대한 내용을 알아보도록 하자.

 

---

 

이미지에 대한 설명

모종의 이유로 이미지를 불러오지 못하는 경우가 존재한다. 이러한 경우, 브라우저는 alternative 속성을 가지는 ' alt '의 내용을 대체 텍스트로 보여주게 된다. 스크린리더의 경우 해당 이미지의 ' alt ' 속성 내용을 읽어주기에, 반드시 작성해야 하는 속성이라 볼 수 있다.

<img src="shop.png" alt="2024년 10월 내내 전품목 최대 80% 할인 이벤트 진행중!">
<img src="sorry.png" alt="남성이 미안한 표정을 지은채 죄송함을 나타내는 이미지">

<img src="next.png" alt="다음 컨텐츠 보기">
<img src="prev.png" alt="이전 컨텐츠 보기">

 

 

데이터 차트나 복잡한 콘텐츠
데이터 차트나 복잡한 콘텐츠도 사용자가 해당 콘텐츠의 의미를 충분히 파악할 수 있도록 대체 텍스트를 제공해야 한다.

<img src="graph.png" alt="" />
<table class="blind">
    <caption>...</caption>
        <thead>
	 <tr>
	    <th scope="col">년도</th>
	    <th scope="col">학과</th>
	    <th scope="col">지원 수</th>
	</tr>
    </thead>
    <tbody>
       <tr>
           <td>2003</td>
           <td>언어학</td>
           <td>10200명</td>
       </tr>
     ...
    </tbody>
</table>

 

 

 

---

 

 

 

[ 출처 ]

BoostCourse 웹 UI 개발 : https://www.boostcourse.org/web344/lecture/35106