img 태그 alt="" 의 대하여

홍요한·2020년 5월 28일
0

접근성

목록 보기
1/2

퍼블리셔로 취준을 준비하는 중에는 접근성에대해 전혀 고려하지 않았다.
하지만, 실제 회사에선 접근성사이트가 아니어도 접근성을 항상 고려하며 작업하고있었다.

오늘은 img 태그의 alt="" 속성이 어떻게 쓰이는지에 대해 간단한 코드로 기록하려한다.

alt값을 써주어야 하는 상황

먼저 alt는 스크린리더기로 사용자에게 해당 이미지에대한 설명을 해주기 위해 작성한다.

그래서 alt에는 해당 이미지의 내용이 전부 들어가야 한다.

슬라이드 이미지에는
"한국인들이 좋아하는 주전부리. 간식! 100원이면 아이스크림을 충분히 즐길 수 있던 그때가 그립다. 누구나 저렴한 가격으로 좋아하는 간식을 즐길 수 있는 공간"
이라는 텍스트가 있는데 이 부분을 전부 alt 값에 넣어주어야 한다.

<img src="images/bg_main_slide_pc.jpg"
	 alt="한국인들이 좋아하는 주전부리. 
         간식! 100원이면 아이스크림을 충분히 즐길 수 있던 그때가 그립다.
 	 누구나 저렴한 가격으로 좋아하는 간식을 즐길 수 있는 공간">

처럼 넣는다.

반대로 alt값을 넣지 않아도 될 상황

alt값을 구지 넣지 않아도 되는 상황에선 넣지 않는다. alt=""빈값으로 처리 하거나 넣지않는다.

위 코드에서는 alt값이 빈값으로 처리되있는 걸 볼 수 있다.
만약 위 코드에서 alt값을 넣었다면, 국민간식 가맹점 문의라는 글자가 두번 읽혔을 것이다.
사용자 입장에서 생각했을 때, 한번만 읽혀도 되는 문장이 두번 읽힌다면 이상할 것이다.

결론

장애인분들이 사용할 사용자를 생각하며 작업을 해야한다.

0개의 댓글