접근성 관련 탭 질문이 있습니다.
일반적으로 접근성에 맞추어서
탭을 만들때
<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>
<!-- //탭 컨텐츠 -->
이런식으로 탭마크업을 하게 되는 경우가 있잖아요..
이럴경우는 포커스이동이 논리적 구조에 따라 이동이 안되잖아요..
이럴경우는 퍼블리셔 분들은 접근성 작업할때 어떻게 처리를 하나요..
완전 애매한 부분이라서요..
알려주시면 감사드리겟습니다.
댓글 5개
남자사람1
12년 전
이런식으로 처리를 하죠
<li><a href="#aa">탭 메뉴 1</a></li>
<div id="aa">탭 내용1</div>
<li><a href="#aa">탭 메뉴 1</a></li>
<div id="aa">탭 내용1</div>
lainfox
12년 전
/박수
덧붙이자면
<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 를 주고 포커싱을 해주면 좋겠네요.
12년 전
개발여건이 어떤 경우인지는 모르겠습니다만, 위와 같이 해서는 접근성을 구현하기가 쉽지 않아보입니다.
처음에 말씀하신 방법으로 하시거나 현재 SIR 메인의 탭을 참고해보세요.
처음에 말씀하신 방법으로 하시거나 현재 SIR 메인의 탭을 참고해보세요.
12년 전
흠흠.. 개발된건 엎는건데.. 기존에 두번째 마크업으로 되어있어서요.ㅠ
12년 전
https://www.sgic.co.kr/chp/iutf/hp/consultation/intro.mvc 자주하는질문best5
그렇게하면안된다고 자세하게 설명해줬습니다
그렇게하면안된다고 자세하게 설명해줬습니다
게시글 목록
| 번호 | 제목 |
|---|---|
| 5722 | |
| 31534 | |
| 5717 | |
| 19190 |
JavaScript
레이어팝업 스크립트 문의
1
|
| 19181 |
기타
vi로 URL 열기
8
|
| 19177 |
JavaScript
1원짜리팁 현재 사이트 쿠키 알아내기
3
|
| 19173 |
JavaScript
1원짜리팁 자바스크립트로 좌우 공백 제거구현하기
3
|
| 19171 | |
| 27353 | |
| 19169 | |
| 24530 | |
| 27350 | |
| 19161 | |
| 19159 | |
| 19156 | |
| 19154 |
PHP
캐쉬 삭제
1
|
| 19152 | |
| 19150 |
PHP
절댓값 리턴 함수
1
|
| 19147 |
JavaScript
자동 스크롤바 사용하기
2
|
| 19145 |
JavaScript
일주기 시간대별로 플래시무비 자동 교체시키기
1
|
| 19143 |
JavaScript
TEXTATEA 창늘리기~
1
|
| 19141 | |
| 30830 | |
| 19135 |
jQuery
상단 가운데 정렬 , 스크롤시 상단에 고정...
5
|
| 19129 | |
| 19124 |
jQuery
제이쿼리 효과2입니다.
4
|
| 19118 |
jQuery
제이쿼리 fadein 효과
5
|
| 19115 | |
| 19111 |
JavaScript
페이스북 댓글창, 좋아요 달기
3
|
| 19108 |
PHP
IP중간 * 표시 하기
2
|
| 19104 |
JavaScript
글자 깜박임 blink 익스에서 구현
3
|
| 19101 | |
| 19098 | |
| 19094 |
JavaScript
select선택에따른추가select동적으로보여주기
3
|
| 27342 | |
| 19093 | |
| 26548 | |
| 19090 | |
| 19088 |
JavaScript
두 종류의 메뉴셋 사용시 메뉴선택 표시 문제
1
|
| 19086 | |
| 24524 | |
| 31526 | |
| 26539 | |
| 32021 | |
| 32015 | |
| 5705 | |
| 26533 |
견적서
견적서의뢰 ....
5
|
| 24510 | |
| 26524 | |
| 24507 | |
| 24506 | |
| 19082 | |
| 24498 | |
| 5702 | |
| 27337 | |
| 32011 | |
| 19080 | |
| 19075 | |
| 19073 | |
| 19072 |
JavaScript
도와주세요~
|
| 27330 | |
| 27328 | |
| 32010 | |
| 32005 | |
| 32001 | |
| 19071 |
JavaScript
자바스크립트 입문자인데..이미지 변경 스크립트..좀 도와주세여
|
| 19063 |
jQuery
list sort에 좋은것
7
|
| 31998 | |
| 31994 | |
| 5676 | |
| 27327 | |
| 31989 | |
| 5671 | |
| 5666 | |
| 19056 |
jQuery
참 좋은 이미지 슬라이딩 라이브러리
6
|
| 31988 | |
| 31987 | |
| 31981 | |
| 26515 |
계약서
홈페이지 제작 계약서
8
|
| 30823 | |
| 19050 |
Mobile
모바일로 접속했는지 확인하기.,
5
|
| 19047 | |
| 19039 |
MySQL
트리거 사용법에 관하여..
7
|
| 31969 | |
| 5649 | |
| 27323 | |
| 31963 | |
| 19027 | |
| 19020 | |
| 19017 | |
| 19014 | |
| 19009 |
PHP
페이스 댓글, 좋아요 달기
4
|
| 19005 |
JavaScript
페이스북 댓글창 좋아요 달기
3
|
| 31949 | |
| 18998 |
PHP
문자열 자르기 입니다.
6
|
| 18994 |
PHP
정규식에 관한 내용입니다.
3
|
| 18988 |
PHP
우분투서버 셋팅버입니다
5
|
| 18982 |
PHP
js, php 배열 연결
5
|
| 31941 | |
| 31934 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기