최악의 사례들로 배우는 캐러셀 접근성
안녕하세요. 엔비전스 입니다.
현대적인 웹사이트 또는 모바일 애플리케이션에는 마지 슬라이드 쇼처럼 자동으로 내용이 바뀌는 콘텐츠를 볼 수 있습니다. 국내에서는 이러한 요소를 이벤트나 중요한 공지사항을 홍보하는 용도로 사용하여 현수막이라는 의미의 배너(Banner)라는 표현을 사용하며, 해외에서는 콘텐츠를 반복적으로 돌아가면서 표시하는 것이 마치 회전목마 같다고 하여 캐러셀Carousel)이라고 부릅니다.
캐러셀 영역은 키보드로 웹페이지를 탐색하는 스크린 리더 사용자나 지체장애인 사용자에게 많은 이슈가 있습니다. 이번 아티클에서는 최악의 접근성 이슈를 가지고 있는 캐러셀 영역의 사례를 살펴보고, 이러한 점을 어떻게 고쳐야 하는지, 왜 그래야 하는지를 알아보도록 하겠습니다.
CASE 1: 가려진 이미지 링크에 초점 이동
수 많은 캐러셀에서 볼 수 있는 문제로 현재 표시 중인 슬라이드 링크 외의 가려진 링크를 스크린 리더의 가상 커서 탐색, 키보드의 초점 탐색이 가능한 최악의 상태입니다.
이 사례의 문제점은 무엇인가요?
보시는 바와 같이 목차 인디케이터와 이전, 다음 배너 버튼을 누르지 않고, Tab 키로 모든 링크에 초점이 가는 것을 볼 수 있습니다.
이러한 상태에는 다음과 같은 문제점이 있습니다.
- 개발자가 의도하지 않은 스크롤이 발생하여 외관상 문제가 생깁니다.
- 키보드 사용자는 현재 보이는 링크가 아님에도 탐색 되므로 불필요하게 Tab 키를 많이 눌러야 합니다..
- 스크린 리더 사용자는 가상 커서(NVDA의 Browse Mode)로 탐색할 때, 가상 커서에서 가려진 영역을 읽어서 불필요하게 많은 탐색을 요구합니다.
이 사례의 문제점은 어떻게 해결하나요?
가장 좋은 방법은 섬네일 링크를 하나만 쓰고, 슬라이드 효과를 CSS에서 배경화면의 위치 변경을 사용하여 조절하는 것이며, 링크의 텍스트와 href 속성이 전환될 때마다 바꾸는 것입니다.
만약, 단순히 사진이 변경되는 것이 아니라, 애니메이션 효과가 있는 캐러셀이라면 CSS 스타일링에서 조금 많은 수고가 필요하지만, 스크립트에서는 덜 복잡한 방식일 것입니다.
차선택으로는 현재 표시 중인 링크가 아니라면 aria-hidden=“true”와 tabindex=“-1” 속성을 추가하여 Tab 키와 가상 커서에서 접근이 되지 않도록 하는 방법입니다. 상대적으로 스크립트가 복잡해질 수 있습니다.
또는 display:none이나 visibility:hidden으로 현재 링크를 제외한 모든 요소를 숨기는 방법이 있으나, 이 방법을 사용하면 초점 관리에 각별한 주의를 기울여야 합니다.
스크롤 이동으로 이미지 링크 표시하는 방식이라면 모바일 스크린 리더에서의 스크롤 효과음이 지속해서 발생하는 단점이 생깁니다. 이 방법은 캐러셀이 여러 개 있는 페이지에서는 특히 이 방법을 추천하지 않습니다.
CASE 2: 자동 전환 정지가 불가능하거나 힘든 사례들
자동으로 내용이 전환되는 캐러셀 중의 가장 최악의 사례는 정지 버튼이 아예 존재하지 않는 것이며, 두 번째로는 재생, 정지를 할 수 있으나 접근하기 어려운 위치 또는 구조적으로 맞지 않는 위치에 제어 버튼이 있는 상태입니다.
자동 전환(재생) 중인 캐러셀은 스크린 리더 사용자와 키보드 사용자가 해당 영역을 탐색할 때 매우 치명적인 문제입니다. 캐러셀을 구현한 방법에 따라서는 특히나 더 치명적인 사례가 될 수도 있습니다. 이에 대해서는 아래 문제점에서 다루도록 합니다.
이 사례의 문제점은 무엇인가요?
스크린 리더 사용자나 키보드 사용자는 정적인 요소에 초점을 보내어 누르는 방식으로 웹을 탐색합니다. 그러나 자동으로 이미지 링크가 전환되는 캐러셀은 링크가 동적으로 바뀝니다. 이로 인해 캐러셀의 구현 방법에 따라 여러 문제가 생깁니다
숨겨진 이미지 링크에 머무는 초점
현재 캐러셀은 2번째 이미지 링크를 표시하고 있으나 스크린 리더 사용자나 키보드 사용자는 여전히 이전 배너에 머무르게 되는 문제가 생길 수 있습니다. 이는 첫 번째 사례와 연관성이 높으며, 개발자의 의도와는 다른 동작이 발생할 수 있습니다.
위 사례에서의 해결방안을 적용했으나 이 부분을 고치지 않으면 aria-hidden 속성으로 인한 가상 커서 버그가 발생합니다.
링크를 숨기는 방식에 따라 생기는 초점 초기화 문제
캐러셀의 이미지 링크를 자바스크립트의 DOM 메소드인 ParentElement.removeChild(childElement)로 요소를 삭제하거나, CSS에서 display:none, visibility:hidden 등으로 숨기는 형태라면 현재 초점을 받은 요소가 사라지기 때문에 키보드 초점이 머무를 곳을 잃습니다. 초점이 머무를 곳이 사라지면 웹 문서를 다시 탐색해야 하므로 매우 치명적인 문제가 됩니다.
정보를 습득하기에 너무 부족한 시간
캐러셀이 사용자의 의지와는 관계없이 전환되기 때문에 일정 시간이 지나기 전에 Enter 키를 누르지 않으면 원하는 링크를 선택하지 못하고, 새로 전환된 링크를 누르는 수밖에 없습니다. 특히 스크린 리더 사용자는 내용을 충분히 들을 시간이 부족하여 원하는 링크를 선택할 수 없을 것입니다.
이 사례의 문제점은 어떻게 해결하나요?
위에서 설명한 각 섹션의 문제점은 다음과 같이 해결 가능합니다.
PC 웹페이지 한정으로 이미지 링크의 컨테이너 요소에 focusin 이벤트를 사용하여 이미지 링크에 초점이 있을 때, 배너의 재생을 멈추는 방법을 사용할 수 있습니다.
하지만 모바일 웹페이지도 고려해야 한다면 반드시 재생/정지 버튼을 제공하고, 슬라이드 링크 앞에 해당 버튼을 배치해야 합니다. 재생/정지 버튼을 먼저 배치했다면 해당 문제가 생겨도 사용자가 대처할 방법을 제공하였기 때문에 접근성을 고려하였다고 볼 수 있으며, 문제점에서 소개한 두 가지의 초점 이슈에 대한 대안이 됩니다.
모바일 앱 개발에서는 스크린 리더 사용자 한정으로 사용자 휴대폰에서 접근성 기능이 켜져 있는지 확인할 수 있습니다.
iPhone이나 iPad 등의 애플 기기에서는 isVoiceOverRunning, 각종 Android 스마트 기기에서는 AccessibilityManager의 isTouchExplorationEnabled를 통해 스크린 리더 사용 여부를 감지할 수 있습니다.
이를 활용하여 스크린 리더를 감지하면 자동 전환 기능을 제공하지 않고, 버튼으로 탐색할 수 있게끔 앱을 다르게 표시할 수 있습니다.
다만, 역시나 키보드 사용자를 고려해야 하므로, 캐러셀 제어 버튼을 시작 전에 배치하는 것이 좋습니다.
이 해결 방법을 제공한다면 사람에 따라 다른 정보 습득에 필요한 시간을 충분히 제공할 수 있습니다.
CASE 3: 캐러셀 전환 알림이 없거나 부적절한 알림이 발생하는 캐러셀
캐러셀은 동적인 콘텐츠로 전환 시 스크린 리더 사용자에게 배너 내용을 알릴 필요가 있습니다. 이를 제공하지 않거나 부적절하게 제공하여 스크린 리더 사용자에게 불편을 주는 사례가 있습니다.
- 알림이 없는 캐러셀
인디케이터나 이전/다음 버튼을 눌러도 전환 알림이 없어 캐러셀 내용이 바뀌었는지 알 수 없는 캐러셀을 얘기합니다. - 부적절한 알림이 발생하는 캐러셀
사용자의 요구와는 관계없이 자동 재생 중인 배너의 내용을 수시로 읽어 다른 콘텐츠를 탐색하는 것을 방해하는 캐러셀을 얘기합니다.
이 사례의 문제점은 무엇인가요?
알림이 없는 캐러셀
우선, 알림이 전혀 없다면 스크린 리더 사용자는 캐러셀에 있는 이전이나 다음 버튼을 눌러 수동으로 다른 링크를 불러왔음에도 화면에 링크가 바뀌었는지 전혀 알 수가 없습니다. 따라서 캐러셀을 수동으로 조작할 때는 반드시 전환에 대한 알림이 있어야 합니다.
부적절한 알림이 발생하는 캐러셀
수동으로 버튼을 눌러 조작하지 않았음에도 캐러셀의 내용을 읽는 상태라면, 알림을 제공하였으나 부적절합니다. 사용자는 배너가 아닌 다른 부분을 읽고 있는 와중에, 지속해서 캐러셀의 내용을 알린다면 읽어야 하는 내용에 집중할 수 없을 것입니다.
이 사례의 문제점은 어떻게 해결하나요?
숨겨진 aria-live 영역을 두어 스크린 리더 사용자가 버튼을 눌러 수동 작업으로 배너를 전환했을 때만 링크 제목을 읽어야 합니다.
또한 aria-live는 assertive보다는 polite를 사용하여 먼저 읽고 있던 내용을 끊지 않고, 나중에 안내되게끔 해야 합니다.
CASE 4: 제어 버튼의 명확하지 않은 대체 텍스트와 상태 정보
캐러셀에는 재생 버튼을 포함한 링크의 목차를 버튼으로 제공하여 특정 목차를 눌러 표시하거나, 이전 목차 링크, 다음 목차 링크를 표시할 수 있는 제어 버튼이 있습니다.
그러나 이러한 제어 버튼의 대체 텍스트나 상태를 부적절하게 제공한 사례를 우리는 자주 접할 수 있습니다. 이 사례는 다음과 같이 세분화할 수 있습니다.
- 버튼의 기능을 전혀 알 수 없음
- 버튼의 기능을 알 수는 있으나 명확하지 않음
- 버튼의 상태/선택정보가 없거나 부적절함
이 사례의 문제점은 무엇인가요?
이 사례의 문제점은 다음과 같습니다.
버튼의 기능을 전혀 알 수 없음
대체 텍스트는 접근성의 기본이라고 할 수 있으며, 스크린 리더 사용자가 해당 UI를 이해하는 데 많은 영향을 끼칩니다.
이러한 대체 텍스트가 전혀 없어 스크린 리더 사용자에게 요소 유형만이 제공되는 상태를 얘기하며, 이 상태에서는 스크린 리더 사용자가 제어 버튼을 전혀 사용할 수 없습니다.
버튼의 기능을 알 수는 있으나 명확하지 않음
대표적으로 모바일 앱에서 많이 접할 수 있는 부분으로 스크린 리더에서는 개발할 때 사용한 요소 ID가 있는 상태라면 요소 ID를 읽게 설정할 수 있습니다. 하지만, 개방 당시의 ID이기 때문에 대부분 영어로 되어 있으며, 정상적인 레이블이 아니기 때문에 대체 텍스트로 취급해서는 안 됩니다. 또한 모든 모바일 스크린 리더 사용자가 객체 아이디를 읽게끔 설정하지 않으니 반드시 대체 텍스트를 달아야 합니다.
버튼의 상태/선택정보가 없거나 부적절함
캐러셀에는 상태 정보와 선택정보가 필요한 버튼이 다수 있습니다. 이는 다음과 같습니다.
- 재생 버튼
- 인디케이터 버튼
재생 버튼에는 현재 상태가 재생 중인지 정지 중인지를 상태로 나타내야 하며, 인디케이터 버튼의 경우 현재 선택된 인디케이터 버튼에 선택정보를 주어야 합니다. 하지만 이러한 상태 정보와 선택정보를 주지 않거나 일반적인 텍스트로 제공하여 스크린 리더 사용자가 버튼을 눌렀을 때의 상태 정보를 들을 수 없거나, 상태와 선택정보 자체가 없는 사례를 많이 접할 수 있습니다.
이 사례는 어떻게 해결하나요?
대체 텍스트를 적절하게 적어주어야 합니다. 버튼의 대체 텍스트는 버튼의 역할이나 목적(방향)을 명확히 해야 좋습니다.
- 다음 버튼이나 이전 버튼 등은 방향을 나타내고 있으나, 어떤 것에 대한 방향인지 알 수 없습니다. “다음 배너”, “이전 배너”와 같은 명확한 목적이 필요합니다.
- 재생 버튼은 단순 텍스트가 아니라 aria-label로 대체 텍스트를 제공하면 재생 버튼을 눌렀을 때, “정지” 등으로 바뀐 텍스트를 즉시 알 수 있습니다.
- 목차 인디케이터 버튼에는 aria-current를 사용하여 목차 버튼 중 현재 표시 중인 목차에 선택정보를 주는 것이 좋습니다.
마치며
웹 접근성 지침에서는 캐러셀과 같은 동적 콘텐츠에 발생할 수 있는 이슈에 대해 항목이 있으나 캐러셀은 완전한 웹 표준과 같은 기준이 존재하지 않습니다. 이 글도 마찬가지로 해결방안이 곧 정답은 아닐 것입니다. 다만 이 글을 통해 캐러셀의 접근성을 고찰하는 사람이 늘어나기를 기대하며 이번 아티클을 마칩니다.
더 좋은 내용으로 만나 뵐 수 있도록 노력하겠습니다. 감사합니다.