본문 바로가기

UIUX퍼블리셔/Html \ Css \ Jquery

id를 활용한 이동을 위한 편법

http://njpaiks.egloos.com/980499


스크린 리더의 일부 기능이 현재의 웹 접근 기법을 제대로 소화하지 못하고 있어서 이상과 현실 사이에 커다란 불편을 주고 있다.
그 중 대표적인 것이 id를 이용한 페이지 내의 이동 방법이다. 
웹 표준에 따라 접근 기법을 표현하였지만 스크린 리더가 이를 구현하지 못하니....
이러한 고민을 디비딥 조훈 님이 해결해 주셨다.

즉 <div id="contents"> 가 아닌 <div id="contents">< a name="contents"> 를 사용하면 가능하다는 것이었다.

테스트 방법 및 결과
<div id="contents">
- 웹 브라우저 포커스 이동: ○ (가능)
- 센스리더 포커스 이동: × (불가)
- CSS 접근: ○ (가능)

<a name="contents"></a>
웹 브라우저 포커스 이동: ○ (가능)
- 센스리더 포커스 이동: ○ (가능)
- CSS 접근: × (불가)

<div id="contents"><a name="contents">
- 웹 브라우저 포커스 이동: ○ (가능)
- 센스리더 포커스 이동: ○ (가능)
- CSS 접근: ○ (가능)

<a name="contents"></a><div id="contents">
- 웹 브라우저 포커스 이동: ○ (가능)
- 센스리더 포커스 이동: ○ (가능)
- CSS 접근: ○ (가능)

<a name="skipNav"></a><div id="contents">
- 웹 브라우저 포커스 이동: ○ (가능)
- 센스리더 포커스 이동: ○ (가능)
- CSS 접근: ○ (가능)

현재 버전의 센스리더를 이용하는 전맹의 시각장애인에게 스킵 네비게이션을 제공하기 위해선
div id="contents" a name="contents" 코드를 이용하는 방법을 추천한다.

- a name="contents" 코드만으로는 웹 콘텐츠를 그루핑(grouping)하고 스타일을 부여할 수 없음. 
- div id="contents" a name="contents" 코드와 a name="contents" div id="contents" 코드의 결과는 같음. 

이론과 현실 사이에서

항상 이론과 현실 사이에는 격차가 있다. 특히 항상 새로운 것을 추구해 나가는 WEB의 경우 현재 실현 가능한 보조공학 기술과의 격차는 어쩔수 없는 상황이다. 해당 보조 공학 기술이 언제 업데이트 될지 알수 없고, 해당 신 기술을 사용하지 않을 수는 없는 상황이다. 스크린 리더 사용자는 왜 이 기능을 넣었지 아니 왜 이렇게 작업을 하였지 라고 의문을 갖게 되고, 저작한 분들은 왜 이것을 수용하지 못하지라고 생각하게 되어 영원한 평행선을 걷게 된다.
위와 같은 경우 때문에 WCAG1.0이나 KWCAG1.0에서는 W3C의 기술과 지침을 준수하고, 새로운 기술을 사용할 때에는 그것이 새 기술을 지원하지 않는 환경에서도 정보를 보전하면서 잘 표시될 수 있도록 해야 한다고 권고하고 있다.
이 부분에 관한 문제는 콘텐츠를 제공하는 사람에게 논란의 소지가 있다. 우리는 표준을 지켰는데, 다른 일도 많은데, 왜 우리가 그것을 해야 하는냐? 
그러나 웹에서 시각장애인은 분명히 약자일 수 앆에 없다. 이 부분은 현재 콘테츠를 만드는 저작자들이 이러한 부분을 고려하여 현 상황에서 모든 이에게 접근 가능한 방법을 고안하여야 할 것으로 생각된다. 
다시 한번 이러한 방법이 있다고 알려주고, 각종 소스를 제공해 준 조훈 님께 감사를 드립니다.