테스트 사이트 - 개발 중인 베타 버전입니다

접근성 관련 탭 질문이 있습니다.

· 12년 전 · 1121 · 5
일반적으로 접근성에 맞추어서
 
탭을 만들때
 
<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>
<!-- //탭리스트 -->
<!-- 탭컨텐츠 -->
<div>탭 내용1</div>
<div>탭 내용2</div>
<div>탭 내용3</div>
<!-- //탭 컨텐츠 -->
 
이런식으로 탭마크업을 하게 되는 경우가 있잖아요..
 
이럴경우는 포커스이동이 논리적 구조에 따라 이동이 안되잖아요..
 
이럴경우는 퍼블리셔 분들은 접근성 작업할때 어떻게 처리를 하나요..
 
완전 애매한 부분이라서요..
 
알려주시면 감사드리겟습니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 5개

12년 전
이런식으로 처리를 하죠

<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 를 주고 포커싱을 해주면 좋겠네요.
12년 전
개발여건이 어떤 경우인지는 모르겠습니다만, 위와 같이 해서는 접근성을 구현하기가 쉽지 않아보입니다.
처음에 말씀하신 방법으로 하시거나 현재 SIR 메인의 탭을 참고해보세요.
12년 전
흠흠.. 개발된건 엎는건데.. 기존에 두번째 마크업으로 되어있어서요.ㅠ
https://www.sgic.co.kr/chp/iutf/hp/consultation/intro.mvc 자주하는질문best5

그렇게하면안된다고 자세하게 설명해줬습니다

게시글 목록

번호 제목
26447
26436
5279
5276
30674
18417
18414
5261
27054
5259
5239
18413
31486
18410
18400
30670
5231
18395
18387
18381
30661
5222
18380
27043
18366
24478
18359
30660
18355
18351
18343
18333
31439
18329
18323
27040
30655
5211
31427
5205
5193
5184
18317
27032
18313
30647
31408
30644
18306
18303
18288
27028
18285
31383
27024
5174
18276
27017
27130
18274
26427
5170
5160
5157
31371
27010
18267
27003
30636
18265
31350
18262
26998
18260
26992
26988
18259
31328
26986
18257
26983
5154
26975
24474
31309
26966
31251
18253
31218
31201
26957
26954
5147
5139
18248
5132
26947
31189
30631
26939