SEOUL CITY HALL

portfolio 시맨틱태그 웹접근성

seoulcityhall 적응형 웹접근성 시맨틱태그 swiper javascript

📌 PROJECT KEY POINTS

1. swiper slider
   1-1. swiper slider
   1-2. slider tab click - 다른 tab slider 멈춤
   1-3. slider 재생/정지 버튼
2. 키보드 이벤트 (keydown) : 서브메뉴 열고 닫기
3. 접근성에 따른 태그 순서

---

1. swiper slider

1-1. swiper slider

• js

const slide01 = new Swiper(".slide01 .swiper", {
  autoplay: {
    delay: 2000,
    disableOnInteraction: false,
  },
  loop: true,
  pagination: {
    el: ".slide01 .fraction",
    type: "fraction",
  },
  navigation: {
    nextEl: ".slide01 .next",
    prevEl: ".slide01 .prev",
  },
});

const slide02 = new Swiper(".slide02 .swiper", {
  autoplay: {
    delay: 1000,
    disableOnInteraction: false,
  },
  loop: true,
  pagination: {
    el: ".slide02 .fraction",
    type: "fraction",
  },
  navigation: {
    nextEl: ".slide02 .next",
    prevEl: ".slide02 .prev",
  },
});

// slide2 재생 멈춤 상태로 선언
slide02.autoplay.stop();

1-2. slider tab click - 다른 tab slider 멈춤

• js

const slideHeaders = document.querySelectorAll('.sc_slide h3');

slideHeaders.forEach(function(slideHeader) {
  slideHeader.addEventListener('click', function(event) {
    event.preventDefault();

    const slideCont = this.parentNode;

    slideCont.classList.add('on');

    const siblings = getSiblings(slideCont);
    siblings.forEach(function(sibling) {
      sibling.classList.remove('on');
    });

    if (slideCont.classList.contains('slide02')) {
      if (document.querySelector('.slide02 .play').style.display !== 'none') {
        slide01.autoplay.stop();
        slide02.autoplay.start();
      } else {
        slide01.autoplay.stop();
        slide02.autoplay.start();
      }
  } else {
    if (document.querySelector('.slide01 .play').style.display !== 'none') {
      slide01.autoplay.start();
      slide02.autoplay.stop();
    } else {
      slide01.autoplay.start();
      slide02.autoplay.stop();
    }
    }
  });
});

1-3. slider 재생/정지 버튼

• js

const slide01PlayBtn = document.querySelectorAll('.slide01 .play_btn .btn');
const slide02PlayBtn = document.querySelectorAll('.slide02 .play_btn .btn');

slide01PlayBtn.forEach(function(slide01btn) {
  slide01btn.addEventListener('click', function(event) {
    event.preventDefault();
    if (this.classList.contains('play')) {
      slide01.autoplay.start();
      document.querySelector('.slide01 .pause').style.display = 'block';
      document.querySelector('.slide01 .play').style.display = 'none';
    } else {
      slide01.autoplay.stop();
      document.querySelector('.slide01 .pause').style.display = 'none';
      document.querySelector('.slide01 .play').style.display = 'block';
    }
  });
});

slide02PlayBtn.forEach(function(slide02btn) {
  slide02btn.addEventListener('click', function(event) {
    event.preventDefault();

    if (this.classList.contains('play')) {
      slide02.autoplay.start();
      document.querySelector('.slide02 .pause').style.display = 'block';
      document.querySelector('.slide02 .play').style.display = 'none';
    } else {
      slide02.autoplay.stop();
      document.querySelector('.slide02 .pause').style.display = 'none';
      document.querySelector('.slide02 .play').style.display = 'block';
    }
  });
});

2. 키보드 이벤트 (keydown) : 서브메뉴 열고 닫기

✔️ 키보드 이벤트란??
사용자가 키를 누르거나 키를 놓을 때 발생한다.
키를 누를 때는 keydown 타입의 이벤트가 발생하고, 키를 놓을 때는 keyup 타입의 이벤트가 발생.

• keydown : 사용자가 키보드의 키를 눌렀을 때 이벤트 발생
• keyup : 사용자가 키보드의 키를 눌렀다가 떼었을 때 이벤트 발생

👇 알아보기👇

키보드 이벤트 객체에는 눌리거나 놓아진 키에 대한 다양한 메타정보가 담겨 있다. 예를 들어 key 속성에는 키 값이, code 속성에는 코드 값이, shiftKey 속성에는 쉬프트키가 함께 눌렸는지 여부가 저장된다.

• js

const lastSubLink = document.querySelectorAll('.sc_link .link .sub li:last-child a');
const firstSubLink = document.querySelectorAll('.sc_link .link .sub li:first-child a');

lastSubLink.forEach(function(link) {
  link.addEventListener('keydown', function(event) {
    const keyCode = event.keyCode || event.which;
    if (keyCode === 9 && !event.shiftKey) {  //키보드 shift키 없이 tab키만 누를 경우 (즉, 탭을 앞으로 이동할 경우)
      document.querySelectorAll('.sc_link .link .sub').forEach(function(sub) {
        sub.style.display = 'none';
      });
    }
  });
});

firstSubLink.forEach(function(link) {
  link.addEventListener('keydown', function(event) {
    const keyCode = event.keyCode || event.which;
    if (keyCode === 9 && event.shiftKey) {  //키보드 tab키와 shift키를 같이 누를 경우 (즉, 탭을 뒤로 이동할 경우)
      document.querySelectorAll('.sc_link .link .sub').forEach(function(sub) {
        sub.style.display = 'none';
      });
    }
  });
});

3. 접근성에 따른 태그 순서

스크린리더기와 탭을 사용해 웹 페이지를 읽을 경우 접근성에 의해 태그 순서위 위치를 알맞게 배치해야 한다.

[순서]

주요 서비스 ‣ 스토리인서울&페스티벌서울 ‣ 아이콘 메뉴 (공공서비스예약, 응답소 ...) ‣ 전체누리집

• html

<section class="sc_service">
  <div class="title_wrap">
    <h2 class="title">주요 서비스</h2>
  </div>
  <div class="service_links">
    <a href="" class="service_story">
      <span class="blind">스토리인서울</span>
    </a>
    <a href="" class="service_festival">
      <span class="blind">페스티벌인서울</span>
    </a>
  </div>
  <div class="main_service">
    <ul>
      <li class="public"><a href="">공공서비스예약</a></li>
      <li class="answer"><a href="">응답소(민원신고)</a></li>
      <li class="job"><a href="">서울일자리</a></li>
      <li class="realestate"><a href="">부동산정보</a></li>
      <li class="portal"><a href="">서울런4050</a></li>
      <li class="welfare"><a href="">서울복지포털</a></li>
      <li class="house"><a href="">서울주거포털</a></li>
      <li class="info"><a href="">청년몽땅정보통</a></li>
      <li class="seoul-hand"><a href="">내 손안에 서울</a></li>
      <li class="seoul"><a href="">상상대로 서울</a></li>
      <li class="ebook"><a href="">전자책</a></li>
      <li class="council"><a href="">시의회</a></li>
    </ul>
    <a href="" class="btn_asite">전체누리집</a>
  </div>
</section>