WebAIM에서 디자이너를 위한 웹접근성(Web Accessibility for Designers) 인포 그래픽을 공개하였습니다. WebAIM 자료이다보니 내용도 무척 훌륭합니다. 디자이너가 고려해야 하는 웹접근성 항목들을 잘 분류하여 보여주고 있습니다. 상세한 내용은 삐돌이님께서 번역해 주셨습니다.

인포 그래픽은 '그림'이기 때문에 어떻게 대체 텍스트나 HTML 구조를 작성했는지 궁금해졌습니다. 보통은 longdesc 속성을 떠올리겠지만 WebAIM에서는 조금 다른 방법으로 제공하고 있었습니다. 원문 사이트에 가보면 인포 그래픽과 텍스트 버전을 같이 제공하고 있습니다. 그러면서 인포 그래픽 이미지의 대체 텍스트로는 이미지 아래에 텍스트 버전이 있다(Web Accessibility for Designers infographic with text description below)는 것을 알려주는 정도로 제공하고 있습니다.

<p><img src="media/designers.png" alt="Web Accessibility for Designers infographic with text description below" width="650" height="1682" /></p>

마지막 부분에서는 이 인포그래픽을 다른 페이지에 게제할 수 있도록 예제 코드를 제공하고 있는데 이 예제 코드에는 텍스트 버전은 제공하고 있지 않고 이미지만 제공하게 되어 있습니다. 대신에 이미지의 대체 텍스트가 다른데 링크된 페이지에 텍스트 버전을 제공하고 있다(Web Accessibility for Designers infographic with link to text version at WebAIM.org)는 것을 알려주고 있습니다.

<a href="http://webaim.org/resources/designers/"><img src="http://webaim.org/resources/designers/media/designers.png" alt="Web Accessibility for Designers infographic with link to text version at WebAIM.org" width="650" height="1682" /></a>

중복되는 정보 없이 텍스트 정보의 위치를 대체 텍스트로 표시해주는 가장 현실적이고 효과적인 방법이라고 생각됩니다. 대부분의 경우에는 이러한 정도의 대체 텍스트 제공으로 충분하겠지만 이 방법은 이미지와 대체 텍스트의 관계를 기계적으로 판단(programmatically determinable) 할 수 있는 방법이 없기 때문에 최고안은 아니라고 생각됩니다.

ARIA 속성을 이용해서 이러한 단점을 보완할 수 있습니다. aria-describedby 속성을 이용하면 이렇게 서로 떨어져있는 요소들을 기계적으로 판단할 수 있게 연결시킬 수 있습니다. 아직 ARIA가 지원되는 기기가 많지 않아서 실효성은 떨어지지만 기계적인 판단 가능성은 접근성 뿐만 아니라 다른 분야에서도 유용하게 적용될 수 있는 부분이기 때문에 주의깊게 살펴볼 필요가 있습니다.