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.

의미 체계 소개

신체장애, 기술적 문제, 개인적인 선호도(키보드 전용으로 설정) 등 이유를 불문하고, 마우스나 포인팅 기기를 사용할 수 없는 사용자라도 불편 없이 사이트를 이용할 수 있도록 하는 방법을 살펴보았습니다. 이를 위해서는 세심한 주의와 배려가 필요하지만 처음부터 이런 환경을 계획하고 개발 작업을 시작하면 큰 부담을 느낄 만한 작업이 아닙니다. 기본적인 작업이 끝났다면 드디어 완벽하게 액세스 가능하고 더욱 세련된 사이트의 완성에 이르는 장도에 당당히 오른 셈입니다.

이번 과정에서는 기본 작업을 바탕으로 계속 진행하면서 화면을 볼 수 없는 빅터 타란(Victor Tsaran) 씨와 같은 사용자를 지원하는 웹사이트를 빌드하는 방법을 비롯한 다른 접근성 요인에 대해 생각해보겠습니다.

먼저 정보에 원활하게 접근할 수 없는 장애를 지닌 사용자의 정보 접근에 도움을 주는 스크린 리더와 같은 도구를 일반적으로 지칭하는 용어인 보조 기술의 배경을 잠시 살펴볼 것입니다.

그 다음, 일반적인 사용자 환경의 개념을 살펴보고 이를 바탕으로 보조 기술 사용자의 환경에 대해 더 심층적인 내용을 알아보겠습니다.

마지막으로, 이런 사용자에게 적합한 환경을 만들기 위해 HTML을 효과적으로 사용하는 방법과 이것이 우리가 앞서 포커스를 다룬 방식과 어떻게 상당 부분 겹치는지 살펴보겠습니다.

보조 기술

보조 기술은 장애인이 어떤 작업을 완수하는 데 도움이 되는 각종 기기, 소프트웨어, 도구 등을 통칭하는 포괄적 용어입니다. 보조 기술을 가장 폭넓게 해석하자면, 보행을 돕는 목발이나 작은 글씨를 읽기 위한 돋보기 같은 단순 기술을 뜻할 수도 있고 로봇 팔이나 스마트폰의 이미지 인식 소프트웨어 같은 첨단 기술을 가리킬 수도 있습니다.

목발, 돋보기, 로봇 작동 의수를 포함한 보조 기술의
예

보조 기술은 브라우저 확대/축소처럼 일반적인 기술이나 맞춤 설계한 게임 컨트롤러처럼 특수한 기술을 포괄할 수 있습니다. 점자 디스플레이와 같은 별개의 물리적 기기일 수도 있고, 음성 컨트롤처럼 완전히 소프트웨어적으로 구현한 기술일 수도 있습니다. 스크린 리더처럼 운영체제 내장 기술일 수도 있고, Chrome 확장 프로그램과 같은 부가기능일 수도 있습니다.

브라우저 확대/축소, 점자 디스플레이, 음성 컨트롤을 포함한 더욱 다양한 보조 기술의
예

보조 기술과 일반적인 기술의 경계는 모호하며, 결국은 어떤 과제를 해결하려는 사람을 보조하는 모든 기술을 보조 기술이라 할 수도 있겠습니다. 그리고 '보조' 기술의 범주에 추가되거나 제외되는 일도 흔합니다.

예를 들어, 초창기 상용 음성 합성 제품 중에 시각장애인을 위한 말하는 계산기가 있었습니다. 하지만 지금은 운전할 방향 지시부터 가상 도우미까지 곳곳에서 음성 합성 기술이 활용되고 있습니다. 반대로, 원래는 일반용으로 개발한 기술이 보조 기술로 더 적극적으로 활용되는 사례도 있습니다. 예를 들어, 시력이 나쁜 사람은 스마트폰의 카메라 줌 기능을 사용해 실제로는 작은 물체를 확대해서 좀 더 정확하게 알아볼 수 있을 것입니다.

웹 개발의 맥락에서는 다양한 기술을 고려해야 합니다. 사람들은 웹 페이지의 기본 인터페이스를 조정하여 각자 자신이 편리하게 사용할 수 있는 인터페이스로 만들어 웹사이트를 이용할 수 있습니다. 예컨대 스크린 리더, 점자 디스플레이, 화면 돋보기, 음성 컨트롤, 스위치 기기, 기타 다양한 형식의 보조 기술 등 다양한 수단을 사용합니다.

이런 보조 기술 중 다수는 프로그램 방식으로 표현된 의미 체계를 바탕으로 액세스 가능한 사용자 환경을 만들며, 이번 과정에서 다룰 대부분의 내용이 바로 이 주제에 관한 것입니다. 하지만 프로그램 방식으로 표현된 의미 체계를 설명하기 전에 먼저 어포던스(affordance)에 대한 얘기부터 해야 합니다.

어포던스

인공 도구나 기기를 사용할 때 대개 그 형태와 디자인을 보면 용도와 사용법을 어느 정도 파악할 수 있습니다. 어포던스는 사용자가 어떤 작업을 수행할 기회를 제공하거나 허용하는 객체를 말합니다. 어포던스를 훌륭하게 디자인할수록 그 용도나 사용법을 더욱 명확하고 직관적으로 이해할 수 있습니다.

주전자나 티포트를 예로 들 수 있습니다. 즉, 주전자나 티포트를 한 번도 본 적이 없더라도 주둥이가 아니라 손잡이를 잡고 들어 올려야 한다는 점을 쉽사리 알아차릴 수 있습니다.

손잡이와 주둥이가 있는 티포트

그것이 바로 어포던스가 물뿌리개, 음료수 병, 커피 머그잔 등의 다른 물건에서 본 것과 비슷한 모습으로 되어 있는 이유입니다. 물론 어쩌다 주둥이를 잡고 들어 올릴 수도 있겠지만, 유사한 어포던스를 사용한 경험에 비추어 손잡이를 잡는 게 더 낫다는 점을 금방 깨닫게 될 것입니다.

그래픽 사용자 인터페이스에서는 어포던스가 사용자가 취할 수 있는 동작을 나타내지만, 물리적 객체와 상호 작용하는 것이 아니므로 모호하게 느껴질 수 있습니다. 따라서 GUI 어포던스는 분명하게 그 용도가 드러나도록 디자인합니다. 즉, 버튼, 체크박스, 스크롤바와 같은 어포던스는 가능한 한 따로 습득하지 않더라도 그 용도를 사용자에게 전달할 수 있어야 합니다.

예를 들어, 흔한 형태의 요소(어포던스)의 용도를 다음과 같이 바꾸어 말할 수 있을 것입니다.

  • 라디오 버튼 — '여러 옵션 중 하나를 선택할 수 있습니다.'
  • 체크박스 — '이 옵션에 대해 '예'나 '아니요'를 선택할 수 있습니다.'
  • 텍스트 필드 — '이 영역에는 뭔가를 입력할 수 있습니다.'
  • 드롭다운 — '이 요소를 열어 옵션을 표시할 수 있습니다.'

이런 요소를 볼 수 있다는 이유만으로 이들 요소에 대한 결론을 도출할 수 있습니다. 당연히 어떤 요소가 제공하는 시각적 암시를 볼 수 없는 사람은 그 의미를 이해하거나 어포던스의 역할을 직관적으로 알아챌 수 없습니다. 따라서 사용자의 필요에 맞춰 다른 인터페이스를 생성할 수 있는 보조 기술을 통해 액세스하기에 충분히 융통성 있게 정보를 표현해야 합니다.

어포던스의 용도를 시각적 방법 이외의 방법으로 노출하는 것을 의미 체계라 부릅니다.

스크린 리더

널리 쓰이는 보조 기술의 한 유형이 바로 스크린 리더입니다. 화면의 텍스트를 합성 음성으로 큰소리로 읽어주어 시력이 나쁜 사람도 컴퓨터를 원활히 사용할 수 있도록 도와주는 프로그램입니다. 사용자는 키보드로 적절한 영역으로 커서를 움직여 스크린 리더가 읽어줄 내용을 지정할 수 있습니다.

빅터 타란 씨에게 시각장애인으로서 OS X에서 VoiceOver라는 기본 제공 스크린 리더를 사용해 웹에 액세스하는 방법을 설명해 달라고 부탁했습니다. 빅터가 VoiceOver를 사용하는 모습을 담은 동영상을 보시면 금방 이해될 것입니다.

자, 이제 직접 스크린 리더를 사용해볼 차례입니다. 아래에서 아주 단순하지만 최소한의 기능을 자바스크립트로 구현한 스크린 리더인 ChromeVox Lite가 있는 페이지로 이동할 수 있습니다. 시력이 나쁜 사용자와 비슷한 체험을 할 수 있도록 화면은 일부러 흐리게 처리했습니다. 따라서 사용자는 과제를 완수하려면 스크린 리더를 사용할 수밖에 없을 것입니다. 물론, 이런 환경을 체험하려면 Chrome 브라우저를 사용해야 합니다.

ChromeVox lite 데모 페이지

화면 아래쪽의 제어판을 사용하여 스크린 리더를 제어할 수 있습니다. 이 스크린 리더는 최소한의 기능만 갖추고 있지만 PreviousNext 버튼을 사용해 콘텐츠를 탐색하고 Click 버튼을 사용해 클릭할 수 있습니다.

ChromeVox lite를 사용 설정한 상태에서 이 페이지를 사용해 보면 스크린 리더를 사용할 때의 느낌을 알 수 있을 것입니다. 스크린 리더 또는 다른 보조 기술은 실제로 프로그램 방식으로 표현된 의미 체계를 기반으로 사용자에게 완벽한 대체 사용자 환경을 만들어준다는 사실을 잘 생각해보세요. 스크린 리더는 시각적 인터페이스 대신에 청각적 인터페이스를 제공합니다.

스크린 리더가 각 인터페이스 요소에 대한 정보를 어떤 식으로 알려주는지 귀담아 들어보세요. 제대로 디자인한 스크린 리더라면 화면에 표시되는 각종 요소에 대한 다음과 같은 정보를 전부 또는 최소한 대부분을 말해줘야 합니다.

  • 지정한 요소의 역할 또는 유형(요소를 지정해야 함)
  • 요소에 이름이 있을 경우 요소의 이름(요소에 이름이 있어야 함)
  • 요소에 값이 있을 경우 요소의 (요소에 값이 있을 수도, 없을 수도 있음)
  • 요소의 상태. 예: 사용 또는 중지 여부(해당될 경우)

스크린 리더는 네이티브 요소가 기본 제공 접근성 메타데이터를 포함하고 있기 때문에 이런 대체 UI를 생성할 수 있습니다. 렌더링 엔진이 네이티브 코드를 사용해 시각적 인터페이스를 생성하는 것과 마찬가지로, 스크린 리더는 DOM 노드에서 메타데이터를 사용하여 이와 같이 액세스 가능한 버전을 생성합니다.

스크린 리더는 DOM을 사용하여 액세스 가능한 노드를
생성함