키보드 사용 보장 & 초점 이동

비장애인들은 마우스를 사용하여 쉽게 웹 페이지를 탐색하지만, 마우스를 사용하지 못하는 키보드 사용자는 키보드로 웹 페이지를 탐색한다. 따라서 웹 페이지에서 제공하는 모든 기능을 키보드만으로도 사용할 수 있도록 제공해야 한다. 즉, 마우스로 조작 가능한 기능과 키보드로 조작 가능한 기능이 동일하도록 구현해야 한다. 키보드 사용 보장에 대한 사례들을 살펴보도록 하겠다.

 

---

 

사례에 따른 해결 방안

• 마우스 오버 시 드롭 다운 메뉴가 노출
  
  • 키보드 접근 시에도 드롭 다운 메뉴가 노출되고 메뉴에 접근 가능하도록 구현
• 자동 롤링 콘텐츠에 마우스 오버 시 전체 콘텐츠가 노출
  
  • 키보드 접근 시에도 전체 콘텐츠가 노출되도록 구현
• 특정 버튼에 마우스 오버 시 레이어 노출
  
  • 키보드 접근 시에도 레이어가 노출되도록 구현
• 이미지 또는 초점을 받을 수 없는 요소에 마우스 이벤트 적용
  
  • 마우스로 조작 가능한 컨트롤의 경우 되도록 a링크나 버튼과 같이 초점을 받을 수 있는 요소로 구현
• a 링크 요소에 href 속성이 없는 경우
  
  • 마우스로는 조작이 가능하지만 키보드 접근은 불가능. 따라서 a링크에는 href 속성을 반드시 제공
• a 링크에 href 속성은 있지만 onfocus="this.blur();" 가 적용이 되어 있는 경우
  
  • 초점을 초기화 시켜 이후 콘텐츠로 키보드 접근이 불가능하므로 onfocus="this.blur();" 제거하고 구현
• 키보드가 함정에 빠져 더 이상 키보드 접근이 되지 않는 경우
  • 키보드가 함정에 빠지지 않고 마우스 사용시와 동일하게 접근 가능하도록 구현

 

---

 

키보드만을 사용함에 있어 그 사용성을 보장함과 연계되어 필수적으로 이루어져야 하는 작업이 존재한다. 바로 '초점 이동' 이다. 필자 역시 제공중인 서비스에 대해 키보드 초점의 이동을 제대로 보장하지 못하여 불편함을 몸소 증명하였다. 여기서 말하는 초점 이동이란 무엇인지 알아보도록 하자.

 

---

 

논리적 초점 이동
초점은 일반적으로 좌에서 우, 상에서 하로 이동할 것이라고 예측한다. 스크린리더 사용자와 키보드 사용자 모두 초점이 논리적으로 이동해야 웹 페이지를 탐색하는데 어려움이 없다. 따라서 초점 이동은 논리적 구조로 마크업하여 사용자가 예측하는 이동 순서와 일치해야 한다.

예를 들어, 초점 이동이 아이디 입력, 비밀번호 입력, 로그인 버튼, 아이디 저장 순서이면 로그인 버튼을 먼저 클릭하기 때문에 아이디 저장을 못할 가능성이 있다. 따라서 아이디, 비밀번호 입력 후 아이디 저장에 먼저 초점이 이동했다가 로그인 버튼으로 논리적으로 초점이 이동해야 한다.

 

• tabindex
  • 추가적으로 tabindex 속성을 이용하여 초점 이동을 강제로 변경하는 경우도 오류로 볼 수 있다.
  • 기본적으로 마크업이 논리적으로 이루어져 있다면 굳이 tabindex를 사용할 이유는 없다.
  • 참고 : https://nuli.navercorp.com/community/article/1132726?email=true
• 레이어 팝업
  
  • 초점 이동 순서는 다음과 같아야 한다. 레이어 팝업 노출시키는 컨트롤 > 레이어 팝업 내부 > 레이어 팝업 닫기 > 레이어 팝업 노출시키는 컨트롤
  • 오류 사례에서는 보통 초점이 레이어 내부로 가지 않고 노출만 시킨 상태로 다음 컨트롤로 이동하기 때문에 초점이 레이어 뒤로 가서 가려지는 경우가 있다.
  • 초점이 보이지 않으면 키보드 사용자는 페이지를 잘 이용할 수 없으므로 논리적으로 초점을 이동시켜야 한다.

 

---

 

초점 표시
마우스가 아닌 키보드로 웹을 사용하는 분들은 초점이 어디에 위치하는지 알 수 있어야 한다. 시각적으로 초점이 보이지 않으면 어디에 초점이 있는지 알 수가 없어서 컨트롤을 선택할 수 없다. 따라서 키보드 접근 시 해당 컨트롤이 초점을 받았음을 시각적으로 구별할 수 있어야 한다. "hideFocus" 적용하거나 CSS에서 "outline:none" 처리를 하거나 8번 키보드 사용 보장에서 언급했던 onfocus="this.blur();" 를 사용하면 전부 초점이 보이지 않게 되어 주의하셔야 한다.

 

 

 

---

 

 

 

[ 출처 ]

BoostCourse 웹 UI 개발 : https://www.boostcourse.org/web344/lecture/35113

BoostCourse 웹 UI 개발 : https://www.boostcourse.org/web344/lecture/35114