3. 서울시청 적응형 PC 클론 코딩

📌
사이트 명: 서울시청 (웹 접근성)
제작 기간: 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 활용)

1. ‘본문 바로 가기’ skip navigation 기능 적용

웹 접근성이란 웹 사이트에서 제공하는 정보를 장애인이나 고령자들이 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것을 뜻한다.
비장애인의 경우 원하는 컨텐츠를 선택적으로 이용이 가능하지만 장애인의 경우, 원하는 컨텐츠까지 도달하기에 정보량이 많기 때문에 불필요한 정보는 생략할 수 있도록 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;
}

2. language 버튼 클릭 시 $window.open()

자바스크립트 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);
    })

버튼을 누르면 해당 사이트로 이동하도록 스크립트 작성까지 해주면 끝!

3. swiper (메인 슬라이드, 배너 슬라이드)

3-1. 슬라이드 탭 영역 활성화

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;
}

3-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();
                //정지 상태가 아니라면 재생
            }
        }

    })

3-3. 슬라이드 자동 재생 및 정지

자동으로 재생되는 슬라이드의 멈춤 버튼을 클릭했을 경우,
버튼을 다시 클릭할 때까지 슬라이드가 정지하도록 적용
[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')
        }

      })

4. WAI-ARIA 적용

네이버 클론코딩 때 알게된 WAI-ARIA를 서울시청에서 다시 적용해보았다.
검색 영역인 form에 [search] role 적용

주요 서비스 탭 영역에 [tablist, presentationm tab] role 적용

하단 사이트맵 탭 영역에 [tablist, tab, tabpanel] role 적용.

• a태그에 button이라는 role을 적용해야하는지 고민했는데 하나의 버튼으로서 기능하기보다는 세 개의 탭으로 탭리스트를 구성하고 있다고 판단해서 tab이라는 role을 적용시켰다. button태그에 tab role이 적용되기도 한다고 하니..!

5. 키보드 Tab 이벤트 기능 (Keydown 활용)

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);
    //탭 닫힘
  }
});