사용하기 적합한 경우

사용하기 적합하지 않은 경우

• 이미지 콘텐츠를 사용하는 목적에 대해 가장 먼저 정의한다.

  이미지를 활용하여 사용자에게 전달하고자 하는 것이 무엇인지를 명확하게 정의해야 이에 적합한 스타일의 이미지와 주제를 선택할 수 있다. 이미지는 항상 콘텐츠의 맥락에 맞게 사용해야 한다. 특히 이미지 자체가 링크나 버튼으로 사용되거나 링크, 버튼의 일부로 포함될 경우 링크, 버튼의 용도, 목적, 기능과 일치하는 이미지, 상징을 사용하는 것이 중요하다.

• 이미지에 텍스트를 합성할 때 스타일에 유의한다.

  이미지 위에 텍스트를 직접 합성하게 되면 해상도 문제로 인해 텍스트의 가독성이 저하될 수 있다. 텍스트에 그림자를 제공하거나 텍스트 영역에 별도의 배경을 적용하여 다양한 해상도에서 텍스트를 잘 읽을 수 있는지 테스트해야 한다. 가장 바람직한 방법은 배경 이미지와 텍스트를 구분하고 텍스트를 마크업으로 제공하는 것이다. 화면 크기가 변경되더라도 손실 없이 정보를 확인할 수 있으며 필요한 경우 사용자는 텍스트의 색상을 원하는 대로 조정할 수 있다.

• 이미지에 대체 텍스트 또는 설명을 제공한다.

  정보를 전달하는 목적의 이미지에는 alt 속성을 활용하여 대체 텍스트를 제공하거나 이미지 전·후에 설명을 제공해야 한다. alt 속성으로 제공된 대체 텍스트는 스크린 리더 사용자에게 음성 정보로 변환되어 전달된다. 또한 어떠한 문제로 인해 이미지가 표시되지 못하는 경우에 이미지의 자리에 시각적으로 표시되어 정보를 유추할 수 있게 도와주므로 매우 중요하다.
  이미지에 대체 텍스트 또는 설명을 제공하는 방법에 대해서는 접근성 체크리스트를 참조하면 된다.

• 사용자의 화면 크기, 접속 환경을 고려하여 이미지 계획을 수립한다.

  과도한 이미지 사용은 화면 로딩 속도를 증가시키고 사용자가 스크롤 동작을 반복하도록 하여 정보 탐색의 효율성을 저하시킨다. 이는 특히 화면의 뷰포트 영역이 제한적인 모바일 디바이스에서 더 심각한 문제를 야기할 수 있다. 화면 너비가 충분하지 않아 모바일 레이아웃으로 전환할 때에는, 이미지가 사용자에게 의미가 있는지를 판단하여 이미지를 제거하는 방안을 고려해야 한다. 그런 다음, 남은 이미지는 크기를 조정하거나 적절하게 크롭하여 화면에 최적화될 수 있도록 만든다.

• 장식용 이미지를 제외한 모든 이미지에 대체 텍스트를 제공한다.

  대체 텍스트는 이미지가 제공하는 정보를 구체적이고 정확하면서도 간결한 내용으로 제공해야 한다. 이때, 대체 텍스트에 다음 내용이 포함되지 않도록 유의한다.

  • 사진가 또는 이미지를 만든 사람의 정보
  • '이미지', '그래픽’과 같이 요소의 역할과 중복되는 텍스트
  • 이미지와 인접한 텍스트 설명과 동일한 설명
  • 이미지에 없는 추가적인 정보
  • KWCAG 2.2 적절한 대체 텍스트 제공
  • WCAG 2.1 Non-text Content (A)
• 가능한 한 이미지 텍스트를 사용하지 않는다.

  텍스트 정보를 이미지 형식으로 제공하게 되면 사용자가 해상도 손실 없이 텍스트를 확대/축소할 수 없으며 명도대비, 자간 동의 표현을 상황에 맞게 조정할 수 없게 된다. 저시력 사용자, 읽기 장애가 있는 사용자가 텍스트 정보의 표현 방식을 변경하여 콘텐츠를 인지할 수 있도록 심미적인 효과 또는 특정한 텍스트 표현이 필수적인 경우를 제외하고 이미지 텍스트를 사용하지 않아야 한다.

  • WCAG 2.1 Images of Text (AA)