대체텍스트 제작기법 1부
안녕하세요, 엔비전스입니다.
정보를 가진 이미지에 대체텍스트를 제공하는 것은 접근성에서 가장 기본이 되는 지침 중 하나입니다. 그런데 요즘에는 단순히 이미지를 html에 추가하는 것뿐 아니라 html 내부에 svg 코드를 추가하여 이미지를 생성하는 등의 기법을 사용하는 경우도 종종 있습니다. 따라서 대체텍스트 제작기법에 대한 방법을 정리할 필요성이 있다고 판단되어 이 아티클을 준비하게 되었습니다. 이 글에서는 각각의 상황별로 대체텍스트를 어떤 방식으로 추가해야 하는지에 대해 살펴보도록 하겠습니다.
기본 원칙
- Jpg, png와 같은 이미지가 단순한 장식용으로 사용된 경우에는 대체텍스트를 부여할 필요 없이 alt=”” 로 대체할수 있습니다. 이렇게 하면 스크린리더는 해당 이미지를 음성출력하지 않게 됩니다. 그러나 링크와 같이 클릭할수 있는 이미지 요소에는 이 방법을 사용할수 없습니다.
이미지 주위에 그 이미지에 대한 설명을 텍스트로 충분히 제공하고 있다고 판단되는 경우에는 대체텍스트를 중복해서 사용할 필요가 없으며 이 때에도 alt=”” 로 생략할수 있습니다.
예:
<figure> <img src=”hamburger.jpg” alt=””> <figcaption>큰 햄버거를 들고 있는 모습</figcaption> </figure> </pre>
figcaption으로 이미지에 대한 설명을 제공해 준다 하더라도 제공하는 설명문이 대체텍스트에 대한 부연설명인 경우에는 위의 예와 달리 alt 값을 추가해 주어야 합니다.
예:
<figure> <img src=”hamburger.jpg” alt=”큰 햄버거를 들고 있는 모습”> <figcaption>햄버거는 예전에는 서양인들이 즐겨 먹었지만 요즘은 누구나 좋아하는 음식이다.</figcaption> </figure>
SVG 이미지에 대체텍스트를 추가하는 경우
- svg가 이미지 소스로 사용된 경우에는 jpg, png와 같은 이미지 대체텍스트를 추가하는 것과 같은 방법을 사용합니다. 다만 최신 브라우저를 사용하지 않는 경우 브라우저 접근성 api에서 해당 요소를 이미지로 인식하지 못할수 있으므로 role=”img” 속성을 추가해줍니다. Role=”img”가 중요한 이유
- 스크린리더마다 읽어주는데 약간의 차이는 있으나 이미지 콘텐츠는 대체텍스트와 함께 ‘그래픽’ 혹은 ‘이미지’ 등으로 음성출력합니다. 따라서 스크린리더 사용자는 각각의 콘텐츠가 이미지에 대체설명이 붙은 것인지 아니면 일반 텍스트인지를 구분할수 있습니다. 또한 다음 혹은 이전 이미지 단위로 이동하는 단축키도 제공합니다. 그리하여 스크린리더에게 svg 콘텐츠 역시 이미지임을 알려줄 필요가 있는 것입니다.
Html 내부에 svg 태그를 삽입하여 이미지를 생성하는 경우에는 위의 방법으로 대체텍스트를 추가할수 없으므로 a. Svg 가장 상위 태그에 title, desc 태그로 설명을 덧붙입니다. title에는 기본적인 설명을, desc에는 부연설명이 있을 경우 추가하면 됩니다. b. W3C에서는 이렇게만 해도 접근성에 문제가 없는 것으로 명시를 하고 있지만 아직 브라우저의 접근성 api에서 위의 방법대로만 처리할경우 스크린리더에게 정보를 제대로 전달해주지 못하는 문제가 있어 추가적으로 title에 aria-labelledby를, desc에 aria-describedby 속성을 추가합니다. 예:
<svg version="1" id="cat" viewBox="0 0 720 800" aria-labelledby="catTitle” aria-describedby=”catDesc" role="img"> <title id="catTitle">친근한 고양이</title> <desc id="catDesc">회색고양이가 주인에게 안겨 있는 모습</desc> … </svg>
object 혹은 iframe에 svg 파일을 추가하는 경우에는 자식 img 태그에 svg를 대체할수 있는 이미지를 추가하고 이에 대한 대체텍스트를 추가합니다. 또한 object와 같이 액션을 가지고 있는 객체인 경우에는 tabindex=”0” 속성을 추가합니다. 예:
<object type="image/svg+xml" data="/path-to-the-svg/filename.svg" width="50%" tabindex="0"> <img src="Fallback_image.jpg" alt="대체텍스트"> </object>
- html에 포함된 SVG로 의미 있는 아이콘 링크를 표현한 경우 링크에 대한 정보를 aria-label로 추가해줍니다. 다만 svg로 아이콘을 표시하고 추가정보를 나타내는 텍스트가 화면상에서도 표시되는 경우에는 aria-label 대신 스크린리더용 텍스트를 span에 추가하고 화면에서는 숨기는 기법을 사용해야 합니다. 이는 대부분의 스크린리더에서 aria-label 속성으로 정보를 표시하면 링크에 원래 부여된 텍스트는 읽지 않기 때문입니다. 또한 링크와 같이 키보드 포커스가 가능한 객체의 svg 코드는 aria-hidden으로 스크린리더에서 인식되지 않도록 해줍니다. 예:
<a href="http://example.com" id="cart"> <span id="itemsInCart">8개</span> <span class="offscreen-text">장바구니</span> <svg aria-hidden="true"> … </svg> </a>
지금까지 대체텍스트를 추가하는 가장 기본적인 기법에 대해 살펴보았습니다. 2부에서는 복잡한 그래프 svg의 콘텐츠를 어떻게 스크린리더 사용자도 쉽게 접근할수 있도록 할수 있을까에 대해서 알아보겠습니다. 아울러 대체텍스트에 대한 여러 가지 기타 이슈에 대해서 살펴보도록 하겠습니다.