1. 이슈 개요

• 이슈환경 : 아이패드, 아이폰ios7, 아이폰ios8, 안드로이드2.3이하, 안드로이드4.2이상
• 이슈 : voiceover, talkback실행 환경에서 line-height, text-indent ir기법을 사용하였을때 링크가 틀어지거나 포커스가 안가는 현상이 나타난다.
• 연구과제 : 모든 기기(ios6,ios7,ios8,안드로이드2.3,안드로이드4.2이상)환경에서 voiceover, talkback시 정상적인 링크영역, 포커스, 음성지원이 되어야 한다.

2. HTML구조 이해

• 전체적인 구조
• 클릭영역을 구성하는 a태그는 기기의 넓이에 따라 유동적으로 변화함으로 따로 넓이를 지정하지 않고 height만 지정하였습니다.
• 글자이미지가 나오는 부분은 em태그를 이용하여 이미지에 따라 크기를 지정하고 text-align:center를 사용해 가운데 정렬을 하였습니다.

3. 테스트 진행

↓ 아래 이미지를 클릭하시면 확대하여 보실 수 있습니다~

3. 테스트시 주의사항

■ 모바일 IR기법시 권장단위
(참고- http://darum.daum.net/convention/css/css_grammar)

상대적인 단위인 em을 사용 시 보다 유동적인 환경으로 접근성을 구현할 수 있지만, 브라우저 간의 디자인 요소(간격의 오차)를 고려하는 경우에는 제약이 많다.
이에 다른 단위보다는 PC에서는 브라우저 호환성을 위해 px단위의 사용을 권장한다.
단, 모바일과 같이 유동적인 레이아웃을 구현하기 위해서는 상대단위(em,%)를 권장하고 있는데,
아이폰4(IOS 4)의 보이스오버 기능과 관련하여 다음과 같은 IR기법 이슈가 있으니 주의하여한 한다. (IOS 5제외)

• iOS 4에서는 IR기법 사용 시 text-indent의 단위에 따라 보이스오버 기능과 관련된 퍼포먼스 이슈가 발생한다.
• iOS 4에서 em단위는 px단위에 비해 6배~10배 까지 성능이 하락하며, in단위는 15배~24배까지 성능이 하락한다.(px단위의 지연시간을 0.1이라고 설정했을 때)

모바일웹에서 IR기법을 사용 시, text-indent의 단위는 모두 PX로 사용하는 것이 권장된다.
모바일로 PC엡에 접속할 경우를 대비한다면 PC웹에서의 IR에도 PX단위를 사용하는것을 권장된다.

■ 안드로이드 진저브레드(v2.3)에서의 접근성
(참고- http://goo.gl/ABGDh (15쪽 참고))

안드로이드 진저브레드에서 제공하는 접근성 서비스는 제조사의 기기에 따라 선택적으로 적용이 되어있기 때문에 접근성 활성화 시 먼저 설치여부를 확인하는 것이 필요함
갤럭시S II 이후 버전부터는 TalkBack 서비스가 기본으로 포함되어 있음

갤럭시S II이전 버전에서는 talkback기능을 실행시키기 위해서 따로 앱스토어에서 어플리케이션을 받아 실행시켜야 한다.

3. 테스트 결론

• 15가지 스타일 테스트결과 7, 11, 14, 15번의 경우가 모든기기에서 완벽하진 않지만 링크선택, 포커스, 보이스오버 기능이 정상작동 했습니다.
  그러나 11번 경우는 span태그를 추가해야 한다는 번거로움과 7, 11번의 경우는 대체텍스트의 영역의 길이가 길어서 영역넘침현상이 나타났으므로
  글자영역만큼만 포커스 되는 14, 15번의 경우가 모든면에서 다 충족할 수 있는 방법인 것 같습니다.
• a태그에 링크 영역이 잡히는 안드로이드와 달리 ios에서 텍스트영역에만 링크와 포커스가 잡히므로 font-size:0이나 line-height, text-indent를 이용한 IR기법은 ios에서 정상작동하지 않습니다.
• color:transparent나 z-index:-1를 이용해 숨김처리 할때 ios에서는 텍스트영역만큼 포커스가 잡히므로 대체텍스트가 길어질경우 자신의 영역을 넘어가기 때문에
  letter-spacing나 font-size를 이용해 텍스트영역의 넓이를 줄여 맞추어 줍니다.
  (주의:대체텍스트 길이가 짧을경우 letter-spacing을 많이 주면 포커스가 이상하게 잡힐 경우가 있다.)
• 기기대부분 voiceover, talkback에서 한글자음을 읽어줄때 제대로 읽지 못하는 이슈가 있다.