널리

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

대체텍스트 제작기법 1부에서는 중복된 대체텍스트 처리, 장식용 이미지 처리, SVG 파일에 대체텍스트 삽입, inline으로 SVG가 들어가 있을 경우의 대체텍스트 적용방법 등에 대해 살펴보았습니다. 이번 아티클에서는 설문결과와 같은 복잡한 그래프가 SVG로 만들어진 경우에 스크린리더가 접근 가능하도록 설정하는 방법과 1부에서 다룬 내용 중 스크린리더 이슈로 인해 참고해야 할 사항을 설명합니다.
Note : 그래프 등의 긴 대체텍스트가 필요한 경우 png와 같은 이미지 파일보다 SVG로 제작하여 접근성 코드를 적용하는 것이 각각의 정보가 line by line으로 구분되어 표시된다는 측면에서 접근이 더 용이합니다.

SVG로 파일 내보내기

Adobe Illustrator와 같은 프로그램에서 제작한 그래프를 SVG로 내보닐 때

1. 스크린리더에서는 소스코드 순서대로 정보를 출력하기 때문에 SVG로 변환된 각각의 레이어(<g>)가 소스코드 상으로 위에서 아래로 접근되도록 해야 합니다.
2. 변환된 SVG에 접근성 코드를 적용해야 하므로 SVGOMG와 같은 SVG 최적화 툴을 이용하여 prettify 코드뷰로 SVG를 최적화시킵니다.
   
   

SVG에 접근성 코드 편집하기

1. 그래프에 추가된 텍스트에 불필요한 span태그가 많이 적용되 있을수 있습니다. 글자와 글자 사이에 스팬태그가 있으면 스크린리더가 각 글자를 띄어서 음성출력하므로 불필요한 span 태그는 제거해야 합니다.
   나쁜 예: <span>n</span> <span>u</span> <span>l</span> <span>i</span>
   
2. 대체텍스트 제작기법1부에서 다루었듯이 SVG 첫머리에 해당 그래프의 제목과 부연설명을 title, desc 속성으로 추가하고 각각에 id를 부여하여 aria-labelledby, aria-describedby로 연결합니다. 만약 <text> 태그로 제목 혹은 부연설명 정보가 있다면 해당 id를 aria-labelledby, 혹은 aria-describedby로 연결하면 됩니다.
3. 그래프 SVG는 여러 데이터의 결과값이 <text> 태그 안에 표시되며 스크린리더에서 각각의 <text> 안의 정보를 읽어줍니다. 따라서 svg의 데이터값 전체가 하나의 그룹에 속해 있음을 알려주기 위하여 role=”group”을 함께 추가합니다.
4. SVG에 포함된 텍스트가 가진 의미에 해당하는 semantic role을 추가해줍니다. 예를 들어 각각의 데이터값이 html에서의 <ul>, <li> 태그에 해당한다면 <g>(레이어)에 role=”list”, role=”listitem” 속성을 추가할수 있습니다.
   예 : <g id="bars" role="list" aria-label="막대그래프" transform="translate(0,58)"> <g id="SenseReader" role="listitem"> …
5. 각각의 <g>태그 안의 <rect>, <line>와 같은 태그 정보는 스크린리더에서 전혀 인식할 필요가 없는 정보들입니다. 따라서 각각의 태그를 role=”presentation”을 적용하여 인식하지 않도록 합니다.
   
   

기타 스크린리더 이슈

2017년 5월 현재, Inline SVG 안에 링크가 포함되는 경우에는 대부분의 스크린리더에서 <title>과 aria-labelledby, <desc>와 aria-describedby로 마크업한 SVG 요소를 제대로 읽지 못합니다. 따라서 링크가 포함된 SVG에는 대체텍스트 정보를 다음과 같은 방법으로 제공하도록 합니다.

1. SVG 태그는 aria-hidden=”true”로 스크린리더에서 인식되지 않도록 합니다.
2. SVG 태그 바깥에 스크린리더에서만 인식할수 있는 css(예: .sr-only)를 이용하여 텍스트를 제공합니다.