검수 과정에서 자주 발생하는 질문을 모았어요!
자주 묻는 질문
배경 이미지(Background-image)는 alt 를 어떻게 하나요?
background-image, ::before, ::after 등 CSS로 삽입된 배경 이미지는 alt 속성을 제공할 수 없습니다.
alt 속성은 HTML의 img 요소에만 적용되므로,의미를 전달해야 하는 이미지는 CSS가 아닌 img 태그를 사용해 HTML 구조에 포함해야 합니다.
따라서,
장식 목적의 이미지는 CSS로 삽입해도 무방하며
의미·정보를 전달하는 이미지는 반드시 img 태그로 제공해야 합니다.
장식으로 사용된 그래픽형 이미지도 alt값을 작성해야되나요?
콘텐츠 흐름과 관련 없이 장식용으로 사용된 이미지는 alt 값을 사용하지 않습니다.
다만, 사진이나 일러스트처럼 시각적 정보나 분위기 정보를 제공하는 이미지는 아래와 같은 경우에만 그래픽 형으로 분류되어 alt 값을 제공해야 합니다.
이미지가 주변 맥락과 직접적으로 관련되어 해당 내용을 보완·부연 설명 하는 경우
이미지 자체가 웹 페이지 내 콘텐츠 일부로 사용되어, 이미지에 대한 설명 없이는 정보 전달이 불가능한 경우.
이처럼 이미지가 단순한 장식이 아니라 의미 전달에 기여하는 경우에만, alt 값을 통해 해당 시각 정보를 반드시 제공해야 합니다.
버튼 이미지에 글자가 포함되어있어도 기능형에 해당되나요?
앨리는 버튼 이미지에 글자가 포함된 경우, 아래 기준에 따라 정보형 이미지로 분류합니다.
이미지에 포함된 정보가 주변 맥락에 따라 변경되지 않는가?
텍스트 자체를 정보 전달의 핵심 요소로 판단하는가?
이러한 경우, 이미지가 특정 기능을 의미하고 있더라도,정보형 이미지의 alt 생성 원칙에 따라 이미지 속 텍스트를 손실 없이 제공해야합니다.
사진은 다 그래픽형 아닌가요?
사진이 사용된 맥락에 따라 그래픽형 / 정보형으로 달라질 수 있습니다.
예를 들어,
글자가 적힌 현수막을 들고 있는 사람들의 사진은
현수막의 문구 보다 행사에 참여한 사람들의 모습 이라는 시각적 맥락이 우선되므로, 그래픽형 이미지에 해당됩니다.
반대로, 제품의 영양 정보를 전달하기 위해 촬영된 사진은
제품의 외형보다 사진 속에 포함된 영양 정보 에 해당되는 글자가 핵심이므로 정보형 이미지에 해당됩니다.
이처럼 해당 사진이 어떤 정보를 전달하기 위해 사용되었는지를 기준으로 이미지 유형을 판단해야 합니다.
썸네일 이미지도 alt 값을 작성해야되나요?
썸네일 이미지는 원칙적으로 정보형 이미지에 해당합니다.
제목 뿐만 아니라 썸네일을 통해서도 게시글의 내용을 유추할 수 있기 때문입니다.
따라서 썸네일의 대체 텍스트(alt)는 다른 정보형 이미지와 동일하게, 이미지에서 시각적으로 확인할 수 있는 모든 텍스트 정보를 포함해 작성해야 합니다.
다만, 썸네일의 특성상
이미지가 매우 작거나
일부 텍스트가 잘려 실제로 식별이 어려운 경우
눈으로 인지 가능한 수준까지만 작성하고, 보이지 않는 정보는 생략해도 무방합니다.
이미지 분류가 애매할 때 우선 판단 기준은 무엇인가요?
아래 두 가지 기준을 우선적으로 고려해 판단할 수 있습니다.
시각 장애인이 해당 이미지를 통해 정보를 오류 없이 인지할 수 있는가?
해당 분류와 alt 제공 방식이 웹 접근성 인증 심사 기준에 부합하는가?
즉, 이미지 분류의 기준은 단순한 시각적 형태가 아니라접근성 사용자에게 정보가 정확히 전달되는지, 그리고 접근성 심사 기준을 충족하는지 여부를 중심으로 판단해야 합니다.
글자가 너무 많은데, alt 에 다 작성해야 되나요?
200~250자 이상의 텍스트를 포함한 이미지는 복합형으로 분류합니다.
복합형 이미지는 alt 에 이미지의 전체 내용을 간단하게 요약하고,
상세 설명(description)을 별도로 제공하여 스크린 리더 사용자가 전체 내용을 단계적으로 이해할 수 있도록 해야합니다.
상세 설명은 HTML 구조를 통해 제공해야 하며,이미지 요소에 aria-describedby 속성을 적용하여 설명이 작성된 HTML 요소와 id 값으로 연결할 수 있습니다.