[TIL] alt의 이해
공부를 하다가 문득 alt에 대한 궁금증이 생겼다.
alt에 대해 알아보자.
What is ‘alt’?🐾
alt에 대한 의문
코드를 짜다보면 언제나 이미지가 들어가기 마련이다.
정말 단순한 경우를 빼면….?
특히나 요즘같은 미디어 시대에는 이미지가 필수불가결한 요소라고 볼 수 있다.
이미지를 사용할 때는 언제나 우린 ‘img’ 태그를 쓴다.
<img class="fit-picture"
src="/media/cc0-images/grapefruit-slice-332-332.jpg"
alt="Grapefruit slice atop a pile of other slices">
주로 이런 형태임을 확인할 수 있다!
그런데 언젠가부터 img 태그를 쓸때마다 저 alt가 신경이 쓰였다.
쟤는 대체 뭐하는 애길래 항상 붙어있지….?
보통 alt 태그에는 주로 이미지에 대한 설명이나, 제목 등이 들어간다.
alt 태그는 주로 img 태그가 렌더링되지 못할 때 나타날 문자열을 지정하기 위한 값이다.
이것이 필요한 경우는 주로 아래와 같다.
- 그림의 링크가 죽었거나, 속도가 느려서 그림의 정보만 문자열로 나타내줄 때
- 텍스트 전용 웹 브라우저를 사용할 때
- 수많은 검색엔진들은 그림에 대한 정보를 alt를 통해 읽어낸다.
- 시각장애인들을 위해 내용을 목소리로 변환해주는 기술을 사용할 때
이중에서도 특히나 4번의 경우가 가장 중요하다.
우리나라는 장애인들과 비장애인들의 격차를 줄이기 노력하고 있는 나라 중 하나고,
그 격차를 줄이기 위한 가이드 중 하나가 바로 alt 태그의 올바른 사용이다.
하기 링크로 들어가면 더 자세한 가이드가 나와있으니 참고하길…
웹 접근성 실무가이드
코딩이 사용자들의 편의를 위한 도구라는 것을 생각해보면,
alt 태그의 생활화가 되어있는 것이 당연한 수순이다.
나도 앞으로 놓치지 않고 올바르게 쓰도록 노력해야겠다.