댓글목록을 어떻게 마크업할까?

Web Story | 2009년 9월 20일 작성

블로그 스킨들을 훑어보았더니 댓글목록을 다양한 방법으로 마크업한 사례를 볼 수 있었다. 어떤 블로그는 <UL>에 <LI>태그를 넣어서 사용했고, 어떤 블로그는 <OL>에 <LI>태그를 넣어서 사용했다. 이 방법은 과연 올바를까? 내 개인적으로는 앞서 말했던 태그에는 둘다 댓글목록로써 의미에 적합하지만 사실 댓글목록는 <OL>태그인 즉, 순서가 있는 태그를 사용했어야 했다. 그 이유는 <OL>태그는 스크린리더에서 순서를 인식하기 때문이다. 그 것은 웹을 보지않고 웹을 읽는 사용자의 입장을 바꿔서 생각하면 순서와 번호가 있는 댓글을 기억할 수 있기 때문이다. 따라서 이 방법은 사용성과 웹접근성에 적합한 태그라고 볼 수 있다고 생각한다. 제일 중요한 것은 눈으로 보고 기억하는 것 보다 들으면서 기억하는 것은 쉽기 않다고 생각하기 때문에 목록의 번호를 기억하여 그 번호가 적힌 목록을 다시 찾아 다시 읽을 수 있게 하는 스크린리더기의 기능이 있다면 <OL>태그를 사용해야 맞는 것이다.

얼마전 스크린리더기(센스리더)가 업데이트 하면서 UL, OL, DL 태그의 목록 갯수의 시작과 끝을 알려주고 목록이 몇개인지 알려주게 되었다. 거기서 스크린리더기의 기능을 조금 더 개선하여 <OL>태그의 목록번호를 추적할 수 있는 기능이 들어갔으면 하는 바램이 있다. 스크린리더기를 사용해보지 않아서 모르겠지만 물론 그 기능이 이미 들어갔는지는 아직 잘모른다. 어쨋든 목록번호 추적기능이 없다면 <OL>과 <UL> 둘다 써도 상관없겠지만 왠만하면 <OL>태그를 사용하는게 더 나을 것 같다.

`<OL>`태그 로 댓글목록을 코딩하는 방법

<h3>댓글목록</h3>
<ol>
   <li>
      <span title="meta">
         <strong title="작성자">이원민님의 댓글</strong>
         <em title="작성된 날짜">2009년 10월 10일</em>
      </span>
      <span title="comment-text" title="이원민님이 작성한 글 내용">
         <p>꽐라꽐라꽐라 꽐라~ 꽈꽐라~</p>
      </span>
   </li>
</ol>

우선 <SPAN>태그로 구조적으로 메타정보와 코멘트출력정보를 분리해 각각 클래스명을 정의하여 CSS상에서 디자인 표현을 충분히 표현할 수 있게 준비를 해 놓고, 따로 <STRONG>과 <EM>태그를 적절히 섞고 글 내용에는 <P>의 단락태그를 포함시켜 최대한 의미있게 코딩한 결과이다.

여기까지~ 더 나은 방법이 등장하지 않는 한 위에서 제시한 방법으로 가는게 가장 옳은 방법일 것 같다고 생각하는 1人의 나불나불이었다.

이군의 세상