[CSS] opacity와 visibility는 함께 사용해야 할까요?

웹 표준 및 접근성 고려 사항

웹 표준 및 접근성(a11y)을 고려할 때, visibility와 opacity의 사용 선택은 중요한 영향을 미칠 수 있습니다. 각각의 사용에 따른 영향을 자세히 살펴보고, 모범 사례를 소개합니다:

접근성(a11y) 고려 사항

opacity만 사용하는 경우

• 시각 장애: 스크린 리더나 다른 보조 기술에 의존하는 사용자는 완전히 투명한 요소(opacity: 0)와 여전히 상호작용할 수 있습니다. 왜냐하면 해당 요소가 DOM에 남아 있고 포커스를 받을 수 있기 때문입니다.
• 키보드 탐색: opacity: 0을 설정한 요소는 키보드 탐색을 통해 여전히 포커스를 받을 수 있으며, 이는 사용자가 "보이지 않는" 요소와 상호작용하게 만들어 혼란을 줄 수 있습니다.

visibility와 opacity를 함께 사용하는 경우

• 완전한 비가시성: visibility: hidden을 설정하면 해당 요소가 보이지 않고 상호작용할 수 없게 됩니다. 이는 스크린 리더가 숨겨진 콘텐츠를 읽지 않게 하고 키보드 탐색이 숨겨진 요소에 포커스를 맞추지 않게 합니다.
• 더 나은 제어: 두 속성을 함께 사용하면 요소의 가시성과 상호작용 상태를 더 잘 제어할 수 있어 장애가 있는 사용자에게 더 나은 사용자 경험을 제공합니다.

웹 표준 및 모범 사례

1. 포커스 관리 보장:
   • 상호작용하지 말아야 할 때는 visibility: hidden을 사용하거나 요소를 DOM에서 제거합니다.
   • 애니메이션 목적으로 opacity: 0을 사용하는 경우, 해당 요소가 포커스를 받지 않도록 합니다.
2. 스크린 리더:
   • 숨겨진 요소(visibility: hidden 또는 display: none 사용)는 일반적으로 스크린 리더에서 무시됩니다.
   • opacity: 0이 설정된 요소는 무시되지 않으며 혼란을 줄 수 있습니다.

접근성을 고려한 구현 예

다음은 접근성이 보장되면서도 시각적으로 매력적인 페이드 인/아웃 효과를 구현하는 방법입니다:

CSS

.image-slider-item {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    opacity: 0;
    visibility: hidden;
    position: absolute; /* 슬라이드가 서로 겹치도록 설정 */
    top: 0;
    left: 0;
    width: 100%; /* 필요에 따라 조정 */
    height: 100%; /* 필요에 따라 조정 */
}

.image-slider-item.visible {
    opacity: 1;
    visibility: visible;

Javascript

document.addEventListener('DOMContentLoaded', function() {
    var imageSliderItems = document.querySelectorAll('.image-slider-item');
    var currentIndex = 0;

    function showNextSlide() {
        // 모든 항목 숨기기
        imageSliderItems.forEach(item => {
            item.style.opacity = '0';
            item.style.visibility = 'hidden';
            item.setAttribute('aria-hidden', 'true'); // 스크린 리더에서 숨겨진 것으로 표시
            item.setAttribute('tabindex', '-1'); // 탭 순서에서 제거
        });

        // 현재 인덱스 증가
        currentIndex = (currentIndex + 1) % imageSliderItems.length;

        // 현재 항목을 페이드 인 효과로 표시
        imageSliderItems[currentIndex].style.opacity = '1';
        imageSliderItems[currentIndex].style.visibility = 'visible';
        imageSliderItems[currentIndex].setAttribute('aria-hidden', 'false'); // 스크린 리더에서 보이는 것으로 표시
        imageSliderItems[currentIndex].removeAttribute('tabindex'); // 탭 순서에 다시 추가
    }

    document.getElementById('nextButton').addEventListener('click', showNextSlide);

    // 첫 번째 슬라이드를 표시하여 초기화
    imageSliderItems[currentIndex].style.opacity = '1';
    imageSliderItems[currentIndex].style.visibility = 'visible';
    imageSliderItems[currentIndex].setAttribute('aria-hidden', 'false');
    imageSliderItems[currentIndex].removeAttribute('tabindex');
});

설명

• CSS: opacity와 visibility의 전환을 정의하여 부드러운 페이드 인 및 페이드 아웃 애니메이션을 보장합니다.
• JavaScript:
• 모든 요소를 opacity: 0 및 visibility: hidden으로 설정하여 숨깁니다.
• aria-hidden을 사용하여 요소를 스크린 리더에서 숨깁니다.
• tabindex="-1"을 사용하여 숨겨진 요소를 탭 순서에서 제거합니다.
• 현재 요소를 opacity: 1 및 visibility: visible로 설정하여 표시하고, aria-hidden 및 tabindex를 적절하게 업데이트합니다.

요약

visibility와 opacity를 함께 사용하면 더 나은 제어가 가능하며, 요소가 시각적으로 숨겨질 뿐만 아니라 상호작용할 수 없도록 하여 보조 기술에 맞게 적절히 관리됩니다. 이러한 접근 방식은 웹 표준 및 접근성 모범 사례와 일치합니다.