이글은 국산 스크린 리더 프로그램인 센스리더의 문제점을 진단하고, 향후 프로그램을 업데이트할 때 개선사항에 반영할 수 있도록 해결 방법을 제시하는 목적으로 제작됐음.
| 코드 | 웹 브라우저 포커스 이동 | 센스리더 포커스 이동 | CSS 접근 |
|---|---|---|---|
<div id="contents"> |
○ (가능) | × (불가) | ○ (가능) |
<a name="contents"></a> |
○ (가능) | ○ (가능) | × (불가) |
<div id="contents"><a name="contents"></a> |
○ (가능) | ○ (가능) | ○ (가능) |
<a name="contents"></a><div id="contents"> |
○ (가능) | ○ (가능) | ○ (가능) |
<a name="skipNav"></a><div id="contents"> |
○ (가능) | ○ (가능) | ○ (가능) |
현재 버전의 센스리더를 이용하는 전맹의 시각장애인에게 스킵 네비게이션을 제공하기 위해선 <div id="contents"><a name="contents"></a> 코드를 이용하는 방법을 추천한다.
신현석님이 센스리더가 HTML 표준을 지원하지 않는 문제점을 스크린리더가 지원하지 않는 HTML 표준이라는 글에서 소개하고 있습니다.
HTML 4.01 - 7.5.2 Element identifiers: the id and class attributes
페이지 내에서 이동하는데 사용되는 링크는 크게 두가지 방법으로 이용됩니다. 가장 많이 사용되는 방법은 이동하고자 하는 부분에 <a> 태그를 추가하고 그 태그에 name 속성을 지정하는 방법입니다. 이렇게 만들어진 <a> 태그는 다른 곳에서 <a href="#name">과 같이 접근할 수 있습니다. 현재 스크린리더는 이 방법을 지원하고 있습니다.
또 다른 방법은 id를 이용하는 방법입니다. 위의 방법 처럼 <a> 태그를 추가하는 것이 아니라 이동하고자 하는 부분에 있는 HTML태그에 id를 부여하고 링크를 <a href="#id">와 같이 사용하는 것입니다. CSS를 이용해서 웹페이지를 제작할 경우 id와 class를 많이 사용하게 되는데 이때 사용한 id를 링크나 스크립팅에도 같이 사용하는 효율적인 방법입니다. 현재 이러한 방식의 링크는 브라우저에서는 잘 지원을 하고 있지만 스크린리더는 지원을 하고 있지 않습니다.