접근성 관련 탭 질문이 있습니다. 정보
접근성 관련 탭 질문이 있습니다.본문
일반적으로 접근성에 맞추어서
탭을 만들때
<ul>
<li><a href="#">탭 메뉴 1</a>
<div>탭내용1</div>
</li>
<li><a href="#">탭 메뉴 2</a>
<div>탭내용2</div>
</li>
<li><a href="#">탭 메뉴 3</a>
<div>탭내용3</div>
</li>
</ul>
<li><a href="#">탭 메뉴 1</a>
<div>탭내용1</div>
</li>
<li><a href="#">탭 메뉴 2</a>
<div>탭내용2</div>
</li>
<li><a href="#">탭 메뉴 3</a>
<div>탭내용3</div>
</li>
</ul>
이렇게 작업을 해서 포커스가 탭메뉴 이동시 엔터를 치면 각 탭내용으로 포커스가 이동하게 되는데
개발여건상
<!-- 탭 리스트 -->
<ul>
<li><a href="#">탭 메뉴 1</a></li>
<li><a href="#">탭 메뉴 2</a></li>
<li><a href="#">탭 메뉴 3</a></li>
</ul>
<!-- //탭리스트 -->
<ul>
<li><a href="#">탭 메뉴 1</a></li>
<li><a href="#">탭 메뉴 2</a></li>
<li><a href="#">탭 메뉴 3</a></li>
</ul>
<!-- //탭리스트 -->
<!-- 탭컨텐츠 -->
<div>탭 내용1</div>
<div>탭 내용2</div>
<div>탭 내용3</div>
<!-- //탭 컨텐츠 -->
<div>탭 내용1</div>
<div>탭 내용2</div>
<div>탭 내용3</div>
<!-- //탭 컨텐츠 -->
이런식으로 탭마크업을 하게 되는 경우가 있잖아요..
이럴경우는 포커스이동이 논리적 구조에 따라 이동이 안되잖아요..
이럴경우는 퍼블리셔 분들은 접근성 작업할때 어떻게 처리를 하나요..
완전 애매한 부분이라서요..
알려주시면 감사드리겟습니다.
추천
0
0
댓글 5개
이런식으로 처리를 하죠
<li><a href="#aa">탭 메뉴 1</a></li>
<div id="aa">탭 내용1</div>
<li><a href="#aa">탭 메뉴 1</a></li>
<div id="aa">탭 내용1</div>
/박수
덧붙이자면
<a href="#aa">탭 메뉴 1</a> 을 클릭해서 <div id="aa">탭 내용1</div> 로 화면이 이동 할 때
<div id="aa">탭내용1</div> 부분에 tabIndex 를 주고 포커싱을 해주면 좋겠네요.
덧붙이자면
<a href="#aa">탭 메뉴 1</a> 을 클릭해서 <div id="aa">탭 내용1</div> 로 화면이 이동 할 때
<div id="aa">탭내용1</div> 부분에 tabIndex 를 주고 포커싱을 해주면 좋겠네요.
개발여건이 어떤 경우인지는 모르겠습니다만, 위와 같이 해서는 접근성을 구현하기가 쉽지 않아보입니다.
처음에 말씀하신 방법으로 하시거나 현재 SIR 메인의 탭을 참고해보세요.
처음에 말씀하신 방법으로 하시거나 현재 SIR 메인의 탭을 참고해보세요.
흠흠.. 개발된건 엎는건데.. 기존에 두번째 마크업으로 되어있어서요.ㅠ
