접근성 (a) 규칙 - 3

이미지

단지 이미지에 대체 텍스트를 추가하는 것이 아닙니다. 그 이상입니다.

장식적인 이미지

• 사용자가 맥락을 더 잘 이해할 수 있도록 이미지에 추가적인 맥락이나 정보(장식 이미지)가 추가되지 않는 경우 스크린 리더와 같은 보조 기술(AT)에서 숨겨야 합니다.

• AT에서 이미지를 숨기려면 다음 방법 중 하나를 사용하세요.

  • 빈 텍스트 또는 null 대체 텍스트(alt)
  • ARIA 적용
  • 이미지를 CSS 배경으로 추가

<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">

• 의심스러운 경우 이미지에 설명을 추가하세요.

비어 있거나 null 대체

• 이미지가 순전히 장식용이 아닌 이상 이미지 대체 속성을 ""로 설정하지 마세요.

Attribute	Example	Screen Reader Behavior	Use Case
alt="" (Empty)		Ignores the image completely	Decorative or non-informative images
Missing alt		May read the filename/URL	Not recommended; implies negligence

유익한 이미지

• 이미지가 개념, 아이디어 또는 감정을 전달하는 경우 이미지의 목적을 설명하는 프로그래밍 방식의 대체 텍스트를 포함해야 합니다.

• 가능한 경우 이미지에 대한 매우 자세한 설명을 추가하세요.

예:

<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting 
on the leaves of my prize rose bush.">

• 이미지가 (인라인)인 경우 role="img"를 추가하세요.

• 요소는 alt 속성을 지원하지 않으므로 대체 코딩 방법을 사용하여 설명을 제공하세요.

Method	Use Case	Pros	Cons