프로젝트👩💻 : 서울시청
사용언어🛠️ : HTML5, SCSS, JAVASCRIPT
라이브러리📁 : jQuery, Swiper
타입⚙️ : 적응형 PC
⏱️ : 3일 소요
✅ W3C Markup · CSS3 Pass
📌<h>태그 outline📌
✨KEY POINT
- 시맨틱 form
- tab 이동
- swiper 슬라이드
- WAI-ARIA 적용
- 아코디언 메뉴 구현 및 tab keydown
시맨틱 form
✨form 안에 fieldset 과 legend(라벨) 을 사용해 폼 요소를 그룹화하였습니다.
이를 통해 웹 접근성을 향상시키고, 폼의 구조를 더욱 의미있고 명확하게 하였습니다.
<form action="" method="get">
<fieldset>
<legend class="blind">검색</legend>
<input type="search" class="input-search" placeholder="검색어를 입력해 주세요" />
<button type="button" class="btn-keyboard"><span class="blind">가상키보드</span></button>
<button type="button" class="btn-submit"><span class="blind">전송</span></button>
</fieldset>
</form>tab 이동
✨접근성을 중점으로 한 사이트인만큼 모든 콘텐츠 요소에 tab으로 접근 가능하도록 제작했습니다.
swiper 슬라이드
swiper 라이브러리를 사용하여 슬라이드를 구현했습니다.
<!-- 기본 구조 -->
<section class="sc-slider">
<div class="slider-con1">
<!-- 버튼1 -->
<!-- 슬라이드1 -->
<!--슬라이드 내부 공통 컨트롤 영역
<div class="control-news">
<div class="fraction"></div>
<button class="btn-prev"><span class="blind">이전슬라이드</span></button>
<button class="btn-play"><span class="blind">슬라이드 시작</span></button>
<button class="btn-next"><span class="blind">다음슬라이드</span></button>
</div>
-->
</div>
<div class="slider-con2">
<!-- 버튼2 -->
<!-- 슬라이드2 -->
<!--슬라이드 내부 공통 컨트롤 영역 -->
</div>
</section>✨1) 각 슬라이드 정지/시작(.btn-play) 버튼
$(`.slider-con1 .btn-play`).click(function () {
$(this).toggleClass('on');
if ($(this).hasClass('on')) { //버튼에 on클래스 있을시,
swiper1.autoplay.stop(); //해당 슬라이드 정지
} else {
swiper1.autoplay.start(); //해당 슬라이드 재시작
}
});
$(`.slider-con2 .btn-play`).click(function () {
$(this).toggleClass('on');
if ($(this).hasClass('on')) {
swiper2.autoplay.stop();
} else {
swiper2.autoplay.start();
}
});==========================================
✨2) 현재 슬라이드 활성화시, 다른 슬라이드 중지 및 재시작
첫번째 주요뉴스 슬라이드1이 동작중일 때 두번째 시민참여 버튼을 클릭하면,
슬라이드2가 동작되면서 슬라이드1은 정지되도록 구현하였습니다.
그리고 다시 첫번째 버튼을 클릭하면 슬라이드2는 정지되고 슬라이드1은 정지되었던 슬라이드 페이지에서 재동작합니다.
$('.sc-slider > div > h3').click(function (e) {
e.preventDefault();
index = $(this).parent('div').index();
$('.sc-slider > div h3 a').removeClass('on');
$(this).find('a').addClass('on');
$('.sc-slider > div .swiper').removeClass('on');
$('.sc-slider > div')
.eq(index - 1)
.find('.swiper')
.addClass('on');
// 슬라이드1이 활성화 중이면 슬라이드2는 중지
if ($('.slider-con1 .swiper').hasClass('on')) {
swiper2.autoplay.stop();
} else {
swiper2.autoplay.start();
}
// 슬라이드2가 활성화 중이면 슬라이드1은 중지
if ($('.slider-con2 .swiper').hasClass('on')) {
swiper1.autoplay.stop();
} else {
swiper1.autoplay.start();
}
});WAI-ARIA 적용
WAI-ARIA(웹 접근성 증진을 위한 인터넷 애플리케이션 및 인터페이스)는 웹 콘텐츠와 웹 애플리케이션의 접근성을 향상시키기 위한 표준이다.
장애를 가진 사용자들이 웹 콘텐츠와 웹 애플리케이션에 더 쉽게 접근할 수 있도록 도와주는 역할을 한다.
✨1) aria-live
aria-live 속성을 사용하여 슬라이드가 변경될 때마다 스크린 리더 사용자에게 미리 알려주게끔 하고,
polite 값을 사용해 순차적으로 읽히게 했습니다. (즉시 읽히도록 제어하는 값은 assertive )
<div class="swiper">
<div class="swiper-wrapper" aria-live="polite">
<div class="swiper-slide">
<!-- 내용 -->
</div>
</div>
</div>====================================================
✨2) aria-expanded
role 속성으로 tablist, tab, tabpanel, button 값을 사용하여 태그의 역할을 알려주고,
aria-expanded 속성을 사용하여 현재 접혔는지 펼쳐졌는지의 상태를 나타냈습니다. (false = 접힘)
+주로 아코디언이나 드롭다운과 같은 위젯에서 사용
<ul class="site-list" role="tablist">
<li class="site-item" role="tab">
<a href="" role="button" aria-expanded="false">직속기관·사업소</a>
<div class="sub-area" role="tabpanel">
<ul>
<!-- 서브메뉴들 -->
</ul>
</div>
</li>
</ul>아코디언
<section class="sc-relate">
<ul class="site-list" role="tablist">
<li class="site-item" role="tab">
<a href="" role="button" aria-expanded="false">직속기관·사업소</a>
<div class="sub-area" role="tabpanel">
<ul>
<!-- 서브메뉴들 -->
</ul>
</div>
</li>
<li class="site-item" role="tab">
<a href="" role="button" aria-expanded="false">공사·출연기관</a>
<div class="sub-area" role="tabpanel">
<ul>
<!-- 서브메뉴들 -->
</ul>
</div>
</li>
<!-- 그 외 li 생략-->
</ul>
</section>✨1) 메뉴 구현
탭 클릭시 style의 변화는 toggleClass로 넣어주고,
서브메뉴(패널)의 아코디언 동작은 jquery의 slideToggle을 사용했습니다.
클릭 횟수가 연속적일 경우 발생하는 움직임의 중복은 .stop() 메소드를 사용하여 막아주고,
해당 코드에서의 a태그는 링크이동이 아닌 버튼의 역할로 사용되고 있기때문에
e.preventDefault(); 클릭이벤트시 동작되는 a태그의 기본 기능을 막아주었습니다.
$('.sc-relate .site-item').click(function (e) {
e.preventDefault();
$(this).toggleClass('on').siblings().removeClass('on');
$(this).siblings().find('.sub-area').stop().slideUp();
$(this).find('.sub-area').stop().slideToggle();
});=============================================
✨2) tab keydown
keydown 이벤트를 사용하여 tab으로 이동시 서브메뉴의 첫번째 li에서 뒤로 이동(tab + shift)하면 패널이 닫히고, 마지막 li에서 다음으로 tab할 경우에도 패널이 닫히게끔 구현했습니다.
tab의 keyCode : 9
$('.sc-relate .sub-area li:first-child').keydown(function (e) {
//tab + shift
if (e.keyCode === 9 && e.shiftKey) {
$('.sc-relate .sub-area').stop().slideUp(200);
$('.sc-relate .site-item').removeClass('on');
}
});
$('.sc-relate .sub-area li:last-child').keydown(function (e) {
//tab
if (e.keyCode === 9 && !e.shiftKey) {
$('.sc-relate .sub-area').stop().slideUp(200);
$('.sc-relate .site-item').removeClass('on');
}
});