[긴급]PHP 원격 코드 실행 취약점 안내
이전
목록
다음
돈

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

조박사님
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2013-08-20 (화) 12:37:43 · 3807 · 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개

남자사람1
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2013-08-22 (목) 09:40:44
이런식으로 처리를 하죠

<li><a href="#aa">탭 메뉴 1</a></li>
<div id="aa">탭 내용1</div>
lainfox
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2013-10-08 (화) 18:27:11
/박수

덧붙이자면
<a href="#aa">탭 메뉴 1</a> 을 클릭해서 <div id="aa">탭 내용1</div> 로 화면이 이동 할 때
<div id="aa">탭내용1</div> 부분에 tabIndex 를 주고 포커싱을 해주면 좋겠네요.
지운아빠
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2013-08-22 (목) 14:10:24
개발여건이 어떤 경우인지는 모르겠습니다만, 위와 같이 해서는 접근성을 구현하기가 쉽지 않아보입니다.
처음에 말씀하신 방법으로 하시거나 현재 SIR 메인의 탭을 참고해보세요.
조박사님
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2013-08-22 (목) 17:55:51
흠흠.. 개발된건 엎는건데.. 기존에 두번째 마크업으로 되어있어서요.ㅠ
에그당
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2013-09-24 (화) 12:32:43
https://www.sgic.co.kr/chp/iutf/hp/consultation/intro.mvc 자주하는질문best5

그렇게하면안된다고 자세하게 설명해줬습니다
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
13-10-29 조회 7,832
13-10-28 조회 8,649
13-10-28 조회 3,833
13-10-28 조회 3,392
13-10-27 조회 3,015
13-10-26 조회 3,733
13-10-25 조회 3,459
13-10-24 조회 3,431
13-10-24 조회 3,167
13-10-24 조회 3,490
13-10-24 조회 4,080
13-10-23 조회 4,237
13-10-23 조회 3,496
13-10-22 조회 4,724
13-10-21 조회 3,231
13-10-20 조회 3,561
13-10-18 조회 4,471
13-10-17 조회 4,797
13-10-15 조회 4,716
13-10-11 조회 4,597
13-10-10 조회 5,200
13-10-10 조회 3,685
13-10-08 조회 4,208
13-10-03 조회 6,266
13-10-02 조회 4,129
13-10-02 조회 4,395
13-10-02 조회 4,167
13-10-02 조회 3,663
13-10-02 조회 3,921
13-10-02 조회 3,786
13-10-02 조회 4,155
13-09-29 조회 4,713
13-09-29 조회 4,155
13-09-29 조회 4,030
13-09-29 조회 6,621
13-09-29 조회 4,243
13-09-27 조회 3,561
13-09-27 조회 4,192
13-09-24 조회 3,260
13-09-24 조회 3,537
13-09-18 조회 3,947
13-09-17 조회 3,797
13-09-16 조회 7,998
13-09-16 조회 5,359
13-09-16 조회 4,337
13-09-15 조회 3,184
13-09-13 조회 4,875
13-09-13 조회 3,361
13-09-13 조회 3,653
13-09-12 조회 3,460
13-09-11 조회 6,224
13-09-10 조회 3,508
13-09-10 조회 6,119
13-09-10 조회 3,883
13-09-09 조회 4,266
13-09-09 조회 4,916
13-09-07 조회 5,020
13-09-07 조회 3,109
13-09-06 조회 3,227
13-09-06 조회 3,847
13-09-06 조회 3,209
13-09-05 조회 3,378
13-09-05 조회 9,533
13-09-04 조회 3,072
13-09-04 조회 3,334
13-09-04 조회 3,009
13-09-03 조회 3,111
13-09-03 조회 3,539
13-08-30 조회 3,367
13-08-30 조회 4,448
13-08-29 조회 4,401
13-08-28 조회 3,920
13-08-28 조회 8,094
13-08-27 조회 4,081
13-08-26 조회 4,289
13-08-26 조회 3,515
13-08-26 조회 4,799
13-08-23 조회 4,083
13-08-23 조회 5,814
13-08-22 조회 5,342
13-08-22 조회 4,551
13-08-22 조회 5,061
13-08-22 조회 4,652
13-08-22 조회 4,564
13-08-22 조회 3,569
13-08-20 조회 3,808
13-08-18 조회 8,511
13-08-18 조회 5,360
13-08-17 조회 5,961
13-08-17 조회 4,820
13-08-17 조회 4,308
13-08-14 조회 3,345
13-08-12 조회 4,357
13-08-11 조회 3,531
13-08-09 조회 4,031
13-08-08 조회 5,264
13-08-08 조회 5,006
13-08-08 조회 4,399
13-08-08 조회 9,303
13-08-08 조회 5,514
글쓰기