[대체텍스트] (alt, sr-only) - 일반

1. alt 값은 의미있는 이미지에만 달려야한다. (의미 없는 이미지는 공백으로 둘것! alt="" ). 이미지가 어떤 정보를 전달할때에만  alt 값 추가!!! 

참고(의미있는 이미지): https://www.kisti.re.kr/intro/introduce/pageView/14?t=1578924235277

참고(의미없는 이미지):  https://www.kisti.re.kr/research/pageView/425?t=1578924447741

예를들어, 이렇게 꾸밈요소로만 이미지가 쓰이는 경우는 alt값 공백으로 둬야한다.

 

 

 

 

2.  이미지 속에 텍스트가 많을 경우 ir기법으로 따로 빼서 대체텍스트를 작성하도록 한다.

참고: https://www.kisti.re.kr/notifications/post/notice/4316?cPage=4&t=1578924677533

 

<img alt="자세한 내용은 아래에 있습니다.">

<div class="sr-only">

   대체텍스트가 들어갑니다. 

</div>

 

 .sr-only {display: block; font-size: 0;text-indent: -999px; overflow: hidden;}

* 부트스트랩 사용시 css따로 추가 없이 sr-only클래스 추가하면됨