묻고답하기

<ul class="widgetTabDW clearBoth widgetTab">
{@$i=0}
<!--@foreach($widget_info->tab as $module_srl => $tab)-->
    <li<!--@if($i==0)--> class="active"<!--@end-->><a href="#" onclick="content_widget_tab_show(jQuery(this),jQuery(this).parents('ul.widgetTab').next('dl.widgetDivider'),{$i},1,'{$tab->url}');return false">{$tab -> title}</a></li>
{@$i++}
<!--@end-->
</ul>

<dl class="widgetDivider">
{@$i=0}
<!--@foreach($widget_info->tab as $module_srl => $tab)-->
    <dt><a href="#" onclick="content_widget_tab_show(jQuery(this),jQuery(this).parents('ul.widgetTab').next('dl.widgetDivider'),{$i},1,'{$tab->url}');return false">{$tab->title}</a></dt>
    <dd<!--@if($i==0)--> class="open"<!--@end-->>
        {@$widget_info->content_items = $tab->content_items}
        <!--#include("_tab_none.html")-->
        <a class="tab_more" href="{$tab->url}">more +</a>
    </dd>
{@$i++}
<!--@end-->
</dl>

 

웹접근성에 맞추는 작업에

키보드 이용시(tab키) 탭메뉴 이동이 논리적이어야하는 항목이 있습니다.

탭제목1 -> 탭제목2 -> 목록 -> 더보기 순서로 이동되어서

사용자가 혼란을 초래하게됩니다. (이게 탭1목록인지 탭2 목록인지)

 

탭제목1 -> 탭1 목록 -> 탭1 목록 더보기 -> 탭제목2 -> 탭2 목록 -> 탭2 목록 더보기

순으로 구성을 하여야하는데

탭제목 영역과 탭목록 영역이 따로있고

템플릿 문법이 겹쳐서

어려움을 겪고있습니다..

 

목록 인식에 다른 방법도 있겠지만 논리적인 이동순서가 정석이고 우선이어서

이렇게 도움을 구하고자 올립니다.

 

참고 이미지도 첨부하겠습니다. 많이 도와주시면 감사하겠습니다.

 

tab_wigdet.jpg