lezhin / accessibility

모두를 위한 설계. 레진 웹 접근성 가이드라인.

Home Page:https://github.com/lezhin/accessibility/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

대체 텍스트 관련

silver0r opened this issue · comments

안녕하세요. 작성하신 웹 접근성 가이드라인 중
대체 텍스트 관련해서 애매모호한 문제에 대해 작성해봅니다.

  1. 의미를 전달하고 있는 이미지에 대해 텍스트를 제공한다. 항목에서
  • 대체 텍스트는 중복으로 제공하지 않는다. 의 기준으로

<a href="/">
<img src="lezhin.png" alt> 레진엔터테인먼트
</a>

해당 부분이 옳바르다고 표현하신 것같은데 lezhin.png 이미지 자체가 의미를 전달하고 있는 이미지라면
제 생각에는 아래와 같은 방식이 맞지 않나 생각이 됩니다.

<a href="/">
<img src="lezhin.png" alt="레진엔터테인먼트" />
</a>

<img src="lezhin.png" alt>
위의 경우엔 의미가 있는 이미지임에도 불구하고 alt값이 비어있는 형태라면 접근성에 위배된다고 개인적으로 생각이 되네요.

때에 따라 이미지 외 대체텍스트를 추가로 제공해야 하는 디자인일 경우엔 이미지 태그를 사용하지 않고 background image를 통해 이미지를 표시하고 텍스트를 제공하는 방향으로 감이 더 좋은 접근성 제공 방법이지 않을까 조심스럽게 제안해봅니다.

의견 보내주셔서 감사합니다.
WCAG 에서는 이미지에 대체 텍스트를 제공하는 방법으로 alt 속성만 한정하여 설명하고 있지 않습니다.

WCAG 2.0 테크닉 문서에 보면 아래와 같은 예시를 적절한 것으로 설명하고 있습니다.
이런 방식도 가능하다는 것을 보여주는 사례로 사용된 예제입니다.

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H2
<a href="products.html">
<img src="icon.gif" alt="">
Products page
</a>

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H30
<a href="routes.html">
<img src="topo.gif" alt="" />
Current routes at Boulders Climbing Gym
</a>

말씀하신대로 배경 이미지 사용 후 전경에 대체 텍스트를 적용하는 것도 적절한 사례 중 하나입니다.
가장 좋은 사례 하나만을 제시하는 것 보다는, 다양한 사례를 제시함으로써 풍부한 표현을 가능하게 하는 것이 좋다고 생각합니다.