아티클

대체 텍스트 적용 시 기본 원칙 2부

2018-06-26 11:45:31

 안녕하세요, 엔비전스입니다.

‘대체 텍스트 적용 시 기본 원칙 1부’에서는 기본적인 규칙과 내용만 포함한 이미지, 링크와 같은 기능을 포함한 이미지에 대체 텍스트를 삽입하는 방법에 대해 살펴보았습니다.
이번 아티클에서는 그림 설명, 아이콘으로 된 대체 텍스트 삽입, 의미 없는 이미지를 숨겨야 하는 상황에 대해 살펴보도록 하겠습니다.

그림을 설명해야 할 때 

다음 이미지 및 예문을 살펴봅시다.


“이 그림에서, 예술가 EmanuelLeutze는 작품을 만들기 위해 빛, 색, 형태, 투시, 비율, 그리고 움직임을 사용했습니다.”

다음 중 위의 이미지에 대한 대체 텍스트가 가장 적절하게 제공된 것을 선택해 보세요.
  1. “조지 워싱턴”
  2. 조지 워싱턴 그림
  3. 델라웨어 강을 건너는 조지 워싱턴 그림
  4. 작품을 만들기 위해 빛과 색을 사용하는 것을 보여 주는 고전적인 그림.
  5. 델라웨어 강을 건너는 조지 워싱턴의 그림. 위풍당당한 조지 워싱턴이 폭풍으로부터 앞을 내다보고 경계하는 군대를 전투로 인도하면서 강을 가로질러 밝은 빛으로 빛나는 배를 둘러싸고 있다.
위의 이미지는 링크와 같은 기능을 가진 이미지는 아니지만 그림을 포함하고 있어 어떻게 대체 텍스트를 제공해야 할지 고민이 될 수 있습니다. 사실 위에서 제시하는 이미지에 대한 대체 텍스트의 정답이 있지는 않습니다. 그러나 중요한 것은 대체 텍스트는 앞뒤 맥락에 따라 다르게 제공될 수 있다는 것입니다. 옵션을 하나씩 살펴보겠습니다.
1번은 위의 그림과 예문으로 비추어볼 때 맥락상 적절하지 않습니다. 반드시 조지 워싱턴임을 말하기 위한 그림은 아니기 때문입니다. 2번은 조지 워싱턴 그림이라는 측면에서 이미지에 대한 기본적인 설명은 충분했다고 할 수 있으나 설명이 너무 빈약합니다. 3번은 비교적 적절한 설명입니다. 4번은 만약 해당 그림을 게시한 목적이 그림 자체가 아닌 예술적인 기법에 대해 알려주려고 한 것이라면 맥락상 적절한 대체 텍스트라고 할 수 있습니다. 5번은 그림에 대한 설명이 자세하기는 하지만 너무 길고 장황합니다. 이미지에 대한 설명은 최대한 간결한 것이 좋으며 5번과 같은 설명은 이미지 자체보다는 웹페이지에 텍스트로 묘사하는 것이 더 적절할 수 있습니다.

아이콘으로 기능을 표시한 경우

다음 대체 텍스트 중 적절한 대체 텍스트를 보기에서 선택해 보세요.


<a href="http://www.nps.gov/wamo/gw/president.htm" class="noicon"><img src="media/next.gif" alt="예시 이미지" class="center" width="19" height="19"></a>
“조지 워싱턴의 대통령직에 대해 알아보려면 다음 페이지로 계속 이동하세요.”
  1. 다음
  2. 다음 페이지
  3. 조지 워싱턴 대통령직
  4. 조지 워싱턴 대통령직으로 이동
위의 이미지 자체만 본다면 모든 옵션이 다 정답이 될 수 있습니다. 그러나 앞에서 설명한 바와 같이 대체 텍스트는 맥락에 따라 다르게 삽입되어야 하기에 1, 2번 정도가 적당합니다. 다음 혹은 다음 페이지는 사용자에게 여러 페이지가 있음을 암시해 줍니다. 3번은 링크의 기능적인 설명으로는 적절하지만 다음 페이지로 간다는 정보를 주지 못합니다. 4번은 기능과 목적지를 함께 설명하고 있다는 측면에서 1, 2번의 설명 보다 더 적절하다고 할 수 있습니다.

다음 예를 보도록 하겠습니다.
“입사 지원 신청서 다운로드”
 

<a href="media/generic_link.htm"> 입사 지원 신청서 다운로드 <img src="media/pdf.gif" alt="예시 이미지" class="center" width="32" height="31"></a>
  1. 입사 지원 신청서
  2. Pdf 파일
  3. Pdf 아이콘
  4. 이미지에 대한 설명이 이미 있으므로 스크린리더에서 인식하지 않도록 처리
위의 소스코드를 보면 이미지가 링크 안에 포함되어 있습니다. 만약 맥락상 이미지가 링크와 분리되어 있었다면 대체 텍스트 역시 달라졌을 것입니다. 해당 이미지는 텍스트 정보 이외에 pdf 자료라는 추가 정보를 가지고 있기 때문에 이미지 자체를 스크린리더에서 숨기는 것은 적절하지 않습니다. 1번은 링크 텍스트와 설명이 중복되므로 적절하지 않습니다. 2번이 가장 적절한 선택지입니다. 물론 더 간결하게 pdf만으로도 설명이 충분할 수 있으며 링크 텍스트에서 기능적인 설명(다운로드)가 포함되어 있으므로 대체 텍스트에는 해당 설명은 생략하는 것이 좋습니다. 3번은 이미지 자체를 설명했다는 측면에서는 적절할 수 있지만 맥락상으로 볼 때는 다운로드 링크 안에 있는 이미지를 설명한다는 측면에서 적절하지 않습니다. 만약 해당 이미지가 아이콘임을 강조해야 하는 맥락에서는 적절할 수 있습니다.
예를 들어 위의 예에서 링크 텍스트 없이 링크에 이미지만 있다고 가정해 봅시다. 이 경우에는 내용과 기능을 대체 텍스트에 포함하여 ‘입사 지원서 pdf 다운로드’와 같이 대체 텍스트를 삽입해야 합니다. 만약 이때 ‘pdf 파일’이라고만 삽입하면 구체적인 의미를 이해하기 어려우며 여러 pdf 다운로드 링크가 있을 경우 스크린리더 사용자는 탭 키를 누를 때마다 ‘pdf 파일’ 메시지만 여러 번 듣게 될 것입니다.

이미지를 스크린리더에서 숨겨야 할 때

이미지가 단순 디자인으로 사용된 경우 스크린리더에서 해당 이미지를 숨기는 것이 좋습니다. 의미 없는 이미지까지 탐색되면 오히려 스크린리더로의 내비게이션이 비효율적입니다. 이미지를 숨겨야 하는 상황 예시를 살펴보기 전에 각 플랫폼에서 이미지를 숨기는 방법을 잠깐 살펴보겠습니다.
  1. Html: img 태그에 alt=””(alt 값을 삽입하지 않습니다). 혹은 CSS에서 백그라운드 이미지를 사용할 수도 있습니다.
  2. 안드로이드: ImageView에 ContentDescription을 삽입하지 않습니다. 안드로이드는 ImageView의 경우에는 ContentDescription 선언 자체가 없으면 해당 이미지에 포커스 되지 않습니다.
  3. iOS: UIView, UIControl, UIImageView 객체와 이러한 객체에서 파생된 커스텀 컨트롤은 안드로이드의 ImageView와 같이 기본적으로 accessibilityALbel 속성을 추가하지 않더라도 보이스오버가 포커스 되지 않습니다. 
당연한 이야기이지만 이미지가 링크나 버튼과 같은 기능을 가진 경우이고 콘텐츠 설명이 이미지로만 되어 있다면 이미지를 숨길 수 없습니다.

그럼 다음 예를 살펴봅시다.
“본론 콘텐츠입니다.”


“결론 콘텐츠입니다.”
  1. 장식을 표현한 라인
  2. 결론 시작 지점
  3. 분리 선
  4. 스크린리더에서 숨기기
위의 이미지는 본문과 푸터를 분리하는 라인의 역할을 하는 장식적 이미지이며 링크와 같은 기능 또한 가지고 있지 않습니다. 따라서 4번 보기가 가장 적절합니다.

다음 예를 살펴봅시다.


“우리의 사업은 당신이 지구상에서 찾을 수 있는 최고의 서비스를 보장합니다. 우리 팀은 계약 협상 과정 전반에 걸쳐 우수한 고객 서비스를 제공할 수 있도록 전문적으로 훈련받았습니다.
고객 만족이 저희의 최우선 사항이며, 필요시 고객님의 돈을 환불해 드립니다.”
  1. 악수
  2. 기업가들이 계약 체결을 위해 악수하고 있음.
  3. 이미지를 스크린리더에서 숨기기
  4. 우리는 우리의 전문적인 서비스를 보장합니다.
위의 예에서는 이미지 자체가 내용을 담고 있지만 이 내용이 예문과 관계가 있는지 확인해야 합니다. 위의 악수하는 모습을 담고 있는 이미지는 내용을 담고 있다기보다는 단순한 감정적 분위기를 나타내고 있기 때문에 1번과 2번은 적절하지 않다고 할 수 있습니다. 많은 경우에 적절한 대체 텍스트를 결정하기 위해 "내가 이 이미지를 사용할 수 없다면, 대체 텍스트에 무엇을 넣을까?"라는 질문을 할 수 있습니다.
위의 예에서는 악수 사진을 텍스트로 대체할 가능성이 없으므로 스크린리더에서 이미지를 숨기는 것이 적절합니다.

 

 

 

댓글 0
댓글을 작성하려면 해주세요.