1. <img>
html 문서에 이미지를 삽입하는 태그
src 속성은 필수로 입력해줘야 하고, alt 속성은 필수는 아니지만 접근성 차원에서 매우 유용하므로 필수에 준한다.
1.1. src, alt 속성
src는 포함하고자 하는 이미지의 경로를 입력한다.
alt는 이미지를 설명하는 텍스트 설명을 입력한다.
alt의 경우 스크린리더가 alt의 값을 읽어 사용자에게 이미지를 설명한다.
네트워크 오류, 컨텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우 alt의 값을 대신 보여준다.
1.2. alt에 써야 하는 것
해당 이미지의 존재 이유에 따라 다르다.
alt는 이미지 콘텐츠를 간단하고 명료하게 설명해야 하지만, 이미지의 존재 여부나 이미지 파일의 이름을 나타내서는 안 된다.
꾸밈 요소인 경우
컨텐츠에 관련이 없는 단순 꾸밈 용도인 경우 배경 이미지 css를 사용하는 것이 좋지만 html을 써야 한다면 비어 있는 상태로 둔다.
스크린리더가 굳이 이미지의 설명을 읽게 할 필요가 없는 경우이다.
컨텐츠 내용인 경우
이미지가 중요한 정보를 제공한다면 간단한 내용을 alt에 작성한다.
혹은 메인 텍스트에 동일한 정보를 제공해도 된다. 이 때, alt에 중복된 내용을 적지는 않는다.
이미지를 메인 텍스트가 충분히 설명하고 있다면 alt에 굳이 내용을 작성할 필요는 없다.
링크인 경우
<a> 태그 안에 이미지가 있는 경우 <a> 요소 안에 접근 가능한 링크 텍스트를 넣으면 된다.
이미지의 alt 안에 넣을 수도 있다.
텍스트인 경우
로고, 슬로건, 차트의 레이블, 또는 스캔된 문서의 텍스트 등 이미지 자체가 텍스트 정보를 담고 있다면 텍스트 내용을 그대로 alt에 작성한다.
*이미지가 표현해야 할 의미가 있다면 html로, 장식이라면 css로 작성해야 한다.
1.3. 너비와 높이
이미지를 위한 공간이 얼마나 필요한지 알려주기 위해 width와 height를 이용해 너비와 높이를 지정할 수 있다.
이미지가 다운로드되었을 때 브라우저가 주변 컨텐츠를 옮길 필요가 없게 하기 위해서이다.
이 때, 이미지의 크기를 조절하기 위해 사용해서는 안 된다.
이미지가 왜곡되어 보이기 쉽고, 이미지를 다운로드하는 데 많은 대역폭이 사용될 위험이 있기 때문이다.
작은 이미지가 필요하다면 처음부터 작은 이미지를 요청해야 한다.
1.4. 이미지에 주석 달기
<figure>와 <figcaption>을 활용해 <img>에 주석을 달 수 있다.
겉보기에는 <div>로 감싸고 <img>와 <p>로 주석을 단 것과 동일해 보이지만, 이 방법은 좀 더 시맨틱하다.
코드 예시
<figure>
<img src="..." alt="..."/>
<figcaption>
주석 내용...
</figcaption>
</figure>alt와 figures은 다른 역할을 제공한다.
figures는 이미지를 볼 수 있는 사람들에게도 도움이 되는 정보, alt는 이미지가 없을 때의 정보를 제공한다.
이미지가 없으면 figures와 alt 모두 나타나기 때문에 이 둘이 완전히 동일한 정보를 말하는 건 피하는 게 좋다.
figures의 다양한 활용처는 다음과 같다.
이미지의 의미를 간략하고 이해하기 쉬운 방식으로 표현
페이지의 선형 흐름에서 여러 곳에 배치 가능
본문을 지원하는 필수적인 정보 제공
여러 이미지, 코드 스니펫, 오디오, 비디오, 방정식, 표 등에 활용할 수 있다.