주제: 접근성 높은 페이저의 마크업
게시판리스트나 코멘트 리스트 하단에 나오는 페이저 - 보통 페이징이라고도 하죠 - 의 마크업을 어떻게 해야 할까요?
그냥 <a>와 <span>의 나열로 했었는데 접근성 측면에 문제(중요도 3: 연속된 링크)가 있다고 하네요. <li>로 바꾸기는 했는데 어떠한 마크업이 적절한 마크업일까요?
written by hyeonseok.com
글을 쓸때는 태그를 달아봅시다 :)
페이지 1
로그인 상태가 아닙니다. 로그인 하시거나 회원등록을 진행해 주세요.
접근성 높은 페이저의 마크업
글 [ 15 ]
- hyeonseok
- 운영그룹
- 접속 중 아님
- Hooney
- 제비
- 접속 중 아님
답변: 접근성 높은 페이저의 마크업
hyeonseok wrote:
게시판리스트나 코멘트 리스트 하단에 나오는 페이저 - 보통 페이징이라고도 하죠 - 의 마크업을 어떻게 해야 할까요?
그냥 <a>와 <span>의 나열로 했었는데 접근성 측면에 문제(중요도 3: 연속된 링크)가 있다고 하네요. <li>로 바꾸기는 했는데 어떠한 마크업이 적절한 마크업일까요?
페이지 : ｜ 1 ｜ 2 ｜ 3 ｜ 4 ｜ 5 ｜6 ｜
위의 링크를 말하는 거죠??
OL 목록으로 그룹핑하는 것이 의미론적으론 맞습니다. (확신에 찬)
Shell we css design? come on csslook.com
답변: 접근성 높은 페이저의 마크업
연속된 링크의 경우 ol로 표현하는 게 개념상 맞구요... (뭐.. 사실은 그냥 나열도 별 상관없지 싶습니다.)
접근성에서 문제가 된 이유는, 링크와 링크 사이에는 공백 문자 외의 다른 방식으로 링크와 링크를서로 구분해줘야 하기 때문입니다. (링크가 연속되어 있을 경우 TTS등에서 제대로 처리못하는 경우도 있다고 하는군요.)
그래서 외국 사이트들 보면 텍스트링크들이 연속되어 있을 때 [Page1][Page2]... 이런 식으로 기호등을 써서 링크를 분리시키고 있지요.
http://eouia0.cafe24.com
coming soon... 2006. 01. 01
coming soon... 2006. 01. 01
- dahlia
- Member
- 접속 중 아님
답변: 접근성 높은 페이저의 마크업
저는 이렇게 해왔습니다.
.pager { display: block; margin: 0; }
.pager li { display: inline; }
.pager li a { font-family: 'Trebuchet MS', sans-serif; font-size: 8pt; }
.pager .last:after { content: ' ... '; }
.pager .first:before { content: ' ... '; }
.pager .selected a { color: black; text-decoration: none; font-weight: bolder; }[HTML]<ul class="pager">
<li class="last"><a href="page52">52</a></li>
<li><a href="page21">21</a></li>
<li><a href="page20">20</a></li>
<li><a href="page19">19</a></li>
<li><a href="page18">18</a></li>
<li class="selected"><a href="page17">17</a></li>
<li><a href="page16">16</a></li>
<li><a href="page15">15</a></li>
<li><a href="page14">14</a></li>
<li><a href="page13">13</a></li>
<li class="first"><a href="page1">1</a></li>
</ul>[/HTML]
The problem with 'What You See Is What You Get' is that what you see is all you've got. — Brian Kernighan.
- freshworks
- 일꾼
- 접속 중 아님
답변: 접근성 높은 페이저의 마크업
예전에 만들어뒀던거...
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bulletin Board Test</title>
<meta name="generator" content="TextMate 1.5" />
<meta name="author" content="Jiyoon" />
<style type="text/css">
* {margin: 0; padding: 0;}
body {font: 0.75em/1.5em 돋움, Dotum, AppleGothic, 'Lucida Grande', Arial, Verdana, sans-serif;}
/* 페이지 리스트 */
#pageList {text-align: center;}
#pageList ol, #pageList #leftnav, #pageList #rightnav {display: inline;}
#pageList ol, #pageList li {display: inline; list-style: none;}
#pageList ol li {padding-left: 5px; background: url("num_spliter.gif") no-repeat 0 50%;}
#pageList ol li:first-child {padding: 0; background-image: none;}
#pageList ol li a {color: #666; padding: 0 5px 0 4px; text-decoration: none;}
#pageList ol li a:hover {text-decoration: underline;}
#pageList strong {color: #333; padding: 0 4px;}
#pageList img {border: none; vertical-align: middle;}
</style>
</head>
<body>
<div id="pageList">
<ul id="leftnav">
<li><a href="#"><img src="page_first.gif" alt="처음 페이지" /></a></li>
<li><a href="#"><img src="page_prev.gif" alt="이전 페이지" /></a></li>
</ul>
<ol>
<li><strong>1</strong></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
</ol>
<ul id="rightnav">
<li><a href="#"><img src="page_next.gif" alt="다음 페이지" /></a></li>
<li><a href="#"><img src="page_last.gif" alt="마지막 페이지" /></a></li>
</ul>
</div>
</body>
</html>
[/html]
답변: 접근성 높은 페이저의 마크업
흠.. 그런데,
freshworks님 코드에서..
ul ~ ol ~ ul 은 굳이 그렇게 할 필요가 있을까 싶어요.
그냥 그 통째로 ol 로 표현해도 되지 않나요? (사실은 통째로 ul로 표시해도 큰 상관없다는 생각이긴 합니다.)
http://eouia0.cafe24.com
coming soon... 2006. 01. 01
coming soon... 2006. 01. 01
- hyeonseok
- 운영그룹
- 접속 중 아님
답변: 접근성 높은 페이저의 마크업
[html]<ul class="pager">
<li>처음</li>
<li>이전</li>
<li>
<ol>
<li>11페이지</li>
<li>12페이지</li>
<li>13페이지</li>
<li>14페이지</li>
<li>15페이지</li>
</ol>
</li>
<li>다음</li>
<li>마지막</li>
</ul>[/html]
요건 어때요? 오반가...ㅎㅎ
written by hyeonseok.com
- freshworks
- 일꾼
- 접속 중 아님
답변: 접근성 높은 페이저의 마크업
첨에 현석님 처럼 nested list로 했었습니다만... 숫자 리스트 옆에 나오는 버튼들이 포함되지 않는 경우가 있어서 따로 뺐습니다. 만약 버튼이 안빠진다면 링크만 빼버려도 되긴하겠죠.
제가 리스트 코드를 잘못보고 안된다고 했었네요. ㅜㅜ
- dahlia
- Member
- 접속 중 아님
답변: 접근성 높은 페이저의 마크업
eouia wrote:
그냥 그 통째로 ol 로 표현해도 되지 않나요? (사실은 통째로 ul로 표시해도 큰 상관없다는 생각이긴 합니다.)
저 같은 경우 스크린 리더를 사용해본 적은 없지만, <ol>로 처리할 경우 “일, 이십삼, 이, 이십사, 삼 이십오”처럼 리스트 자체의 번호와 페이지 번호를 번갈아 부르게 되어 혼란스럽지 않을까 하는 생각에 <ul>을 사용합니다. 혹시 스크린 리더에서는 어떻게 처리되는지 아시는 분 계시나요?
The problem with 'What You See Is What You Get' is that what you see is all you've got. — Brian Kernighan.
답변: 접근성 높은 페이저의 마크업
접근성 체크 프로그램들이 문제가 있다고 진단한 이유는 eouia님 말씀대로 링크가 연속되어 있기 때문이고, 그것이 문제가 되는 이유는 현실적인 이유이며, 링크 사이에 다른 문자를 넣으라는 것은 일종의 interim solution입니다. 그런데 불행하게도 대부분의 스크린 리더들이 목록을 읽을 때에도 특별한 구분을 하지 않습니다. 국내 스크린 리더 중에 목록을 제대로 구분해서 읽어주는 것은 하나도 없고, IBM의 homepage reader의 경우에도 그냥 전체 목록이 몇 개이다라고 말해주고 바로 목록을 읽어들어갑니다.
의미적으로도 페이지 번호를 OL로 처리하는 게 맞는지는 잘 모르겠습니다.
실제 장애인들에게 더 중요한 것은 OL, UL을 쓰는 것보다 독립적으로 이 링크가 무엇을 뜻하는 것인지 알려주는 것이 더 중요합니다. 그냥 갑자기 | 1 | 2 | 3 | 이런 식으로 나오면 이게 페이지 번호인지, 아니면 글 번호인지, 아니면 이게 어떤 특정한 메뉴로 이동하는 메뉴의 번호인지 시각적인 브라우저에서는 쉽게 알 수 있지만 시각장애인처럼 순차적으로, 또는 주변 맥락 정보 없이 페이지를 탐색하는 사람들에게는 생뚱맞게 들릴 수 있습니다. 따라서 보다 중요한 것은 각각의 링크에 설명을 붙여주는 것이 아닐까요?
그래서 저 같은 경우는 주변 맥락의 정보가 부족하거나, 링크 자체의 텍스트가 풍부하지 않을 경우에는 title로서 설명을 해주는 것이 좋은 것 같습니다. 페이지 번호들도 아래의 예처럼 title을 달아주면 접근성이 높아질 것 같습니다.
- dece24
- 운영그룹
- 접속 중 아님
답변: 접근성 높은 페이저의 마크업
보다 중요한 것은 각각의 링크에 설명을 붙여주는 것이 아닐까요?
전구가 빤짝 하는 느낌으로 다가 왔습니다.
왜 그런생각을 시도해 보지 못했을까 하는 생각도 들구요.
바로 실천모드로 들어갑니다. ㅋㅋㅋ
한편 페이징 번호를 목록으로 마크업 하는것이 그 어느 누구에게도 도움이 안된다면 차라리 그냥 목록으로 마크업 하는것을 포기하고 하이퍼 링크만 걸어주는게 낳지는 않을까 하는 생각도 듭니다..
왜냐하면..
Pda나 휴대폰에서 스타일시트가 제거된 상태로 볼 때 목록은 무조건 세로로 배치되기 때문에 불필요한 세로 스크롤을 만들어 내면서 한 화면에서 목록 전체가 한눈에 보이지 않는 문제가 있습니다. 그런 상황이라면 목록태그로 마크업 하는것이 결과적으로는 오히려 접근성을 떨어뜨리는 마크업이 되기 때문에 차라리 가로 형태로 나열되면서 자연스럽게 줄바꿈 되도록 링크만 걸어주는 것이 낳지않나 라는 생각이 드는 것입니다..
Blog : http://naradesign.net/
- hyeonseok
- 운영그룹
- 접속 중 아님
답변: 접근성 높은 페이저의 마크업
gregshin wrote:
따라서 보다 중요한 것은 각각의 링크에 설명을 붙여주는 것이 아닐까요?
항상 고민하게 되는 문제이지만 결론은 쉽지 않더군요.
시각적으로 페이저를 봤을 때에도 처음 접하는 사람은 그것이 무엇을 의미 하는지 파악하기 힘들 것입니다. 즉 시각적으로나 청각적으로나 접근하기 힘든 것은 마찬가지 라는 것입니다. 그렇다면 그곳에 설명을 붙일 건인가 하는 것을 다른 각도로 생각해 봐야 합니다. 제 의견은 페이저 같은 것은 이미 굉장히 많이 쓰이는 UI이기 떄문에 설명을 붙일 필요는 없지 않을까 싶고, 또한 정보를 제공을 하는 것이 좋다고 해서 모든 작업자 들이 설명을 달기를 기대하는 것은 무리입니다.
제가 중요하게 생각하는 것 중에 하나가 아무리 좋고 배려를 많이 한 UI라고 해도 결국 실제 작업자들이 귀찮게 생각을 하게 되면 그것은 현실적으로 구현되기 힘들다는 생각입니다. 페이저에 설명을 다는 것은 폼컨트롤에 레이블을 다는 것과는 차이가 있습니다. 이 경우도 비슷한 경우인 것 같아서 생각해 봤으면 좋겠습니다. 의견 주세요~
written by hyeonseok.com
답변: 접근성 높은 페이저의 마크업
현석님 말씀에 공감합니다. 페이지 번호를 나타내는 것이 이미 익숙한 Ui일 수 있습니다. 실제 제가 아는 시각 장애인 중 한 분은 스크린 리더를 가지고 정말 신기에 가까울 정도로 웹을 잘 탐색하시는데 그런 분들에게 페이지 번호같은 것들은 껌일지도 모릅니다.
그런데 한편 추가적인 설명을 다는 것이 익숙한 사람들에게 방해가 되느냐? 를 생각해보아야 할 것 같습니다. 만약 방해가 되지 않는다면 추가적인 설명을 다는 것이 나쁘지는 않은 것 같습니다.
모든 작업자들에게 그런 친절함을 기대할 수 있느냐? 물론 기대할 순 없지만, 제 생각엔 지금보다 작업자들이 훨씬 친절해져야 한다고 생각합니다. 웹 표준을 잘 지킨 사이트들도 들어가보면 이 인터페이스가 무엇을 뜻하는지 알기 어려운 경우가 너무 많습니다. 웹에 익숙하지 않은 사람이나 장애인들은 물론 더 어려움을 겪으리라고 생각합니다. 따라서 인터페이스에 있어서는 아주 무식한 초보자 기준으로 작업자에게 최대한의 친절을 베풀어달라고 요구하는 것이 사용자들의 정당한 권리라고 생각합니다. 물론 현실적으로는 쉬운 일이 아니지요...쩝...
- dahlia
- Member
- 접속 중 아님
답변: 접근성 높은 페이저의 마크업
gregshin wrote:
제 생각엔 지금보다 작업자들이 훨씬 친절해져야 한다고 생각합니다.
그것은 gregshin 님만의 생각이 아니라, 명백한 사실 같네요. 저는 요즘 포럼이나 블로그에 글을 게시할 때, 이모티콘 사용을 하지 않고 있습니다. 이게 과연 접근성을 높여줄지, 시각 장애인들에게 친절함이 될 수 있는지는 모르지만 말입니다.
The problem with 'What You See Is What You Get' is that what you see is all you've got. — Brian Kernighan.
- hyeonseok
- 운영그룹
- 접속 중 아님
답변: 접근성 높은 페이저의 마크업
gregshin wrote:
따라서 인터페이스에 있어서는 아주 무식한 초보자 기준으로 작업자에게 최대한의 친절을 베풀어달라고 요구하는 것이 사용자들의 정당한 권리라고 생각합니다.
이게 정답 같네요. 현실적으로 널리 퍼지기에는 힘들 것 같지만 노력해야 겠습니다.
written by hyeonseok.com
글 [ 15 ]
이 저작물은 크리에이티브 커먼즈 라이센스에 따라 이용하실 수 있습니다.
Forum | Wiki | All contents copyright © by CSS Design Korea and/or their respective owners.