📌
사이트 명: 서울시청 (웹 접근성)
제작 기간: 22.08.06 ~ 22.08.09 (4일 소요)
사용 언어: html, css, jQuery, java script, swiper
[서울 시청 홈페이지 적응형 PC 클론 코딩 작업]
웹 접근성 품질 인증을 받은 서울 시청 사이트를 클론 코딩하였습니다.
js를 사용하여 메인 슬라이드 및 하단의 사이드 배너 슬라이드를 제작했고,
하단의 sitemap부분을 키보드 tab키 만으로도 이동이 가능하도록 제작하여
웹 접근성을 높이는 방식에 대해 배운 작업입니다!
💡Learning point
- ‘본문 바로 가기’ skip navigation 기능 적용
- language 버튼 클릭 시 $window.open()
- swiper (메인 슬라이드, 배너 슬라이드)
- WAI-ARIA 적용
- 키보드 Tab 이벤트 기능 (e.keyCode 활용)
웹 접근성이란 웹 사이트에서 제공하는 정보를 장애인이나 고령자들이 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것을 뜻한다.
비장애인의 경우 원하는 컨텐츠를 선택적으로 이용이 가능하지만 장애인의 경우, 원하는 컨텐츠까지 도달하기에 정보량이 많기 때문에 불필요한 정보는 생략할 수 있도록 skip navigation 기능을 적용할 수 있다.
<div id="skip">
<a href="#container" class="skip-nav">본문 바로가기</a>
<a href="#cateInfo" class="skip-nav">분야별 정보 바로가기</a>
<a href="#footer" class="skip-nav">하단 영역 바로가기</a>
</div>
Tab키와 enter를 활용하여 본문, 분야별정보, 하단 영역 순으로 바로가기를 선택할 수 있다. 스킵을 위한 기능이기 때문에 웹페이지가 열림과 동시에 읽힐 수 있도록 body영역 시작부분에 위치하는 것이 가장 좋다고 한다!
/* skip-nav 설정 */
#skip{
position: relative;
width: 100%;
}
.skip-nav{
position: absolute;
top: -50px;
left: 0;
background: rgba(0,0,0,0.5);
width: 100%;
height: 40px;
text-align: center;
line-height: 40px;
z-index: 999;
opacity: 0;
transition: all .3s;
}
.skip-nav:focus, .skip-nav:active{
position: absolute;
top: 0;
width: 100%;
background: #ccc;
left: 0;
opacity: 1;
}
자바스크립트 window의 객체 함수 open()을 활용하면 브라우저 내에서
새 창을 띄울 수 있는데, language 영역에 이 기능을 사용했다.
<div class="lang-area">
<span class="blind">언어 선택</span>
<select name="language" id="langList">
<option value="https://english.seoul.go.kr/?SSid=101_01">English</option>
<option value="https://japanese.seoul.go.kr/?SSid=101_02">日本語</option>
<option value="https://chinese.seoul.go.kr/?SSid=101_04">简体中文</option>
</select>
<input type="button" class="btn-select" id="btnLang" value="GO">
</div>
select 태그로 원하는 언어를 선택하면, 이에 알맞은 창이 열리도록 적용
$('#btnLang').click(function(){
const url = $('#langList').val();
window.open(url);
})
버튼을 누르면 해당 사이트로 이동하도록 스크립트 작성까지 해주면 끝!
2개의 탭 영역이 있는 슬라이드이기 때문에 슬라이드 전체를 absolute로 띄운 다음 활성화 될 경우 z-index 값을 부여하여, active 된 영역이 보이도록 적용
[html]
<div class="slider slider1 active">
... 내용 생략
</div>
<div class="slider slider2">
... 내용 생략
</div>
[css]
.sc-slide .slider{
position: absolute;
right: 0;
top: 0;
width: 690px;
letter-spacing: -0.05em;
}
.slider.active{
z-index: 2;
}
✅각 탭 클릭 시, 클릭되지 않은 영역은 다른 영역 활성화 시 멈춘 상태여야 하며, 다시 그 탭으로 돌아갔을 때 멈춰있던 부분부터 재생되어야 함. 다른 영역이 보여지는 상태에서 보이지 않는 영역이 재생되지 않도록 스크립트 적용
[js]
$('.slider h3').click(function(e){
e.preventDefault();
const parent = $(this).parent();
parent.addClass('active').siblings('.slider').removeClass('active');
//클릭된 대상의 부모인 slider에 active클래스 주고, 형제 요소에는 제거
if (parent.hasClass('slider1')) {
slider2.autoplay.stop();
//클릭된 부모 요소가 slider1이라면 slider2는 정지
if (parent.find('.btn-autoplay').hasClass('active')) {
//slider1의 자동재생 버튼이 정지 상태라면
slider1.autoplay.stop();
//slide1 정지
} else {
slider1.autoplay.start();
//정지 상태가 아니라면 재생
}
} else {
slider1.autoplay.stop();
//클릭된 부모요소가 slider2라면 slider1 정지
if (parent.find('.btn-autoplay').hasClass('active')) {
//slider2의 자동재생 버튼이 정지 상태라면
slider2.autoplay.stop();
//slider2 정지
} else {
slider2.autoplay.start();
//정지 상태가 아니라면 재생
}
}
})
자동으로 재생되는 슬라이드의 멈춤 버튼을 클릭했을 경우,
버튼을 다시 클릭할 때까지 슬라이드가 정지하도록 적용
[html]
<div class="btn-wrap">
<a href="" class="btn-prev" role="button" tabindex="0"><span class="blind">이전</span></a>
<a href="" class="btn-autoplay" role="button" tabindex="0"><span class="blind">자동재생 정지</span></a>
<a href="" class="btn-next" role="button" tabindex="0"><span class="blind">다음</span></a>
</div>
[js]
//자동재생, 정지 버튼
$('.slider1 .btn-autoplay').click(function(e){
e.preventDefault();
if ($(this).hasClass('active')) { //->active 상태일 때 재생
slider1.autoplay.start();
$(this).removeClass('active')
} else {
slider1.autoplay.stop();
$(this).addClass('active')
}
})
$('.slider2 .btn-autoplay').click(function(e){
e.preventDefault();
if ($(this).hasClass('active')) { //->active 상태일 때 재생
slider2.autoplay.start();
$(this).removeClass('active')
} else {
slider2.autoplay.stop();
$(this).addClass('active')
}
})
네이버 클론코딩 때 알게된 WAI-ARIA를 서울시청에서 다시 적용해보았다.
검색 영역인 form에 [search] role 적용
주요 서비스 탭 영역에 [tablist, presentationm tab] role 적용
하단 사이트맵 탭 영역에 [tablist, tab, tabpanel] role 적용.
keydown : 사용자가 키보드의 키를 눌렀을 때 발생
keyup : 사용자가 키보드의 키를 눌렀다가 떼었을 때 발생
- tab키의 key code는 9로 출력된다.
- tab키와 shift키를 함께 누르면 뒤로 이동한다.
$(".sitemap-list li:first-child").keydown(function (e) {
//탭 패널 영역의 첫 번째 요소에 키보드 이벤트 적용
if (e.keyCode === 9 && e.shiftKey) {
//tab키와 shift키를 함께 눌렀을 경우(뒤로 이동)
$(".sitemap-list").stop().slideUp(200);
//탭 닫힘
}
});
$(".sitemap-list li:last-child").keydown(function (e) {
//탭 패널 영역의마지막 요소에 키보드 이벤트 적용
if (e.keyCode === 9 && !e.shiftKey) {
//tab키만 눌렀을 경우(앞으로 이동)
$(".sitemap-list").stop().slideUp(200);
//탭 닫힘
}
});