아티클

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

2018-10-02 14:35:46

 

안녕하세요, 엔비전스입니다. 
대체 텍스트 제공 시 기본 원칙 1부, 2부에서는 맥락에 따른 대체 텍스트 제공 방법과 백그라운드 이미지에서의 대체 텍스트 제공 등에 대해 예시와 함께 살펴보았습니다. 이번 3부 아티클이 마지막 아티클인데요, 기타 폼 이미지 버튼, 이미지 맵, 브랜드 로고 등의 대체 텍스트 적용 시 원칙에 대해 살펴보도록 하겠습니다.

문장부호

대체 텍스트는 최대한 간결하고 명확하게 제공해야 하지만 사진에 대한 내용을 설명하거나 상황에 따라 대체 텍스트 제공 시 기본 원칙 1부, 2부에서 다룬 예문과 같이 내용이 길어질 수 있습니다. 대체 텍스트는 항상 화면에 보이는 것은 아니기 때문에 문장부호 삽입에 대해서는 간과하기 쉽지만 스크린리더는 문장부호에 따라 글자를 끊어 읽기도 하고 설정에 따라 억양을 넣어서 조금 더 평소 피치보다 올려 읽거나 내려 읽기도 합니다. 따라서 대체 텍스트 제공 시에도 쉼표, 마침표, 물음표와 같은 적절한 문장부호 사용이 필요합니다.

Form image button

<input type="image">를 통하여 검색하기, 등록하기, 다운로드하기 등의 버튼을 구현하는 경우 이러한 요소를 form image button 이라고 합니다. 이러한 이미지를 포함하는 경우 해당 이미지에 대한 대체 텍스트가 반드시 삽입되어야 합니다. 그런데 이러한 버튼의 대체 텍스트는 되도록 다운로드, 등록, 검색과 같은 명사형보다는 동사형으로 제공하는 것이 조금 더 직관적입니다. 이는 form image button의 역할 자체가 하나의 액션일 뿐만 아니라 링크라는 요소와 함께 구현된 특정 목적지로 이동하는 레이블과 구분되도록 하기 위함입니다. 물론 우리나라에서는 명사형을 동사형으로 풀어쓸 경우 텍스트가 길어지는 경향이 있어 명사형으로 많이 구현하고 있으므로 명사형으로 제공했을 때 한 페이지에 비슷한 기능을 하는 링크가 있는 경우(예: 다운로드)에는 동사형으로 제공하도록 합니다.
EX: 대메뉴에 다운로드 링크가, 해당 메뉴 안에 포함된 각각의 자료에 다운로드 버튼이 있다면 대 메뉴 링크는 “다운로드”로, 각 다운로드 버튼에는 “다운로드하기”로 제공합니다.

이미지 맵

한 이미지에 여러 영역을 지정하여 링크로 연결하는 것을 이미지 맵이라고 하며 사이트맵에서 이러한 형태를 많이 볼 수 있습니다. 이미지 맵의 경우 사용되는 메인 이미지 역시 대체 텍스트가 삽입되어야 합니다. 메인 이미지 대체 텍스트는 하위 내용을 아우를 수 있는 대체 텍스트로 제공합니다. 예를 들어 임의의 이미지 맵이 서울시의 각 지역을 표시하고 있다면, 메인 이미지에 대한 대체 텍스트는 ‘서울시 지역 목록’ 정도가 될 것입니다. 만약 메인 이미지가 각 영역을 대표할 만한 특정 콘텐츠 없이 장식적으로만 사용되었다면 2부에서 설명한 바와 같이 백그라운드 이미지로 처리하여 alt=””로 삽입해도 무방합니다. 

CSS로 제공되는 부가정보

웹 기술에 발전으로 이미지 파일이 아닌 CSS로도 이미지 정보 구현이 가능하게 되었습니다. 그러나 이미지에 대한 대체 텍스트를 삽입하는 데는 많이 익숙해져 있으나 CSS로 표현된 정보에 대해서는 대체 텍스트를 포함하지 않는 경우가 많습니다. CSS로 표현된 내용 중 의미가 있는 내용(예: 글쓴이, 등록일 등)에 대해서는 스크린리더 사용자 역시 해당 의미를 파악할 수 있도록 적절한 대체 텍스트를 제공할 필요가 있습니다. 이러한 대체 텍스트는 sr-only와 같은 class를 사용하여 제공할 수 있으며 title 속성은 사용하지 않는 것이 좋습니다. Title 속성이 스크린리더와 호환되지 않는 이슈에 대해서는 추후 아티클로 다루도록 하겠습니다.

로고

일반적으로 로고는 해당 웹사이트의 홈페이지로 이동함을 의미합니다. WAI-ARIA에서는 이러한 로고가 표시되는 영역에 banner landmark를 마크업 하도록 권하고 있습니다. 따라서 해당 로고에 대한 대체 텍스트는 사이트 이름(예: 널리) 정도로 충분하며 널리 로고, 널리 홈으로 등과 같이 너무 자세하게 제공할 필요는 없습니다. 스크린리더 사용자는 링크 레이블과 함께 ‘banner landmark’라는 음성 안내도 함께 듣게 될 것이므로 홈페이지로 가는 링크임을 충분히 인지할 수 있습니다. 또한 대체 텍스트는 이미지가 가지고 있는 기능이 중요하므로 단순한 로고라는 설명은 적절하지 않습니다.

상품 설명, 차트와 같은 정보성 대체 텍스트

대체 텍스트를 이미지 자체에 제공하는 경우에는 원본의 정보를 테이블 형태로 제공해 주어야 하거나 설명이 너무 길어지는 경우 이미지 자체에 설명으로 제공하는 것은 적절하지 않습니다. 예전에는 longdesc 속성을 사용하여 스크린리더 사용자만 인지할 수 있는 특정 페이지를 제공하여 부가 정보를 설명하도록 권고하였습니다. 그러나 html5에서는 해당 속성을 지원하지 않고 스크린리더 역시 지원하지 않는 스크린리더가 많아 sr-only와 같은 class를 사용하여 스크린리더 사용자만 인지할 수 있는 형태의 정보를 제공하는 것이 적절합니다.

결론

지금까지 대체 텍스트 제공 시 가장 기본이 되는 원칙들에 대해 살펴보았습니다. 대체 텍스트 제공은 접근성에서 가장 기본이 되는 원칙임에도 불구하고 대체 텍스트를 아예 제공하지 않거나 혹은 잘못 제공하여 정보를 올바르게 습득하지 못하는 사례가 자주 있습니다. 본 아티클에서 가이드 하는 원칙을 따른다면 웹/앱을 사용하는 많은 장애인 사용자가 더욱 정확한 정보를 습득하고 기능 실행, 콘텐츠 파악 등을 수행할 수 있을 것입니다. 지금까지 3부에 걸쳐 서술한 원칙들을 간략하게 정리해 보았습니다.
  1. 대체 텍스트 접근성 적용은 가장 쉬운 기술인 동시에 가장 고민이 많이 필요한 부분이기도 합니다.
  2. 대체 텍스트는 이미지 자체에 삽입될 수도 있고 맥락에 따라 이미지 주위에 삽입될 수도 있습니다.
  3. 기본적으로 모든 이미지에는 대체 텍스트가 삽입되어야 합니다.
  4. 대체 텍스트는 콘텐츠와 그에 대한 기능을 함께 포함하고 있어야 하며 간결해야 합니다.
  5. 대체 텍스트는 본문의 텍스트와 중복되지 않아야 하며 ‘이미지’라는 말을 대체 텍스트 안에 삽입하지 않아야 합니다.
  6. 적절한 대체 텍스트는 이미지의 맥락에 따라 달라집니다.
  7. 링크와 같은 기능을 가진 이미지는 콘텐츠와 더불어 어떤 기능을 하는지 역시 대체 텍스트 안에 포함하고 있어야 합니다.
  8. 백그라운드 이미지는 이미지에 따라 대체 텍스트가 삽입되어야 하거나 혹은 스크린리더에서 숨길 수 있습니다.

 

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