널리

안녕하세요, 엔비전스입니다. 오랜만에 웹접근성과 관련된 아티클을 작성하게 되었습니다.

이번 아티클에서는 접근성에서 빼 놓을 수 없는 초점 제공의 중요성과 초점 관리를 조금 더 쉽게 구현할 수 있도록 도움을 줄 수 있는 스크립트를 소개하려고 합니다.

웹 접근성과 초점 관리의 중요성

웹페이지는 다양한 콘텐츠와 상호 작용이 가능한 요소로 구성되어 있으며, 초점 관리가 잘못되면 다음과 같은 문제가 발생할 수 있습니다:

1. 사용자가 페이지 내 위치나 상호작용 영역을 파악하기 어려워집니다. 예를 들어, 버튼 클릭으로 특정 영역으로 스크롤되었을 때, 초점이 이전 영역에 머무른다면 사용자는 새로운 콘텐츠를 인지하지 못할 수 있습니다.
2. 콘텐츠 흐름에 따른 연속적인 탐색이 어려워집니다. 대화상자가 열렸을 때 초점이 이동되지 않으면 사용자는 대화상자의 존재를 알아차리지 못하며, 닫힌 후에도 초점이 복귀되지 않아 이전 요소를 찾기 어렵습니다.

위 문제는 초점 제공에 대한 너무나도 당연한 이야기입니다. 하지만 다음과 같은 질문이 제기될 수 있습니다:

1. aria-hidden true 속성 사용 시 초점을 보내주지 않아도 되지 않는지: 대화상자가 열렸을 때 aria-hidden true로 기존 영역이 숨겨지더라도, aria-hidden 속성이 초점까지 없애는 것은 아니기 때문에 초점이 여전히 대화상자를 여는 버튼에 위치해 있으면 대화상자의 표시 여부를 인지할 수 없습니다. 따라서 aria-hidden true와 초점 관리는 별개의 문제입니다.
2. Inert 속성 및 dialog 태그 사용: 따끈따끈한 HTML5의 <dialog> 요소를 지금 사용해보세요 아티클에서 설명한 바와 같이 네이티브 dialog 태그를 사용하면 초점이 자동으로 이동되므로 이슈가 없습니다. 그러나 다른 영역을 inert로 접근을 막더라도 초점을 보내주지 않으면, 특히 보이스오버를 사용하는 경우 화면 변화를 감지하지 못해 새로운 콘텐츠가 표시되었음을 인지하기 어려운 경우가 많습니다.

초점 관리의 번거로움과 PopupFocusRepeater의 해결 방안

초점을 옮기는 것 자체는 간단하지만, 페이지에 여러 대화상자나 팝업이 존재하는 경우 각각의 초점 관리가 번거로워집니다. 특히 초점을 옮기기 전에 딜레이를 주지 않으면 DOM 업데이트와 초점 이동 타이밍이 맞지 않아 초점이 의도한 대로 이동하지 않은 수 있습니다. 이러한 번거로움을 해소하기 위해 PopupFocusRepeater를 개발했습니다.

PopupFocusRepeater의 기능과 장점

PopupFocusRepeater는 자바스크립트로 구현된 유틸리티 함수로, 웹 페이지 내 커스텀 대화상자(dialog) 및 툴팁 형태의 미니 팝업의 접근성을 향상시키기 위해 설계되었습니다. 주요 기능은 다음과 같습니다:

1. 자동 포커스 이동: 대화상자를 여는 버튼 클릭 시, 자동으로 대화상자로 초점을 이동시킵니다.
2. 포커스 복귀: 대화상자 닫힘 시, 기존에 대화상자를 열었던 버튼으로 포커스를 되돌립니다.
3. 시맨틱 대화상자: 지정된 대화상자 컨테이너에 role dialog 속성을 추가하여 시맨틱한 대화상자를 구현합니다.
4. aria-label 자동 추가: 안드로이드 디바이스를 제외하고, 대화상자를 여는 버튼의 문자열을 가지고 와서 aria-label 속성을 자동으로 추가합니다. 안드로이드 TalkBack에서는 aria-label 속성이 들어가면 대화상자 콘텐츠를 읽지 못하는 버그가 있어, 이를 피하기 위해 안드로이드에서는 aria-label을 사용하지 않습니다.

사용 방법 및 결론

PopupFocusRepeater의 사용 방법은 별도의 포럼 팁 아티클을 통해 자세히 작성해 두었습니다. 해당 아티클을 참고하여 적용할 수 있습니다.