작업 내용

1️⃣ 슬라이드 그룹 정보 제공 (role="group", aria-label)

function updateSlideA11y(swiper) {
  .
  .
	slides[i].setAttribute('role', 'group');
	slides[i].setAttribute('aria-label', `${realIndex + 1} / ${total}`);
}

const visualSwiper = new Swiper('.visual-swiper', {
  .
  .
  on: {
    init: function () {
      updateSlideA11y(this);
    },
    slideChange: function () {
      updateSlideA11y(this);
    },
  },
});

모든 슬라이드에 role=”group”, aria-label 속성이 적용된 모습

Swiper 구버전에서는 슬라이드에 role="group", aria-label 속성이 기본적으로 적용되지 않습니다.

스크린 리더 사용자가 몇 번째 슬라이드인지 알 수 있도록 설명을 보충해주기 위해 초기화(init)와 슬라이드 변경(slideChange) 시점마다 각 슬라이드에 접근성 속성을 추가하였습니다.

2️⃣ 포커스 이동 제어 (inert 속성)

function updateInertAttribute(swiper) {
  const slides = Array.from(swiper.slides);
  const total = slides.length;
  const visibleCount = swiper.slidesPerViewDynamic();
  const activeIndex = swiper.activeIndex;

  // 모든 슬라이드에 inert 속성 추가
  slides.forEach((slide) => slide.setAttribute('inert', ''));

  const half = Math.floor(visibleCount / 2);

  // 현재 시각적으로 보이는 슬라이드는 inert 속성 제거
  for (let i = -half; i <= half; i++) {
    const index = (activeIndex + i + total) % total;
    slides[activeIndex].removeAttribute('inert');
  }
}

현재 활성화된 슬라이드를 제외한 모든 비활성화 슬라이드에 inert 속성이 적용된 모습

시각적으로 보이지 않는 슬라이드에 포커스를 이동하면 사용자는 화면에 보이지 않는 콘텐츠에 접근하게 되어 혼란을 겪습니다.

이 문제를 해결하기 위해 활성화된 슬라이드를 제외한 모든 비활성화 슬라이드에 inert 속성을 추가하여 보이지 않는 슬라이드에는 초점이 가지 않도록 했습니다.

3️⃣ 슬라이드 변경 시 알림 제공

function updateIndexNotification(swiper) {
  const swiperIndexNotification = swiper.el.querySelector(
    '.swiper-index-notification'
  );
  const current = swiper.realIndex + 1;
  swiperIndexNotification.textContent = `${current}번째 슬라이드로 이동`;
}

ex) 5번째 슬라이드에서 멈출 시 ‘5번째 슬라이드로 이동’ 알림 제공

스크린 리더 사용자에게 슬라이드를 넘길 시 몇 번째 슬라이드인지 알려주기 위해 aria-live="polite" 속성을 지닌 요소를 추가하여 알림 기능을 구현하였습니다.

⚠️ 자동재생 중에는 슬라이드가 바뀔 때마다 "O번째 슬라이드로 이동" 알림이 계속 들리기 때문에

자동 재생 중에는 aria-live="off"로 알림을 끄고, 정지 상태에서만 aria-live="polite"로 설정합니다.

if (isPlaying) {
  visualSwiperIndexNotification.setAttribute('aria-live', 'off');
} else {
  visualSwiperIndexNotification.setAttribute('aria-live', 'polite');
}

4️⃣ 포커스 시 자동재생 제어