(웹접근성) 모바일 레이어 팝업 메뉴 포커스 이동
본문
모바일 화면에서 메뉴버튼을 터치하면 메뉴 레이업 팝업 열립니다.
1. 팝업이 열리면서 첫번째 메뉴에 포커스가 이동됩니다.
2. 탭을 누르면 1번 메뉴에서 2번메뉴로 차례로 이동됩니다.
3. 마지막 메뉴에서 탭을 누르면 "닫기(X)" 버튼으로 포커스가 이동됩니다.
그럼 여기서 질문입니다.
1. 닫기 버튼에서 탭(TAB)키를 입력시 메뉴 레이어가 닫혀야 하나요?
아니면, 첫번째 메뉴로 포커스가 이동이 되어야 하나요?
2. 첫번째 메뉴에서 "Shift + TAB"키 입력시 메뉴 레이어가 닫혀야 하나요?
아니면, "닫기(X)" 버튼으로 이동이 되어야 하나요?
3. 레이어 메뉴에서 "닫기(X)" 버튼을 선택하기 전에는 "TAB" 또는 "Shift + TAB"키를 입력시 메뉴레이어에서만 포커스가 이동이 되어야 하나요?
제 생각에는 닫기 버튼을 선택하기전까지는 레이어팝업에서 포커스가 유지되어야 한다고 생각하는데 닫기 버튼에서 TAB 입력시 레이어 팝업이 닫혀야 한다는 의견이 있었습니다.
답변 1
Tab 키는 초점 이동 기능입니다.
초점이동을 웹 접근성 가이드만 두고 해석을 하자면
키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
입니다.
tab 키로 초점이동을 하는 것이지 초점에 따라 어떤 액션을 할 필요가 없을 듯합니다.
초점 이동 시 창이 닫힌다면 실수로 초점 이동 시 창이 닫히므로,
다시 창을 여는 동작을 해야 합니다.
위 예시에서 shift+tab 누르면 x 버튼으로 이동이 되는데,
이때 창을 닫고 싶다면 space 키를 눌러서 닫으면 될 듯합니다.
자세한 설명 너무나 감사합니다.
