널리

안녕하세요, 엔비전스입니다.

이번 아티클에서는 Swiper 라이브러리를 활용하여 웹 콘텐츠의 접근성을 개선하는 방법을 소개하려 합니다. Swiper는 현대 웹 개발에서 많이 사용되는 인기 있는 JavaScript 슬라이더 라이브러리로, 다양한 기능과 성능을 자랑합니다. 특히, 접근성을 고려하여 설계된 여러 옵션을 제공하여, 모든 사용자가 슬라이더를 쉽게 사용할 수 있도록 돕고 있습니다.

이 아티클은 두 부문으로 구성되어 있습니다. 첫 번째 부문에서는 Swiper 라이브러리의 기본 소개와 함께, 기본적으로 제공되는 접근성 기능과 커스터마이징 방법을 살펴보겠습니다. 두 번째 부문에서는 개발자가 수동으로 추가해야 하는 접근성 기능들에 대해 논의할 것입니다.

목차

1부: Swiper 라이브러리의 접근성 기능과 커스터마이징

a. aria-live 속성 관리

b. 내비게이션 및 페이지네이션 요소의 접근성 적용

c. 슬라이드 그룹화 및 레이블링

d. 접근성 옵션의 활성화 및 비활성화

e. NotificationClass를 활용한 접근성 알림

1부: Swiper 라이브러리의 접근성 기능과 커스터마이징

a. aria-live 속성 관리

Swiper의 autoplay 옵션은 슬라이드의 자동 재생을 제어합니다. autoplay 속성의 존재 여부는 aria-live 속성의 동작에 직접적인 영향을 미칩니다.

autoplay 속성에 따른 aria-live 설정

• autoplay 속성이 없는 경우:
  • 슬라이드를 포함하는 div에 aria-live="polite"가 설정됩니다.
  • 슬라이드 전환 시 스크린 리더가 자동으로 슬라이드 내용을 읽습니다.

  const swiper = new Swiper('.swiper', {
      // autoplay 속성 없음
      // 다른 옵션들...
  });

• autoplay 속성이 있는 경우:
  • aria-live 속성이 off로 설정됩니다.
  • 슬라이드가 전환되어도 스크린 리더가 자동으로 내용을 읽지 않습니다.

  const swiper = new Swiper('.swiper', {
      autoplay: {
          delay: 3000,
          disableOnInteraction: false,
          enabled: true // 자동 재생 활성화
      },
      // 다른 옵션들...
  });

aria-live 속성의 수동 관리

autoplay가 활성화된 상태에서 슬라이드가 표시될 경우 aria-live가 off로 설정되며, 자동 재생을 중지하더라도 자동으로 polite로 변경되지 않습니다. 따라서, 필요에 따라 수동으로 aria-live 속성을 관리해야 합니다. 예를 들어:

const swiperWrapper = document.querySelector('.swiper-wrapper');
const playPauseButton = document.querySelector('.swiper-button-play-pause');

playPauseButton.addEventListener('click', function() {
    if (swiper.autoplay.running) {
        swiper.autoplay.stop();
        swiperWrapper.setAttribute('aria-live', 'polite');
        this.textContent = '재생';
        this.setAttribute('aria-label', '슬라이드 쇼 재생');
    } else {
        swiper.autoplay.start();
        swiperWrapper.setAttribute('aria-live', 'off');
        this.textContent = '정지';
        this.setAttribute('aria-label', '슬라이드 쇼 정지');
    }
});

이 방식을 사용하면, 자동 재생 상태에 따라 aria-live 속성을 적절히 변경할 수 있습니다. 이는 Swiper의 기본 동작을 재정의하는 것이므로, 전체적인 접근성 전략과 일치하는지 신중히 고려해야 합니다.

b. 내비게이션 및 페이지네이션 요소의 접근성 적용

Swiper는 이전/다음 버튼과 페이지네이션 불릿에 자동으로 접근성 속성을 적용하여 사용자들이 슬라이드를 보다 쉽게 탐색할 수 있도록 돕습니다. 이러한 요소들은 키보드 접근성과 스크린 리더 호환성을 제공하며, 필요에 따라 개발자가 커스터마이즈할 수 있습니다.

내비게이션 버튼 접근성

이전 및 다음 버튼의 기본 HTML 구조는 개발자가 제공하며, Swiper는 div나 span 요소를 사용할 경우, 다음과 같은 접근성 속성을 자동으로 추가합니다:

• tabindex="0": 키보드 포커스를 받을 수 있도록 설정
• role="button": div 또는 span 요소를 사용한 경우에만 추가되어 스크린 리더가 해당 요소를 버튼으로 인식하도록 설정
• 기본 레이블: "next slide", "previous slide"로 설정되어 있습니다.

이러한 기본 레이블은 Swiper의 접근성 옵션에서 커스터마이즈가 가능합니다:

const swiper = new Swiper('.swiper', {
    a11y: {
        prevSlideMessage: '이전 항목으로 이동',
        nextSlideMessage: '다음 항목으로 이동',
    },
});

위 설정을 통해 이전 및 다음 버튼에 포커스할 때 스크린 리더가 제공할 메시지를 지정할 수 있습니다. 이때 설정된 메시지는 각 버튼의 aria-label로 적용됩니다.

모바일 웹에서는 이전/다음 버튼을 숨기는 경우가 많습니다. 그러나 이렇게 하면 스크린 리더 사용자가 슬라이드를 넘길 수 없으므로 접근성 향상 측면에서 이러한 방식은 사용하지 않는 것이 좋습니다.

페이지네이션 접근성

Swiper는 페이지네이션을 위한 컨테이너를 제공하면, 그 안에 <span> 요소들을 동적으로 생성합니다. 이때 각 페이지네이션 불릿에는 다음과 같은 접근성 기능이 기본적으로 적용됩니다:

• tabindex="0": 키보드 포커스를 받을 수 있도록 설정
• role="button": 스크린 리더가 버튼으로 인식하도록 설정
• 기본 레이블: 불릿에 대해 "1", "2", "3" 등의 숫자로 설정되어 있습니다.
• 선택된 페이지네이션 불릿에는 자동으로 aria-current="true" 속성이 적용되어 현재 선택된 슬라이드를 명확히 나타냅니다.

페이지네이션 불릿에 대한 접근성 메시지는 paginationBulletMessage 옵션을 통해 커스터마이즈할 수 있습니다:

const swiper = new Swiper('.swiper', {
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    a11y: {
        paginationBulletMessage: '{{index}}번째 슬라이드로 이동',
    },
});

paginationBulletMessage 옵션에서는 {{index}}가 현재 불릿의 인덱스로 자동 대체됩니다. 이 옵션을 통해 스크린 리더 사용자에게 페이지네이션 불릿의 역할을 명확히 전달할 수 있습니다. 설정된 메시지는 각 불릿의 aria-label로 적용됩니다.

커스텀 렌더링과 접근성

페이지네이션 불릿을 커스터마이즈하려면 renderBullet 함수를 사용하여 직접 HTML을 구성할 수 있습니다. 이 경우, 기본 제공되는 접근성 속성을 수동으로 추가해야 합니다:

pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderBullet: function (index, className) {
        return `${index + 1}`;
    },
}

그리고 키보드 이벤트를 처리하여 사용자 경험을 개선할 수 있습니다:

document.querySelectorAll('.swiper-pagination-bullet').forEach(bullet => {
    bullet.addEventListener('keydown', function(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            this.click();
        }
    });
});

이러한 방법을 통해 Swiper의 내비게이션 및 페이지네이션 요소에 대한 접근성을 향상시킬 수 있으며, 사용자 경험을 보다 포괄적이고 사용하기 쉽게 만들 수 있습니다.

c. 슬라이드 그룹화 및 레이블링

Swiper는 슬라이드의 구조에 따라 자동으로 그룹화와 레이블링을 처리합니다. 각 슬라이드가 어떻게 구성되느냐에 따라 role 속성과 aria-label의 설정 방식이 달라지며, 이는 접근성을 향상시키기 위해 중요한 요소입니다.

슬라이드 그룹화 방식

• 개별 그룹으로 구성된 슬라이드:
  • 각 슬라이드가 별도의 <div>로 구성된 경우, 기본적으로 각 슬라이드에 role="group"이 적용됩니다.
  • 이 방식은 슬라이드 개수를 올바르게 출력할 수 있어 접근성 측면에서 바람직합니다.
  • aria-label은 "1/3", "2/3"과 같은 형식으로 설정되어, 현재 슬라이드의 위치와 전체 슬라이드 수를 나타냅니다.
• 하나의 그룹에 모든 슬라이드가 포함된 경우:
  • 모든 슬라이드가 하나의 <div> 안에 포함되어 있어, 각 슬라이드 요소에 role="group"과 aria-label이 "1/3", "2/3"의 형식으로 설정됩니다.
  • 이러한 구조에서는 슬라이드의 하위 요소들 각각이 하나의 그룹으로 처리되므로 스크린 리더 사용자가 오히려 혼란을 느낄 수 있습니다.

접근성 옵션을 통한 role 및 aria-label 커스터마이징

Swiper의 접근성 옵션을 사용하여 각 슬라이드에 적용되는 role과 aria-label을 커스터마이즈할 수 있습니다. 이는 프로젝트의 특성과 요구에 맞게 슬라이드의 의미론적 구조를 조정할 수 있도록 돕습니다:

const swiper = new Swiper('.swiper', {
    a11y: {
        slideRole: 'region', // 기본 'group' 대신 'region' 사용 가능
        slideLabelMessage: '{{index}}번째 항목 / 총 {{slidesLength}}개 항목',
    },
});

• slideRole: 슬라이드에 적용할 역할을 지정합니다. 기본값은 group이며, 이를 region 등 다른 값으로 변경할 수 있습니다. 필요에 따라 null로 설정하여 role 속성을 완전히 제거할 수도 있습니다.
• slideLabelMessage: 각 슬라이드에 대한 aria-label 형식을 지정합니다. 기본적으로 "X/Y"의 형식으로 레이블링되며, 이를 통해 스크린 리더 사용자에게 현재 슬라이드의 위치와 전체 슬라이드 수를 명확하게 전달할 수 있습니다.

설정 예시:

• 기본 형식:

  slideLabelMessage: '{{index}}번째 항목 / 총 {{slidesLength}}개 항목'

  이 형식은 각 슬라이드에 "X번째 항목 / 총 Y개 항목"과 같은 레이블을 생성합니다.

• null 설정:
  • 적용 사례: 모든 슬라이드가 하나의 <div>에 포함되어 있어, 개별 슬라이드의 수를 명확히 구분하기 어려운 경우 사용될 수 있습니다.
  • 슬라이드 레이블과 역할이 불필요한 경우 slideRole과 slideLabelMessage를 null로 설정하여 불필요한 접근성 노이즈를 줄일 수 있습니다.

  slideRole: null,
  slideLabelMessage: null

이 설정은 슬라이드의 개수를 출력하기 어려운 구조에서 유용합니다. 단, null로 설정할 경우 스크린 리더 사용자가 현재 슬라이드의 위치나 전체 슬라이드 수를 파악하기 어려울 수 있으므로 주의해서 사용해야 합니다.

d. 접근성 옵션의 활성화 및 비활성화

Swiper는 기본적으로 여러 접근성 기능을 제공하지만, 프로젝트에 따라 이러한 기능을 켜거나 끌 수 있습니다. 이를 통해 개발자는 필요한 접근성 수준에 맞추어 Swiper를 사용할 수 있습니다.

const swiper = new Swiper('.swiper', {
    a11y: {
        enabled: true, // 접근성 기능 활성화
    },
});

• enabled: true: 접근성 기능을 활성화합니다. 기본적으로 Swiper는 이 설정을 통해 자동으로 접근성 관련 속성을 추가합니다.
• enabled: false: 접근성 기능을 비활성화하여 Swiper가 제공하는 자동 접근성 속성을 적용하지 않습니다.

이 옵션은 특정 프로젝트에서 Swiper의 접근성 기능이 필요하지 않거나, 개발자가 직접 접근성 구현을 관리하고자 할 때 유용합니다. 그러나 접근성을 비활성화할 경우, 사용자가 슬라이드를 탐색하기 어려울 수 있으므로 신중하게 고려해야 합니다.

e. NotificationClass를 활용한 접근성 알림

Swiper는 스크린 리더 사용자에게 슬라이드 변경 등의 정보를 제공하기 위해 notificationClass를 활용할 수 있는 옵션을 제공합니다. 이 옵션을 통해 커스텀 알림 메시지를 전달하여 사용자 경험을 향상시킬 수 있습니다.

const swiper = new Swiper('.swiper', {
    a11y: {
        enabled: true,
        notificationClass: 'swiper-notification',
    },
});

• notificationClass: 접근성 알림을 위한 요소의 클래스를 지정합니다. Swiper는 지정된 클래스 이름으로 화면에 보이지 않는 aria-live 영역을 생성하여 알림 메시지를 전달합니다.

알림 메시지 설정

notificationClass 옵션을 활용하여 특정 이벤트나 상태 변화 시 알림 메시지를 설정할 수 있습니다. 예를 들어, 슬라이드 전환 시 사용자에게 정보를 제공하려면 다음과 같이 설정할 수 있습니다:

swiper.on('slideChange', function() {
    const notification = document.querySelector('.swiper-notification');
    notification.textContent = `슬라이드가 ${this.activeIndex + 1}번째로 변경되었습니다.`;
});

이 방법을 통해 스크린 리더 사용자에게 슬라이드 전환 등의 중요한 정보를 실시간으로 전달할 수 있습니다. notificationClass를 활용하면 웹 페이지에서 동적 이벤트에 대한 피드백을 제공하여 접근성을 개선할 수 있습니다.