아코디언 aria
1) role
아코디언 패널 role="region" // 충분히 중요하다 인식 할 수있는 섹션을 포함하는 콘텐츠
2) property
아코디언 헤더 aria-controls="연결된 아코디언 패널의 ID" // 어떤 상세 컨텐츠를 컨트롤할 수 있는지?
아코디언 패널 aria-labelledby="연결된 아코디언 헤더의 ID" // 컨텐츠를 리드하고있는 요소가 무엇인지?
3) state(script로 제어)
아코디언 헤더
aria-expanded: true(현재 펼쳐져있는 상태)/false(현재 닫겨져있는 상태) - 버튼 전부에게 주는 속성
aria-disabled: true(비활성 상태) / false(활성 가능한 상태) - 클릭한 버튼 하나에게만 주는 속성HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> 아코디언 수직 방향으로 열리기1 </title>
<link rel="stylesheet" href="css/ver1.css">
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="js/ver1.js"></script>
</head>
<body>
<section id="content">
<h2>자주 찾는 질문</h2>
<div id="faqAccordion" class="accordion">
<h3 class="tit on">
<button id="aHeader1" class="accorheader first" type="button" aria-controls="aPanel1">
<span class="blind_b">질문</span>
A) 질문 상품을 한 번에 주문했는데 일부는 도착하지 않았습니다. 배송확인은 어떻게 해야 하나요?
</button>
</h3>
<div id="aPanel1" class="accopanel" role="region" aria-labelledby="aHeader1" >
<p>주문 상품 중 일부만 수령했을 경우 다음과 같은 사유로 상품이 개별 배송될 수 있으므로 참고 부탁드립니다. </p>
<strong> 1) 동일 상품이 아닌 경우</strong>
<ul>
<li>- 신세계백화점, 이마트점포, 협력업체, 트레이더스, 부츠 등 상품이 발송되는 주체별로 배송일이 다름</li>
<li>- 협력업체 상품일 경우 각 업체 별 상품 입고 및 출하시기가 다름 </li>
</ul>
<strong> 2) 동일 상품인 경우</strong>
<ul>
<li>- 상품의 특성상 대형 가전, 가구, 산지 직송 상품, 고중량의 상품 등은 중량 및 수량에 따라 1개 이상의 송장번호로 나뉘어 배송 될 수 있음 <br>
배송되지 않은 상품에 대한 배송정보는 [ MY SSG > MY주문관리 > 주문/배송 조회]에서 확인 가능하며, <br>
해당 주문/배송 조회에서 확인되지 않을 경우 고객상담 센터로 연락 부탁드립니다.
</li>
</ul>
</div>
<h3 class="tit">
<button id="aHeader2" class="accorheader" type="button" aria-controls="aPanel2">
<span class="blind_b">질문</span>
A) 질문 상품을 한 번에 주문했는데 일부는 도착하지 않았습니다. 배송확인은 어떻게 해야 하나요?
</button>
</h3>
<div id="aPanel2" class="accopanel" role="region" aria-labelledby="aHeader2" >
<p>주문 상품 중 일부만 수령했을 경우 다음과 같은 사유로 상품이 개별 배송될 수 있으므로 참고 부탁드립니다. </p>
<strong> 1) 동일 상품이 아닌 경우</strong>
<ul>
<li>- 신세계백화점, 이마트점포, 협력업체, 트레이더스, 부츠 등 상품이 발송되는 주체별로 배송일이 다름</li>
<li>- 협력업체 상품일 경우 각 업체 별 상품 입고 및 출하시기가 다름 </li>
</ul>
<strong> 2) 동일 상품인 경우</strong>
<ul>
<li>- 상품의 특성상 대형 가전, 가구, 산지 직송 상품, 고중량의 상품 등은 중량 및 수량에 따라 1개 이상의 송장번호로 나뉘어 배송 될 수 있음 <br>
배송되지 않은 상품에 대한 배송정보는 [ MY SSG > MY주문관리 > 주문/배송 조회]에서 확인 가능하며, <br>
해당 주문/배송 조회에서 확인되지 않을 경우 고객상담 센터로 연락 부탁드립니다.
</li>
</ul>
</div>
<h3 class="tit">
<button id="aHeader3" class="accorheader last" type="button" aria-controls="aPanel3">
<span class="blind_b">질문</span>
A) 질문 상품을 한 번에 주문했는데 일부는 도착하지 않았습니다. 배송확인은 어떻게 해야 하나요?
</button>
</h3>
<div id="aPanel3" class="accopanel" role="region" aria-labelledby="aHeader3" >
<p>주문 상품 중 일부만 수령했을 경우 다음과 같은 사유로 상품이 개별 배송될 수 있으므로 참고 부탁드립니다. </p>
<strong> 1) 동일 상품이 아닌 경우</strong>
<ul>
<li>- 신세계백화점, 이마트점포, 협력업체, 트레이더스, 부츠 등 상품이 발송되는 주체별로 배송일이 다름</li>
<li>- 협력업체 상품일 경우 각 업체 별 상품 입고 및 출하시기가 다름 </li>
</ul>
<strong> 2) 동일 상품인 경우</strong>
<ul>
<li>- 상품의 특성상 대형 가전, 가구, 산지 직송 상품, 고중량의 상품 등은 중량 및 수량에 따라 1개 이상의 송장번호로 나뉘어 배송 될 수 있음 <br>
배송되지 않은 상품에 대한 배송정보는 [ MY SSG > MY주문관리 > 주문/배송 조회]에서 확인 가능하며, <br>
해당 주문/배송 조회에서 확인되지 않을 경우 고객상담 센터로 연락 부탁드립니다.
</li>
</ul>
</div>
</div>
</section>
</body>
</html>CSS
@charset "utf-8";
*{margin: 0;padding: 0;}
ul{list-style: none;}
h2,h2{font-size: 100%;}
section{display: block;}
button{border:none;background: none;cursor:pointer;font-size:inherit;font-family: inherit;color: inherit;
line-height:inherit;}
.blind_b{width: 1px;height: 1px;overflow: hidden;border:none;position: absolute;clip:rect(1px,1px,1px,1px);clip-path: inset(50%);}
body{font-family: "맑은 고딕", "Malgun Gothic";font-size: 14px;color: #333;}
#content{width: 1200px;margin: 50px auto;}
#content h2{font-size: 23px;text-align: center;margin-bottom: 50px;}
#faqAccordion{border-bottom: 1px solid #aaa;}
#faqAccordion .accopanel + .tit{border-top: 1px solid #aaa;}
#faqAccordion .accorheader{position: relative;font-size: 16px;padding: 23px 160px 23px 35px;text-align: left;background: url("../images/bu_faq_q.png") no-repeat left center;line-height: 24px;width: 100%;}
#faqAccordion .accorheader::after{content:"";position: absolute;top: 30px;right: 30px;width: 16px;height: 9px;background: url("../images/ico.png");}
#faqAccordion .tit.on .accorheader::after{background-position: right top;}
#faqAccordion .accopanel{display: none;padding: 35px;background: #eee;font-size: 14px;}JQuery
$(document).ready(function () {
var _acco = $('.accordion');
//1)로딩 설정 : .tit 첫번째에 .on 추가, 바로 뒤 형제 아코디언 패널 보여지게, 포커스 갈 수있도록 tabIndex 추가, aria의 state설정
_acco.find('.tit:first').addClass('on').next().show().attr('tabindex', 0);
_acco.find('.tit:first .accorheader').attr({'aria-expanded': true,'aria-disabled': true}).parent().siblings('.tit').children().attr({'aria-expanded': false,'aria-disabled': false});
//2)아코디언 헤더에 keydown 이벤트 선언 : 위아래 방향키, HOME키, END키, 엔터키, 스페이스바 제어 => switch - case문
_acco.find('.accorheader').on('keydown', function (e) {
var key = e.keyCode;
console.log(key);
//아래40 위38 HOME36 END35 Enter13 Spacebar32
switch (key) {
case 40: //아래 방향키
if($(this).hasClass('last')){ //마지막 버튼인 경우 ==> 맨 처음 버튼으로 이동
$(this).closest('.accordion').find('.first').focus();
}else{//마지막 버튼이 아니여서 다음 버튼으로 이동할 수 있는 경우
$(this).parent().next().next().children().focus();
}
break;
case 38: //위 방향키
if($(this).hasClass('first')){ //첫번째 버튼인 경우 ==> 맨 마지막 버튼으로 이동
$(this).closest('.accordion').find('.last').focus();
}else{//첫번째 버튼이 아니여서 이전 버튼으로 이동할 수 있는 경우
$(this).parent().prev().prev().children().focus();
}
break;
case 36: //HOME키
e.preventDefault();
$(this).closest('.accordion').find('.tit .first').focus();
break;
case 35: //END키
e.preventDefault();
$(this).closest('.accordion').find('.tit .last').focus();
break;
case 13: //Enter키
case 32: //Spacebar키
$(this).trigger('click');
break;
}
});
//3)아코디언 헤더 click 이벤트 : 열려져있는 아코디언패널의 아코디언헤더는 클릭할 수 없다. 열려지지 않은 패널만 제어
_acco.find('.accorheader').on('click',function(){
if(!$(this).parent().hasClass('on')){
// 현재 버튼에 aria속성 변경 => 부모 클래스on추가 => 나머지 형제 중 .tit.on을 찾아서 클래스 on을 제거 => 자식 버튼 aria속성 변경,제거
$(this).attr({'aria-expanded':true, 'aria-disabled':true}).parent().addClass('on').siblings('.tit.on').removeClass('on').children().attr('aria-expanded',false).removeAttr('aria-disabled');
//열리고 닫기 제어
$(this).parent().next().stop().slideDown('fast').attr('tabIndex',0).siblings('.accopanel').stop().slideUp('fast').attr('tabIndex',-1);
}
});
});
drop the bit 0 and 1