요소 |
역할 |
속성/상태 |
설명 |
<ul> |
tablist |
|
탭 집합 |
<li> |
presentation |
|
<li>요소의 리스트 의미를 삭제 |
<a> |
tab |
aria-selected="true/false" |
<a>요소의 역할을 탭으로 정의하고, 선택되었을 때 true, 선택되지 않았을 때 false |
<a> |
|
aria-controls="{}" |
tabpanel의 id명 |
<a> |
|
id="{}" |
aria-labelleddby 속성의 함수명 |
<div> |
tabpanel |
aria-expanded="true/false" |
<div>요소의 역할을 tabpanel로 정의하고, tabpanel이 열렸을 때 true, 닫혔을 때 false |
<div> |
|
aria-labelledby="{}" |
tabpanel의 id명 |
<div> |
|
id="{}" |
aria-controls 속성의 함수명 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Tab UI</title>
<style>
.tab-interface{
width: 500px;
}
.tab-list{
padding-left: 0;
margin: 0;
}
.tab-list:after{
display: block;
clear: both;
content: "";
}
.tab-list li {
float: left;
list-style: none;
}
.tab-list li{
display: block;
background: #999;
color: #fff;
border: 2px solid #999;
border-bottom: 0;
padding: 10px;
margin-right: 5px;
border-radius: 10px 10px 0 0;
text-decoration: none;
position: relative;
top: 2px;
}
[aria-selected="true"]{
background: #fff !important;
color: #aaa !important;
font-weight: bold;
}
.tab-contents{
margin-top: 0;
padding: 15px;
border: 2px solid #aaa;
z-index: 5;
}
.tab-contents h1{
font-size: 1.3em;
}
.unvisual{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('[role="tab"]').keyup(function(e){
var keyCode = e.keyCode || e.which;// 키보드 코드값
if(keyCode == 39 || keyCode == 40){// 오른쪽방향키 이거나
// 아래쪽 방향키
// 브라우저의 기본 동작을 취소한다.
e.preventDefault();
// 다음 tab 요소에 aria-selected=true로 지정하고
// 형제요소중에 자신 tab 이외의 나머지 tab 요소들을
// aria-selected=false로 지정한다.
$(this).next().attr('aria-selected', true).siblings().attr('aria-selected', false);
var selectedId = "#"+$(this).next().attr('aria-controls');
// 자신은 보이게하고 다른 tabpanel은 보이지 않게 지정한다.
$(selectedId).removeClass('unvisual').siblings().addClass('unvisual');
// 다음요소로 포커스를 이동한다.
$(this).next().focus();
// 마지막요소에서 오른쪽 방향키나 아래쪽 방향키를 눌렀을 경우
if($(this).next().prevObject.attr('aria-controls')=='section3'){
// tab, tabpanel, focus 모두 처음으로 이동
$('#tab1').attr('aria-selected', true).siblings().attr('aria-selected', false);
$('#section1').removeClass('unvisual').siblings().addClass('unvisual');
$('#tab1').focus();
}
}
if(keyCode == 37 || keyCode ==38){// 왼쪽방향키 이거나
// 위쪽 방향키
e.preventDefault();
// 이전 tab 요소에 aria-selected=true로 지정하고
// 형제요소중에 자신 tab 이외의 나머지 tab 요소들을
// aria-selected=false로 지정한다.
$(this).prev().attr('aria-selected', true).siblings().attr('aria-selected', false);
var selectedId = "#"+$(this).prev().attr('aria-controls');
// 자신은 보이게하고 다른 tabpanel은 보이지 않게 지정한다.
$(selectedId).removeClass('unvisual').siblings().addClass('unvisual');
// 이전요소로 포커스를 이동한다.
$(this).prev().focus();
// 처음요소에서 왼쪽 방향키나 위쪽 방향키를 눌렀을 경우
if($(this).prev().prevObject.attr('aria-controls')=='section1'){
// tab, tabpanel, focus 모두 마지막으로 이동
$('#tab3').attr('aria-selected', true).siblings().attr('aria-selected', false);
$('#section3').removeClass('unvisual').siblings().addClass('unvisual')
$('#tab3').focus();
}
}
if(keyCode == 35){// end 키를 눌렀을 때
e.preventDefault();
// tab, tabpanel, focus 모두 마지막으로 이동
$('#tab3').attr('aria-selected', true)
.siblings().attr('aria-selected', false);
$('#section3').removeClass('unvisual')
.siblings().addClass('unvisual');
$('#tab3').focus();
}
if(keyCode == 36){// home키를 눌렀을 때
e.preventDefault();
// tab, tabpanel, focus 모두 처음으로 이동
$('#tab1').attr('aria-selected', true)
.siblings().attr('aria-selected', false);
$('#section1').removeClass('unvisual')
.siblings().addClass('unvisual');
$('#tab1').focus();
}
});
$('[role="tab"]').keydown(function(e){
var keyCode = e.keyCode || e.which;// 키보드 코드값
if(keyCode == 9){// 탭키를 눌렀을 때
e.preventDefault();
var selectedId = "#"+$(this).attr('aria-controls');
console.log(selectedId);
$(selectedId).children('a').focus();
}
});
$('section a').keydown(function(e){
var keyCode = e.keyCode || e.which;// 키보드 코드값
if (keyCode == 9 && e.shiftKey) {// shift+tab 키
$('.tab-list li').each(function( index ) {
if($( this ).attr('aria-selected') == 'true'){
$( this ).next().focus();
return false;
}
});
}
});
// tab 요소에 클릭 이벤트를 추가한다.
$('[role="tab"]').on('click', function(e) {
e.preventDefault();
// 클릭한 tab 요소에 aria-selected=true로 지정하고
// 형제요소중에 자신 tab 이외의 나머지 tab 요소들을
// aria-selected=false로 지정한다.
$(this).attr('aria-selected', true).siblings().attr('aria-selected', false);
var selectedId = "#"+$(this).attr('aria-controls');
// 자신은 보이게하고 다른 tabpanel은 보이지 않게 지정한다.
$(selectedId).removeClass('unvisual').siblings().addClass('unvisual');
});
});
</script>
</head>
<body>
<div class="tab-interface">
<!-- 탭 인덱스 -->
<ul class="tab-list" role="tablist">
<li id="tab1" role="tab" aria-controls="section1"
aria-selected="true" tabindex="0">HTML</li>
<li id="tab2" role="tab" aria-controls="section2"
aria-selected="false" tabindex="0">CSS</li>
<li id="tab3" role="tab" aria-controls="section3"
aria-selected="false" tabindex="0">Javascrip</li>
</ul>
<!-- 탭 콘텐츠 -->
<div class="tab-contents">
<section id="section1" role="tabpanel" aria-labelledby="tab1">
<p>
HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language)라는 의미의 웹 페이지를 위한 마크업 언어이다.
</p>
<a href="#">상세 보기</a>
</section>
<section id="section2" class="unvisual" role="tabpanel" aria-labelledby="tab2">
<p>
캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는
마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에
주로 쓰이며, XML에서도 사용할 수 있다.
</p>
<a href="#">상세 보기</a>
</section>
<section id="section3" class="unvisual" role="tabpanel" aria-labelledby="tab3">
<p>
자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍
언어이다. 이 언어는 웹브라우저 내에서 주로 사용하며,
다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.
</p>
<a href="#">상세 보기</a>
</section>
</div>
</div>
<a href="#">copyright</a>
</body>
</html>
728x90
반응형
'WWWEB > Accessibility' 카테고리의 다른 글
| [WAI-ARIA] radio button (0) | 2020.07.21 |
|---|---|
| [WAI-ARIA] button (0) | 2020.07.21 |
| [WAI-ARIA] multi form (0) | 2020.07.20 |
| [WAI-ARIA] id/password input (0) | 2020.07.17 |
| [WAI-ARIA] auto complete 예제 (0) | 2020.07.17 |
댓글