접근성을 위한 섹션 바로가기 만들기(a 태그 북마크 기능 활용하여 접근성 높이기) 2009/12/29 21:29
원하는 섹션으로 가려면 페이지를 다 읽어야 하나요? 시간이 너무 아까워요..
웹표준과 웹접근성을 잘 지원하여 만든 사이트가 있습니다. 만약 그 사이트를 스크린리더기로 읽는다면 아래 그림과 같은 순서로 읽어 나갈 것 입니다. 사이트 이미지는 다음을 예로 들었습니다. 마크업 순서는 헤더, LNB, 컨텐츠 영역, RNB, 푸터 순이라고 가정했습니다.
아마도 스크린 리더기는 위의 페이지를 로고가 있는 부분부터 읽어나갈 것 입니다. 그리고 번호가 붙은 순서대로 읽어나가 푸터가 있는 부분까지 차례로 읽어나갈 것 입니다.
이 부분에서 우리가 시각장애인의 웹접근성에 대해서 생각해 볼 것이 있습니다. 만약 스크린리더를 사용하는 한 유저가 있다고 가정합시다. 그 유저는 위의 사이트에서 9번 섹션에 있는 영화 컨텐츠를 주로 이용한다고 가정하겠습니다. 그러면 이 부분에서 접근성 저해 문제가 발생합니다.
이유는 이렇습니다. 9번 섹션을 이용하기 위해서 해당 유저는 매번 페이지를 1번 부터 읽어와야 하는 불편함이 생기기 때문입니다. 유저에게 상당한 시간 낭비일 수 있습니다. 그러면 이 문제를 해결하여 스크린리더를 사용하는 유저가 사이트에 접근하자마자 바로 원하는 섹션으로 접근하는 방법은 없을까요?
다행히도 간단하게 위의 접근성 문제를 해결할 수 있습니다.
스크린리더를 이용하는 유저, 원하는 섹션으로 바로 이동시키기
일단 각 섹션별로 ID값을 지정해줍니다. 이 ID네임을 이용하여 북마킹 기능을 활용할 것 입니다.
각 섹션별 모듈에 해당하는 div에 id값을 다음과 같이 주면됩니다.
위에 있는 다음(daum.net)의 예처럼 하시면 편리할 것 입니다. 각 섹션별로 id 값을 지정해줍니다.
그리고 페이지의 가장 상단에 다음과 같은 코드를 넣어줍니다. 페이지의 이름을 알 수 있는 헤드라인 태그 바로 아래에 오면 최적일 것 같습니다.
다음(daum.net)의 메인페이지 문서 구조입니다. 웹페이지 최상단에 h1 태그로 사이트의 이름을 지정해 주었습니다. 그리고 그 아래에 간단한 유틸리티와 캠페인 영역을 지나면 '목차'라는 부분이 있음을 알 수 있습니다. 이것이 바로 시각장애인을 배려한 웹접근성 향상 방법중에 하나입니다.
메인페이지의 각 섹션으로 바로 이동할 수 있는 기능을 제공합니다. 이 기능을 제공함으로서 사이트를 이용하는 시각장애인(스크린리더 이용자)들은 웹페이지 전체를 일일이 읽으면서 시간낭비를 할 필요가 없어졌습니다. 바로바로 원하는 섹션으로 이동할 수 있게 되었기 때문이죠. 각 섹션으로 이동시키는 방법은 a 태그의 북마크 기능을 이용합니다. 코드는 다음과 같습니다.
a 태그의 rel 속성은 'bookmark'로 해주고, href에는 각 섹션에서 지정한 #id 값을 입력해줍니다. 간단하죠?
섹션 바로 가기 링크는 어떻게 감추죠?
자, 그럼 여기서 의문점이 하나 생기는데요. 편의를 위한 서비스 제공은 좋지만 CSS를 적용한 실제 서비스에 위의 목차를 감추려면 어떻게 해야할까요? 얼핏 생각하기로 다음과 같이 하면 될 것 같은데 말이죠. 음..
자, 시각장애인을 위해 만든 목차를 CSS를 적용한 실서비스에서 감추기 위해 위처럼 하면 될까요?
정답은 위의 예제처럼 하면 '안된다' 입니다. display: none; 을 이용하면 일부 스크린리더기가 이를 읽지 못합니다. 그래서 이를 보완하기 위한 방법이 필요하게 되었습니다. display: none; 처럼 컨텐츠를 완전히 감추어 버리는 것이 아니라, 실제로는 컨텐츠를 존재하게 만들면서 디자인상으로만 보이지 않게 하는 방법 말이죠.
'다음'의 경우에 이렇게 되어있는데. 좋은 방법이라고 생각됩니다. 목차 div의 너비와 높이를 0으로 만들고 넘어가는 컨텐츠는 overflow: hidden으로 감추는 것이죠. 그리고 2중으로 visibility: hidden까지 자물쇠를 채워 눈에 안띄게 하였고 3중으로 position: absolute에 top: -10000px까지 주어 목차를 안드로메다로 날려버렸습니다. 그러나 dispaly: none처럼 아예 사라진 것이 아니기 때문에 스크린리더기에서도 잘 읽힙니다.
웹접근성 향상을 위한 다양한 아이디어와 노력이 돋보입니다. 혹시 다른 사이트에서도 이 같은 배려가 되어있는지 궁금하네요. 골프존(www.golfzon.com)에서도 스크린리더를 이용하는 유저를 위한 배려가 잘 되어 있습니다.
접근성 향상을 위한 다양한 노력들이 웹을 조금 더 평등하고 편리한 곳으로 만들어 나갑니다.
웹표준과 웹접근성을 잘 지원하여 만든 사이트가 있습니다. 만약 그 사이트를 스크린리더기로 읽는다면 아래 그림과 같은 순서로 읽어 나갈 것 입니다. 사이트 이미지는 다음을 예로 들었습니다. 마크업 순서는 헤더, LNB, 컨텐츠 영역, RNB, 푸터 순이라고 가정했습니다.
아마도 스크린 리더기는 위의 페이지를 로고가 있는 부분부터 읽어나갈 것 입니다. 그리고 번호가 붙은 순서대로 읽어나가 푸터가 있는 부분까지 차례로 읽어나갈 것 입니다.
이 부분에서 우리가 시각장애인의 웹접근성에 대해서 생각해 볼 것이 있습니다. 만약 스크린리더를 사용하는 한 유저가 있다고 가정합시다. 그 유저는 위의 사이트에서 9번 섹션에 있는 영화 컨텐츠를 주로 이용한다고 가정하겠습니다. 그러면 이 부분에서 접근성 저해 문제가 발생합니다.
이유는 이렇습니다. 9번 섹션을 이용하기 위해서 해당 유저는 매번 페이지를 1번 부터 읽어와야 하는 불편함이 생기기 때문입니다. 유저에게 상당한 시간 낭비일 수 있습니다. 그러면 이 문제를 해결하여 스크린리더를 사용하는 유저가 사이트에 접근하자마자 바로 원하는 섹션으로 접근하는 방법은 없을까요?
다행히도 간단하게 위의 접근성 문제를 해결할 수 있습니다.
스크린리더를 이용하는 유저, 원하는 섹션으로 바로 이동시키기
일단 각 섹션별로 ID값을 지정해줍니다. 이 ID네임을 이용하여 북마킹 기능을 활용할 것 입니다.
각 섹션별 모듈에 해당하는 div에 id값을 다음과 같이 주면됩니다.
<div id="shop_area">
... 컨텐츠 중략
</div>
... 컨텐츠 중략
</div>
위에 있는 다음(daum.net)의 예처럼 하시면 편리할 것 입니다. 각 섹션별로 id 값을 지정해줍니다.
그리고 페이지의 가장 상단에 다음과 같은 코드를 넣어줍니다. 페이지의 이름을 알 수 있는 헤드라인 태그 바로 아래에 오면 최적일 것 같습니다.
다음(daum.net)의 메인페이지 문서 구조입니다. 웹페이지 최상단에 h1 태그로 사이트의 이름을 지정해 주었습니다. 그리고 그 아래에 간단한 유틸리티와 캠페인 영역을 지나면 '목차'라는 부분이 있음을 알 수 있습니다. 이것이 바로 시각장애인을 배려한 웹접근성 향상 방법중에 하나입니다.
메인페이지의 각 섹션으로 바로 이동할 수 있는 기능을 제공합니다. 이 기능을 제공함으로서 사이트를 이용하는 시각장애인(스크린리더 이용자)들은 웹페이지 전체를 일일이 읽으면서 시간낭비를 할 필요가 없어졌습니다. 바로바로 원하는 섹션으로 이동할 수 있게 되었기 때문이죠. 각 섹션으로 이동시키는 방법은 a 태그의 북마크 기능을 이용합니다. 코드는 다음과 같습니다.
<a rel="bookmark" href="#shop_area">쇼핑 바로가기</a>
a 태그의 rel 속성은 'bookmark'로 해주고, href에는 각 섹션에서 지정한 #id 값을 입력해줍니다. 간단하죠?
섹션 바로 가기 링크는 어떻게 감추죠?
자, 그럼 여기서 의문점이 하나 생기는데요. 편의를 위한 서비스 제공은 좋지만 CSS를 적용한 실제 서비스에 위의 목차를 감추려면 어떻게 해야할까요? 얼핏 생각하기로 다음과 같이 하면 될 것 같은데 말이죠. 음..
HTML마크업
<div class="section_navi">
... 목차 내용 중략 ...
</div>
CSS
.section_navi { display: none; }
<div class="section_navi">
... 목차 내용 중략 ...
</div>
CSS
.section_navi { display: none; }
자, 시각장애인을 위해 만든 목차를 CSS를 적용한 실서비스에서 감추기 위해 위처럼 하면 될까요?
정답은 위의 예제처럼 하면 '안된다' 입니다. display: none; 을 이용하면 일부 스크린리더기가 이를 읽지 못합니다. 그래서 이를 보완하기 위한 방법이 필요하게 되었습니다. display: none; 처럼 컨텐츠를 완전히 감추어 버리는 것이 아니라, 실제로는 컨텐츠를 존재하게 만들면서 디자인상으로만 보이지 않게 하는 방법 말이죠.
HTML마크업
<div class="section_navi">
... 목차 내용 중략 ...
</div>
CSS
.section_navi { visibility: hidden; width: 0; height: 0; overflow: hidden; position: absolute; top: -10000px; line-height: 0; }
<div class="section_navi">
... 목차 내용 중략 ...
</div>
CSS
.section_navi { visibility: hidden; width: 0; height: 0; overflow: hidden; position: absolute; top: -10000px; line-height: 0; }
'다음'의 경우에 이렇게 되어있는데. 좋은 방법이라고 생각됩니다. 목차 div의 너비와 높이를 0으로 만들고 넘어가는 컨텐츠는 overflow: hidden으로 감추는 것이죠. 그리고 2중으로 visibility: hidden까지 자물쇠를 채워 눈에 안띄게 하였고 3중으로 position: absolute에 top: -10000px까지 주어 목차를 안드로메다로 날려버렸습니다. 그러나 dispaly: none처럼 아예 사라진 것이 아니기 때문에 스크린리더기에서도 잘 읽힙니다.
웹접근성 향상을 위한 다양한 아이디어와 노력이 돋보입니다. 혹시 다른 사이트에서도 이 같은 배려가 되어있는지 궁금하네요. 골프존(www.golfzon.com)에서도 스크린리더를 이용하는 유저를 위한 배려가 잘 되어 있습니다.
접근성 향상을 위한 다양한 노력들이 웹을 조금 더 평등하고 편리한 곳으로 만들어 나갑니다.
구매처 : 
이건 오히려 접근성을 해칠 수 있습니다. 능숙한 스크린리더 사용자라면 하세월 모든 내용을 다 듣지 않습니다. 스크린리더에는 페이지 탐색을 도와주는 많은 기능들이 있습니다. 검색이라든가 서식간 이동, 프레임 이동 등을 사용하면 훨씬 빠르게 페이지를 탐색할 수 있고 쏭군님께서 링크로 구현한 기능은 헤딩간이동으로 충분히 커버가 됩니다.
저렇게 부가적인 콘텐츠 - 부가적인 콘텐츠는 결국 복잡도를 증가시켜 이해를 어렵게 합니다. - 를 넣는 것 보다는 h1~h6 태그를 잘 써주는 것이 더 도움이 됩니다.
페이지간의 링크는 "메뉴 건너뛰기(skip navigation)"만 넣는 것이 좋습니다.
현석님 안녕하세요. 오랜만이에요~
남겨주신 의견 잘 보았습니다.
스크린리더기로 헤드라인간 이동이 된다는 점은 제가 몰랐던 부분이네요. 제가 스크린리더기를 테스트 하는 동안에는 스크린리더기를 능숙하게 다루는 분이 안 계셔서(물론 저 역시도요) 몰랐던 부분인 것 같습니다.
좋은 부분 알려주셔서 감사드립니다.
음, 그리고 이 방법이 오히려 접근성을 해치는 부분에 해당될 수 있다는 부분에 대해서는 그렇게 생각하시는 분들도 분명 있을거라는 생각이 듭니다.
반면 분명 편리하게 사용하실 분들도 있을 것 입니다. 말씀하신바 헤드라인간 skip이 가능하다면 목차 역시 스킵을 해버리면 되지 않을까 생각합니다.(말씀하신 스크린리더기를 능숙하게 다루는 유저)
헤드라인 스킵을 할 줄 모르는 유저는 목차를 통해서 섹션간 이동을 하면 될 것 같구요. 유저에게 있어서 선택의 카드는 두 가지가 있으므로 제가 제시한 방법을 사용하는 것도 나쁘지 않다고 생각합니다.
많은 생각을 하게 되는 댓글 감사드리구요. 앞으로도 좋은 의견 부탁드리겠습니다. 감기 조심하세요.
코드와 관련하여 기존에 display:none;에 대한 대안으로 다시 권장되어진 것이 visibility:hidden; 이지만, 이 같은 경우에도 보조기기에서 숨김콘텐츠로 인식을 못할 수 도 있다고 합니다. (예로 JAWS 같은 경우 둘 다 인식 안하는 것을 알고 있습니다)
시각장애인을 위해 특화 된 콘텐츠를 제공하는 것이라고 한다면 보조기기가 최대한 잘 대응할 수 있도록 작업하는 것이 맞지 않을까 싶어 댓글 남겨봅니다
mihee님 소중한 의견 감사합니다.
JAWS와 같은 특정 소프트웨어에서 visibility: hidden;을 읽지 못한다면 visibility: hidden; 도 display: none;의 좋은 대안이라고는 할 수 없겠네요.
그렇다면 visibility: hidden;은 사용하지 않고, z-index: -1; 과 같은 테크닉을 동원하거나 height: 0; width: 0; overflow: hidden; 과 같이 컨텐츠의 보이고 감춰지고에 영향을 주지 않는 CSS 스펙으로 대응을 해야겠네요.
값진 정보 공유해주셔서 감사합니다.
캬~~
저런 부분까지 신경써야 하는 거군요... 너무 어렵네요..
그저 html 문법 조금 알고 있는 저로서는 말이죠.. ㅎㅎ
쏭군님에게 올 한해는 뜻 깊은 한해 였으리라 생각합니다.
새해에도 건강하시고 바라시는 모든 것 다~ 다~ 이루시는 한해 되시길 기원 할께요.
새해 복 많이 받으세요. ㅎㅎ
웹접근성을 지켜야 한다면 해야할 것이 한도 끝도 없이 많아지더라구요. 마래바님 블로그 꾸며 놓으신 것 보면 마래바님도 대단한 매니아이신 것 같습니다^^
작년한해 재미있는 비행소식 많이 전해주셔서 감사드리구요~ 2010년에도 자주 왕래하는 이웃블로거로 친하게 지냈으면 좋겠습니다~ 새해 복 많이 받으시고, 가정에도 복이 깃들길 바랍니다^^
안녕하세요. 좋은 글 잘 보았습니다.
다음의 경우를 예로 들어 설명해주셨는데요.
다음의 경우도 그렇지만, '장애 환경에 대한 비장애인의 관점에서 바라본 지나친 배려"라고 할까요.
실제 장애인들에게는 "시각 장애인 사용자를 위한....."이라는 멘트와 퀵링크처럼 제공되는 건너뛰기 링크가 오히려 웹 접근을 어렵거나 귀찮게 할 수 있을 것 같습니다.
현석님께서 말씀하셨지만, 그런 부분은 headings을 통해 충분히 해결할 수 있습니다. (스크린 리더 사용자에게는 거의 기본적인 단축키 스킬입니다.)
쏭군님의 블로그에 처음으로 댓글을 달게 되었는데 ^^;
자주 놀러오도록 하겠습니다.
2010년 새해 복 많이 받으세요~
성민장군님 좋은 의견 감사합니다.
일단 규모가 큰사이트에서 '섹션 바로 가기' 기능을 제공한다면 없애는 의사결정이 쉽지는 않을 것 같습니다. 누군가는 필요로 하기 때문에 사전에 충분한 리서치와 분석, 기획 과정을 거쳤을 것이라고 생각됩니다.
다만, 항목에 있는 H2부분의 문구를 짧게 해야할 것 같다는 느낌은 듭니다. 지적하신 부분에 '시각장애인을 위한...' 이 부분은 오히려 접근성을 해칠 수 있을 것 같다는 생각이 드네요. 간단히 '목차', '바로가기' 정도로만 헤드라인 레이블링을 수정하면 될 것 같습니다.
새해 복 많이 받으세요~