레이어 팝업 - 키보드 접근성.

- naradesign.net 스크랩 내용

 

 

일반적으로 레이어 열기/닫기 인터페이스는 다음과 같은 방식으로 처리하고는 하죠. 하지만 보통은 키보드 접근성 문제가 발생합니다.

통상적인 레이어 열기/닫기 예: http://codepen.io/naradesign/pen/eynbo

레이어 열기/닫기 UI의 키보드 접근성 문제

1. 레이어가 열리는 순간 초점 순서 오류: 앵커를 클릭 또는 엔터를 입력한 이후에 키보드 초점은 여전히 앵커에 머물러 있습니다. 열린 레이어로 키보드 초점이 이동해야 하는데 인위적으로 초점을 옮겨주지 않으면 여전히 앵커에 초점이 머뭅니다. 열리는 레이어가 앵커 바로 다음에 등장하는 경우라면 순서에 문제가 없지만 앵커와 레이어가 서로 다른 위치에 존재하는 경우 인위적으로 초점을 옮겨주지 않으면 키보드 초점은 엉뚱한 곳을 탐색하게 되므로 오류에 빠지게 됩니다. 모든 브라우저가 이렇게 동작합니다.
2. 레이어가 닫히는 순간 키보드 트랩: 열린 레이어를 닫으려고 레이어 닫기 버튼을 클릭하거나 엔터를 입력하면 레이어가 사라져 버리기 때문에 키보드 초점은 페이지 처음으로 돌아가 버리는 브라우저가 있습니다. IE 6~10 브라우저가 이렇게 동작합니다. 대부분의 표준 브라우저들은 닫힌 레이어 이후부터 키보드 초점을 받을 수 있도록 정상적으로 처리합니다.

레이어가 열리는 순간 초점 순서를 바로잡는 방법

키보드 초점을 논리적인 순서대로 진행하도록 만들기 위해 앵커 클릭 후 레이어가 열리는 순간 초점을 레이어로 옮기는 예시를 만들어 봤습니다.

앵커 클릭하면 레이어로 초점 옮기기: http://codepen.io/naradesign/pen/brwuj

1. 앵커를 클릭하면 타겟 레이어에 tabindex=”0″ 속성이 들어가면서 초점을 받을 수 있는 상태가 된다.
2. 레이어의 상태를 display:block 으로 만든다.
3. 레이어에 focus를 넣는다.

이렇게 처리하면 앵커와 레이어 중간에 존재하는 엉뚱한 맥락의 다른 콘텐츠를 탐색하게 되는 키보드 초점 오류를 방지할 수 있습니다. 하지만 문제는 여전히 존재합니다. 레이어를 닫을 때 초점이 머물던 요소가 사라지면서 IE 6~10 브라우저는 키보드 초점을 페이지 맨 처음으로 돌려놓습니다. 이것 때문에 키보드 트랩에 빠지게 되는 것입니다. 레이어 이후의 항목을 탐색할 수 없게 되는 문제가 발생합니다.

레이어가 닫히는 순간 키보드 트랩에서 빠져나오기

이 문제를 해결하려면 레이어가 닫힐 때 논리적으로 납득할만한 위치로 초점을 옮겨야만 했습니다. 대부분의 최신 브라우저들(크롬, 파이어폭스, 사파리, 오페라)은 키보드 초점이 머물던 요소가 사라지는 경우 레이어 이후의 맥락을 탐색할 수 있도록 키보드 초점이 자연스럽게 처리가 됩니다. 하지만 IE 6~10 브라우저는 그렇지 못했기 때문에 문제가 됩니다. 또한 레이어의 위치가 문맥에 맞지 않게 엉뚱한 곳에서 펼쳐지는 경우에는 표준 브라우저도 여전히 엉뚱한 위치로부터 탐색을 시작하기 때문에 문제가 됩니다.

자바스크립트 내공이 없어서 이 문제를 끙끙 앓다가 트위터와 페이스북에 도움을 요청했는데요. 몇몇 지인 분들께서 제가 작성한 코드를 보완해 주셨습니다. 레이어를 닫을 때 레이어를 열었던 앵커로 초점을 옮겨주는 방식입니다.

• Johan Kim: http://codepen.io/anon/pen/qgGDa
• Taegyu Yoo: http://codepen.io/anon/pen/IgFEu | http://codepen.io/anon/pen/Dpaxj
• @fallroot: http://codepen.io/fallroot/pen/pqaKv
• 나인환: http://codepen.io/anon/pen/oqLFx
• 이원민: http://goo.gl/SZbEl

레이어팝업_키보드접근성.html