화면낭독기와 링크의 title 속성값

기존에는 센스리더를 포함한 PC 화면낭독기 대부분이 title 정보를 음성출력할 수 없는 상태에 있었습니다.
링크의 title 정보를 읽기 위해서는 (title 정보가 있는지 없는지 모른채) 기능키를 누르거나 설정을 바꿔서 링크텍스트와 title 중 하나를 선택해서 들어야 했습니다.
이런 이유로 대부분의 화면낭독기 사용자가 title 정보를 활용하지 않는 실정이었습니다.
덕분에 title 속성에 잘못된 정보, 중복된 정보들이 부적절하게 들어가 있더라도 사용자들에게 특별히 문제가 되지 않았습니다.

 

센스리더의 업데이트 4.0.0.0

최근(2014.07.07) 센스리더가 4.0.0.0으로 업데이트 되면서 링크의 title 속성값을 링크텍스트와 함께 음성출력하도록 기능이 변경되었습니다.

링크텍스트의 title 음성출력 형태

[링크텍스트] + [TITLE] + 링크
   ex) <a href="daum.net" title="애국가">mp3구매</a>
       : mp3구매 앵콜요청금지 링크

이제 센스리더가 title정보를 링크텍스트와 함께 조합해서 음성출력하기 때문에 사용자는 원하든 원치 않든 링크텍스트와 title 정보를 함께 들어야만 합니다.
예전에 title 정보가 어떤 형태로 제공되든 사용자에게 긍정적 혹은 부정적인 어떤 효과를 미치지 않았다고 한다면, 이제 앞으로는 제공된 title 정보가 사용자에게 그대로 전달되기 때문에 각별히 신경써서 제공해야 합니다.

iOS의 보이스오버는 이미 title 정보를 음성출력하고 있었고, 이제 PC의 센스리더가 지원을 시작하게 되어 title 정보의 중요성이 더 높아졌다고할 수 있습니다.

title 단독으로서의 의미도 중요하지만 앞으로는 링크텍스트와의 조화까지도 신경쓰면 더 높은 사용성을 기대할 수도 있게 되었습니다.

 

"보다 나은 도구를 선택한 사용자에게 보다 나은 사용자 경험을~"

 

titie 음성출력 테스트

# sample

<a href="0" title="집으로"></a>
<a href="1" title="mp3구매">mp3구매</a>
<a href="2" title="앵콜요청금지">뮤직비디오</a>
<a href="3" title="새창열기" target="_blank">네이버로</a>
<a href="4" target="_blank" >네이트로</a>

 

PC 테스트 결과

  Internet Explorer 8 비고
센스리더 4.0.0.0

집으로 링크
mp3구매 링크
뮤직비디오 앵콜요청금지 링크
네이버로 새창열기 새창 링크
네이트로 새창 링크

  • 집으로 : 링크텍스트가 없더라도 화면낭독기는 링크 요소를 인식하고 음성출력함
  • mp3구매 : 링크텍스트와 title 값이 동일한 경우 생략
  • 뮤직비디오 : 링크텍스트 뒤에 title값을 이어서 음성출력
  • 네이버로 : target 정보와 title 값을 모두 음성출력
  • 네이트로 : target를 이용한 새창알림
NVDA master-10205

집으로 링크
mp3구매 링크
뮤직비디오 링크
네이버로 링크
네이트로 링크

  • title 정보를 음성출력하지 않음
  • target 정보를 음성출력하지 않음

 

Mobile 테스트 결과

  Stock Browser 비고
iOS 7.1.2

집으로 링크
mp3구매 mp3구매 링크 ... mp3구매
뮤직비디오 앵콜요청금지 링크 ... 앵콜요청금지
네이버로 새창열기 링크 ... 새창열기
네이트로 링크

  • 링크텍스트가 없어도 링크를 인식하고 음성출력
  • title 정보가 링크텍스트와 동일해도 생략되지 않음
  • title 정보를 링크텍스트 뒤에 이어서 음성출력
    • "힌트말하기"가 켜져 있는 경우 예와 같이 title을 한 번 더 음성출력
  • target 정보는 음성출력하지 않음
Android 4.4.2

집으로
mp3구매
뮤직비디오
네이버로
네이트로

  • 요소 및 title 정보 등을 제외하고 단순히 링크텍스트만 음성출력

 

정리해보면…

중복된 title은 부가정보로

단순히 title 속성값을 그대로 음성출력하는 것이 아니라 링크텍스트와 title 속성값이 완전히 동일한 경우 아래 "mp3구매 링크"의 사례와 같이 title 정보를 음성출력하지 않습니다.

화면낭독기에서 중복정보를 생략하고 있지만 링크텍스트와 동일한 title은 중복정보제공으로 사용자에게 또 다른 불편을 줄 수 있습니다.

iOS의 보이스오버는 링크텍스트와 title 정보가 동일하더라도 생략하지 않습니다.
PC와 Mobile 모두를 고려해도 title 속성값은 링크텍스트와 동일하지 않게 부가정보 형태로 제공하는 것이 바람직합니다.

 

새창알림과 title

PC에서는 아래 "네이버로 링크", "네이트로 링크"와 같이 target="_blank"로 새창을 알리는 경우, 추가로 title로 새창 정보를 제공하게 되면 사용자는 중복으로 2개의 정보를 듣게 되므로, 앞으로는 target 속성을 사용한 경우 새창 정보를 title로 제공하지 않는 것이 바람직합니다.

Mobile에서는 아래 사례에서 보듯이 target에 대한 음성출력을 지원하지 않으므로 새창을 비롯한 부가정보를 전달해야할 경우 title을 속성을 사용해야 합니다.

 

공백링크의 정리필요

간혹 링크텍스트가 없는 공백링크가 페이지 일부영역에 남아있는 경우가 있는데, 이 링크가 화면에 표시되지 않더라도 아래 "집으로 링크"의 사례와 같이 PC/Mobile 화면낭독기 모두 링크요소를 인지하고 title 정보를 음성출력하고 있으므로 가능하다면 공백링크는 삭제하는 것이 바람직합니다. (title이 없는 경우 "링크"로 음성출력함)

추가) 지금까지 테스트해본 JAWS, NVDA, Voiceover, Talkback, 센스리더 모두 공백링크를 어떤 형태로든 음성출력하고 있습니다.

 

모바일에서 title

모바일에서 독특한 점은 iOS의 보이스오버는 title 정보를 적절히 활용하는 것으로 보이나 중복정보의 생략기능은 아직 구현하지 않은 것으로 보입니다.

의아하게도 Android 톡백이 title 정보는 물론 링크 요소라는 것조차 음성출력하지 않고 있어 웹페이지 지원이 매우 미미한 것으로 생각됩니다.

 

 

테스트 환경

PC
Windows 7 x86, Internet Explorer 8
센스리더 4.0.0.0
NVDA master-10205

Mobile
갤럭시노트3, 4.4.2, 스톡
아이폰5, 7.1.2, Safari

 

2014/07/15 00:12 2014/07/15 00:12
해빠 이 작성.

웹 접근성에 관심을 가지고 가장 처음 접하게 되는 정보 중 하나가 img의 alt 속성이다. 시각장애인은 이미지 정보를 눈으로 확인할 수 없기 때문에 이를 보완하기 위해 alt 속성을 사용하게 되고, 이것을 화면낭독기가 음성출력한다.

다들 알다시피 모든 이미지에 alt 속성값을 제공하는 것은 아니다. alt 속성의 제공에서 제외되는 것은 정보를 담지 않은 블릿, 선, 배경 등의 이미지다. 장식에 사용되는 이런 이미지에는 화면낭독기가 음성을 출력하지 않도록 alt=””과 같이 공백문자를 제공한다.

 

뭐가 문제냐면요…

일반 이미지에서는 alt 속성의 사용이 매우 명확하다. 하지만 링크에 사용된 이미지라면 어떨까?

<a href=”#go” ><img src=”abc.jpg” alt=”아름다운풍경”></a>
<a href=”#go”>아름다운 풍경</a>

이 경우 인접한 두 링크의 텍스트와 목적지가 같기 때문에 이미지링크는 alt=”” 공백처리를 하게 된다.

<a href=”#go” ><img src=”abc.jpg” alt=””></a>
<a href=”#go”>아름다운 풍경</a>

제작자의 의도와 다르게 화면낭독기는 링크 속 이미지는 공백문자로 처리하지 않는다. 센스리더와 죠스는 아래와 같이 파일명을 그대로 음성출력하고 있다.

센스리더 : 에이비시점제이피지 그래픽링크
죠스 : 경로명/에이비씨 링크 그래픽

이런 현상에 대해 화면낭독기 개발사 측의 입장은 이렇다.

사이트를 이용하다 보면 아직도 전반적으로 준수상태가 매우 낮고 대체텍스트가 누락되거나 심지어 사이트의 모든 이미지링크가 공백처리 된 경우도 있다. 화면낭독기가 링크의 이미지도 alt=””를 공백처리하게 되면 일부 사이트를 이용할 수 없는 문제가 있다.

처음 이런 설명을 듣는 경우 납득하지 못할 수도 있지만, 화면낭독기는 접근성을 준수하지 않은 사이트도 이용해야하는 장애인보조기기이므로 이 주장을 반박하기가 어렵다.

 

어떻게 해야하죠?

그렇다면 어떻게 보완할 수 있을까? 해결방법은 “한국형웹콘텐츠접근성지침 v2.1 검사항목 2.4.3 적절한 링크텍스트”에서 확인할 수 있다

1-3) 이미지 링크를 제공하는 경우: URL에 관한 정보를 제공하는 텍스트와 URL로 이동하는 이미지 링크는 하나의 링크로 구성하는 것이 바람직하다. 이 경우, 이미지 링크의 대체 텍스트는 공백 문자로 제공해야 한다.

지침에서 알려주는 대로 한번 적용해보자.

<a href=”#go” ><img src=”abc.jpg” alt=””>아름다운풍경</a>

이미지를 공백처리하고 텍스트와 하나의 링크로 만들면 아래와 같이 음성출력 한다.

센스리더 : 아름다운풍경 그래픽링크
죠스 : 아름다운풍경 링크

이미지와 텍스트 링크가 인접한 경우 이 방법으로 보완할 수는 있지만, 이것이 정답이라고 말할 수는 없다. 디자인이나 개발 등 여러 이유로 하나의 링크로 묶을 수 없는 경우도 많기 때문이다.

이 사례를 접할 때마다 “지침상의 의도와 이상적인 접근성 높은 웹”이, “화면낭독기가 접하는 접근성 낮은 현실의 웹”과 상충하고 있는 지금이 참 씁쓸하다.

 

추가로,

이 문제를 보완하는 여러 방법이 있겠지만, 이미지를 링크에 넣지 않고 링크 영역의 베경이미지로 사용하면 된다는 의견이 제시 되었지만, 어쨋든 이 경우에도 링크라는 요소가 인지되고 음성출력되기 때문에 추천하기는 어려울 것 같다.

 

테스트는…

Internet Explorer 8
센스리더 v3.2.2.0
죠스 한글판 v13

2014/06/06 18:49 2014/06/06 18:49
해빠 이 작성.