The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

포커스 소개

이번 과정에서는 포커스에 대해 소개하고 애플리케이션에서의 포커스 관리 방법을 다루겠습니다. 포커스는 화면에서 어떤 컨트롤(예: 필드, 확인란, 버튼 또는 링크)이 현재 키보드 입력을 받는지, 또는 콘텐츠를 붙여넣는 경우라면 클립보드에서 입력을 받는지를 지칭합니다.

키보드 사용법은 누구나 잘 알고 있어 적절하게 관련된 테스트를 손쉽게 수행할 수 있고 거의 모든 사용자에게 이익이 되는 일이므로, 접근성에 대한 학습을 시작하기에 더없이 좋은 주제라 할 수 있습니다.

영구마비 장애인부터 손목을 삐어 불편한 환자까지, 영구적 또는 일시적 운동 장애가 있는 사용자가 키보드나 스위치 기기에 의존해 웹 페이지를 탐색하는 경우도 많습니다. 따라서 이런 사용자까지 배려한 사용 환경을 제공하도록 적절한 포커스 전략을 적용하는 것이 중요합니다.

다양한 단축키를 훤히 꿰고 있는 고급 사용자라면 키보드만으로 웹사이트를 빠르게 탐색할 수 있을 것이고, 생산성도 더 높아질 겁니다.

따라서 포커스 전략을 잘 구현한 애플리케이션의 사용자 모두가 더 나은 경험을 누릴 수 있습니다. 앞으로 진행할 과정에서 적절한 포커스 구현에 기울이는 노력이 보조공학 기술 사용자, 실은 모든 사용자를 지원하기 위한 중요한 기초라는 사실을 알 수 있을 것입니다.

포커스란?

포커스란 웹 페이지에서 어떤 순간에 키보드를 눌렀을 때 반응하는 위치를 결정하는 요소입니다. 예를 들어, 텍스트 입력란에 포커스를 두고 입력하기 시작하면 입력란은 키보드 이벤트를 수신하여 사용자가 입력하는 문자를 표시하게 됩니다. 입력란은 포커스가 있는 상태에서 클립보드에서 붙여넣는 입력 문자도 수신합니다.

텍스트 입력란에 키보드 포커스가 있음

현재 포커스를 맞춘 항목은 흔히 포커스 링으로 표시되는데, 각 브라우저 고유의 스타일과 페이지 작성자가 적용한 스타일에 모두 영향을 받습니다. 예를 들어, Chrome에서는 보통 포커스가 있는 요소를 파란색 테두리로 강조표시하는 반면, Firefox에서는 파선 테두리로 강조표시합니다.

가입 버튼

거의 전적으로 키보드나 다른 입력 기기로만 컴퓨터를 조작하는 사용자도 있습니다. 이런 사용자에게는 포커스가 화면 상의 모든 요소에 도달하기 위한 기본 수단이므로 극히 중요합니다. 이런 이유 때문에, 섹션 2.1.1의 Web AIM 검사 목록에는 자유형 그리기처럼 키보드로는 할 수 없는 작업이 아닌 한 키보드로 모든 페이지 기능을 사용할 수 있어야 한다고 명시되어 있습니다.

사용자는 Tab, Shift+Tab 또는 화살표 키를 사용해 현재 어떤 요소에 포커스를 둘지 제어할 수 있습니다. Mac OSX에서는 포커스의 작동 방식이 약간 다릅니다. Chrome에서는 항상 Tab으로 탐색할 수 있지만 Safari 등의 다른 브라우저에서는 포커스를 변경하려면 Option+Tab을 눌러야 합니다. 필요하다면 System Preferences의 Keyboard 섹션에서 이 설정을 변경할 수 있습니다.

키보드 기본 설정 대화상자

포커스가 Tab을 통해 대화형 요소 사이를 앞뒤로 움직이는 순서를 탭 순서라 부르는 건 당연합니다. 논리적인 탭 순서에 따른 페이지 디자인은 중요한 단계로, 이후 따로 설명하겠습니다.

'포커스 가능'하다는 의미는?

텍스트 입력란, 버튼, 선택 목록처럼 내장된 대화형 HTML 요소는 암시적으로 포커스 가능합니다. 즉, 이런 요소는 탭 순서에 자동으로 삽입되며 개발자가 따로 손대지 않아도 키보드 이벤트 처리 기능이 기본 제공된다는 뜻입니다.

암시적으로 포커스 가능한 입력란

하지만 모든 요소가 포커스 가능한 것은 아닙니다. 단락, div, 기타 다양한 페이지 요소는 페이지를 탭 이동할 때 포커스되지 않도록 되어 있습니다. 일반적으로 사용자가 이런 요소와 상호 작용할 수 없는데 포커스를 둘 필요가 없기 때문입니다.

모든 요소가 포커스 가능하지는 않음

포커스의 구현 실례

포커스 기법 몇 가지를 실제로 사용해 봅시다. Chrome을 사용하여 실습용으로 마련한 항공사 사이트 모의 페이지로 가서 키보드 입력만 이용해 특정 항공권을 검색합니다. 이 페이지에서는 마우스 입력이 통하지 않습니다. 키보드로 입력하지 않고 얼렁뚱땅 넘어갈 수 없다는 뜻이죠. 여러분을 못 믿는 건 아니지만 말이죠. ^^

항공사 모의 사이트

항공권과 관련해 다음 사항을 지정해야 합니다.

  • 편도
  • 멜버른행
  • 2017년 10월 12일(2017/10/12) 출발
  • 2017년 10월 23일(2017/10/23) 도착
  • 창가 좌석
  • 판촉 행사 정보는 받지 않음

입력 오류 없이 양식을 완성하고 Search 버튼을 누르면 양식에 입력한 내용이 지워지고 재설정됩니다. 계속 진행해 양식을 완성한 후 다시 돌아옵니다.

양식에 키보드 입력이 어떻게 사용되는지 살펴봅시다. 처음에 몇 차례 Tab을 누르면 브라우저에서 Flights, Hotels 및 Rental Cars 탐색 항목이 강조표시됩니다. Tab을 계속 누르면 화살표 키로 Round Trip, One Way 또는 Multi City 중에서 선택할 수 있는 라디오 버튼 그룹으로 이동하게 됩니다.

이름 및 주소 입력란으로 계속 진행하면서 필요한 정보를 채웁니다. 목적지 선택 요소에 이르면 화살표 키로 도시를 선택할 수도 있고, 자동 완성 기능을 활용해 첫 몇 글자를 타이핑하여 입력란에 나타나는 알맞은 항목을 선택할 수도 있습니다. 날짜 입력란에서도 마찬가지로 화살표 키를 사용하거나 날짜를 직접 입력하면 됩니다.

좌석 유형 역시 화살표 키로 선택하거나, 'w', 'a' 또는 'n'을 입력해 원하는 좌석 옵션으로 바로 이동할 수 있습니다. 그런 다음, 판촉 행사 정보 수신 확인란에서 스페이스바를 누르면 판촉 행사 정보 수신을 기본적으로 거부 설정할 수 있습니다. 마지막으로, Search 버튼에 포커스를 두고 Enter 키를 눌러 양식을 제출합니다.

마우스를 전혀 사용하지 않고 키보드만으로 양식에 필요한 정보를 전부 넣고 제출할 수 있으므로 무척 편리합니다. 양식에 사용하는 요소는 전부 암시적 포커스가 있는 네이티브 HTML 태그이므로 키보드만으로도 아무런 문제 없이 양식을 완성할 수 있습니다. 포커스를 추가하거나 관리하려고 따로 코드를 작성할 필요도 없습니다.