탭 메뉴의 접근성

위와 같은 경우의 아웃풋을 어떻게 구성할 것 인가. 여러가지 구조 중 내가 가장 많이 쓰는 것은,

1. ul.tabmenu > li > a ^^ div.content
2. ul > li > h2 > a ^+ div.content

위 두가지를 많이 쓴다. 이 두가지의 접근성 측면을 생각해보았을 경우..

 

첫번째의 경우

해당 div.content 에 탭이자, 타이틀로 쓰여지는 내용을 blind or hidden 시켜,

어떠한 내용인지 나타내준다.

그러나 이 경우는 접근성을 고려한 논리적 순서에 위배된다 생각된다.

 

두번째의 경우

나같은 경우는, 위의 타입을 많이 썼었는데, 논리적순서를 생각해 이와같은 방법으로

한페이지내에 컨텐츠가 탭으로 나눠져 뿌려지는 경우엔, 이 방법을 쓴다.

사용자는 제목과 버튼 격인 탭을 읽고, 그다음 바로 포커스가 해당 컨텐츠로 가기 때문이다.

그러나, 앞서 말한바와 같이 탭이지만, 한페이지에 뿌려지는 경우가 아닌,

탭마다 한페이지를 가지는 경우라면 첫번째의 경우를 쓰는게 구조적으로 맞다고 생각된다.