의미 체계 및 보조 기술 소개
지금까지 신체적 장애, 기술적 문제, 개인적 선호 등으로 인해 마우스나 포인팅 기기를 사용할 수 없는 사용자도 키보드만 사용할 수 있도록 사이트를 만드는 방법을 살펴보았습니다. 세심한 주의와 생각이 필요하지만 처음부터 계획을 세우면 그리 많지 않습니다. 기본적인 작업을 마쳤다면 이제 완벽히 액세스할 수 있고 더욱 세련된 사이트로 이동할 수 있습니다.
이 강의에서는 이러한 작업을 바탕으로 다른 접근성 요소(예: 화면을 볼 수 없는 빅터 차란과 같은 사용자를 지원하는 웹사이트 구축 방법)에 대해 생각해 봅니다.
먼저 정보에 액세스하지 못하도록 하는 장애가 있는 사용자를 돕는 스크린 리더와 같은 도구를 일반적으로 지칭하는 용어인 보조 기술에 관해 배경지식을 살펴봅니다.
다음으로 몇 가지 일반적인 사용자 환경 개념을 살펴보고 이를 바탕으로 보조 기술 사용자의 환경을 보다 자세히 살펴보겠습니다.
마지막으로 HTML을 효과적으로 사용하여 이러한 사용자에게 좋은 환경을 만드는 방법을 알아보고, HTML이 앞서 포커스와 어떻게 다른지 살펴봅니다.
보조 기술
보조 기술은 장애가 있는 사람이 작업을 완료하는 데 도움이 되는 기기, 소프트웨어, 도구를 포괄적으로 가리키는 용어입니다. 광범위하게 보자면, 보행용 목발이나 읽기를 위한 돋보기와 같은 단순한 기술이나 로봇 팔이나 스마트폰의 이미지 인식 소프트웨어와 같은 첨단 기술이 될 수 있습니다.
보조 기술에는 브라우저 확대/축소와 같은 일반적인 기술 또는 맞춤 설계된 게임 컨트롤러와 같은 특수한 기술이 포함될 수 있습니다. 점자 디스플레이와 같은 별도의 물리적 기기일 수도 있고 음성 제어와 같은 소프트웨어로만 구현할 수도 있습니다. 스크린 리더와 같은 운영체제에 내장되어 있을 수도 있고 Chrome 확장 프로그램과 같은 부가기능일 수도 있습니다.
보조 기술과 일반적인 기술의 경계는 모호합니다. 결국 모든 테크는 어떤 작업을 하는 사람을 지원하기 위한 것입니다. 그리고 '보조' 기술로 분류되는 경우도 많습니다.
예를 들어 초창기 상용 음성 합성 제품 중 하나는 시각장애인을 위한 말하기 계산기였습니다. 이제 운전 경로부터 가상 어시스턴트에 이르기까지 여기 곳곳에서 음성 합성이 활용되고 있습니다. 반대로 원래는 범용이었던 기술이 보조적인 기술로 발전하는 사례가 많습니다. 예를 들어 시력이 좋지 않은 사람들은 스마트폰의 카메라 확대/축소 기능을 사용하여 실제 세상의 작은 물체를 좀 더 자세히 볼 수 있습니다.
웹 개발의 맥락에서는 다양한 기술을 고려해야 합니다. 사용자는 스크린 리더, 점자 디스플레이, 화면 돋보기, 음성 제어, 스위치 기기 또는 페이지의 기본 인터페이스를 조정하여 더 구체적인 인터페이스를 만드는 기타 형태의 보조 기술을 사용하여 웹사이트와 상호작용할 수 있습니다.
이러한 보조 기술의 대부분은 프로그래매틱 방식으로 표현된 시맨틱스를 사용하여 액세스 가능한 사용자 환경을 만드는데, 이 과정의 내용이 대부분입니다. 하지만 프로그래매틱 방식으로 표현된 의미 체계를 설명하기 전에 먼저 어포던스에 관해 이야기해야 합니다.
어포던스
인공 도구나 기기를 사용할 때 일반적으로 도구나 기기의 기능과 작동 방식을 파악하기 위해 그 형태와 디자인을 확인합니다. 어포던스는 사용자에게 작업을 실행할 기회를 제공하거나 제공하는 모든 객체입니다. 어포던스를 잘 디자인할수록 그 사용이 더 분명하거나 직관적입니다.
주전자나 찻주전자가 대표적인 예입니다. 찻주전자를 본 적이 없더라도 주둥이가 아닌 손잡이를 잡고 들어 올려야 한다는 것을 쉽게 알 수 있습니다.
이는 어포던스가 물뿌리개, 음료수 병, 커피 머그잔 등 다른 많은 물건에서 본 것과 유사하기 때문입니다. 아마도 주둥이로 화분을 집어 드는 가능성이 있지만 유사한 어포던스를 사용한 경험으로 볼 때 핸들을 선택하는 것이 더 낫습니다.
그래픽 사용자 인터페이스에서 어포던스는 실행할 수 있는 작업을 나타내지만 상호작용할 물리적 객체가 없기 때문에 모호할 수 있습니다. 따라서 GUI 어포던스는 특히 명확하도록 설계되었습니다. 즉, 버튼, 체크박스, 스크롤바는 가능한 한 적은 학습으로 사용법을 전달해야 합니다.
예를 들어 일반적인 형식 요소(어포던스)의 사용을 다음과 같이 바꾸어 말할 수 있습니다.
- 라디오 버튼 — '옵션 중 하나를 선택할 수 있습니다.'
- 체크박스 — '이 옵션에 대해 '예' 또는 '아니요'를 선택할 수 있습니다.'
- 텍스트 필드 — '이 영역에 무언가를 입력할 수 있습니다.'
- 드롭다운 — '이 요소를 열어 옵션을 표시할 수 있습니다.'
이러한 요소를 볼 수 있다는 이유만으로 이러한 요소에 관한 결론을 도출할 수 있습니다. 당연히 요소에서 제공하는 시각적 단서를 볼 수 없는 사람은 요소의 의미를 이해하거나 어포던스의 가치를 직관적으로 파악할 수 없습니다. 따라서 사용자의 필요에 맞는 대체 인터페이스를 구성할 수 있는 보조 기술을 통해 액세스할 수 있을 정도로 정보를 유연하게 표현해야 합니다.
어포던스의 용도를 비시각적으로 노출하는 것을 시맨틱스라고 합니다.
스크린 리더
널리 사용되는 보조 기술 유형 중 하나가 스크린 리더입니다. 스크린 리더는 시각장애인이 생성된 음성으로 화면 텍스트를 소리 내어 읽어 컴퓨터를 사용할 수 있도록 하는 프로그램입니다. 사용자는 키보드로 관련 영역으로 커서를 이동하여 읽을 내용을 제어할 수 있습니다.
Google에서는 빅터 차란에게 시각장애인으로서 OS X에 내장된 스크린 리더인 VoiceOver를 사용해 웹에 액세스하는 방법을 설명해 달라고 요청했습니다. 빅터가 VoiceOver를 사용하는 모습을 보여주는 이 동영상을 참고하세요.
이제 스크린 리더를 사용해 보세요. 다음은 자바스크립트로 작성되었으며 최소 기능이지만 작동하는 스크린 리더인 ChromeVox Lite가 포함된 페이지입니다. 저시력 사용자를 시뮬레이션하고 사용자가 스크린 리더로 작업을 완료하도록 하기 위해 화면을 의도적으로 흐리게 처리했습니다. 물론 이를 위해서는 Chrome 브라우저를 사용해야 합니다
화면 하단의 제어판을 사용하여 스크린 리더를 제어할 수 있습니다. 이 스크린 리더에는 기능이 매우 적지만 Previous 및 Next 버튼을 사용하여 콘텐츠를 탐색하고 Click 버튼을 사용하여 항목을 클릭할 수 있습니다.
ChromeVox lite를 사용 설정한 상태에서 이 페이지를 사용해 스크린 리더를 사용할 때의 느낌을 느껴 보세요. 스크린 리더 (또는 기타 보조 기술)가 실제로 프로그래매틱 방식으로 표현된 시맨틱을 기반으로 사용자를 위한 완전한 대체 사용자 환경을 만든다는 사실을 생각해 보세요. 스크린 리더는 시각적 인터페이스 대신 청각적 인터페이스를 제공합니다.
스크린 리더가 각 인터페이스 요소에 관한 정보를 어떻게 알려주는지 확인합니다. 제대로 디자인된 리더는 마주치는 요소에 관한 다음 정보의 전부 또는 대부분을 받아들일 수 있어야 합니다.
- 요소의 역할 또는 유형 (지정된 경우)입니다.
- 요소의 이름 (요소가 있는 경우)입니다.
- 요소의 값(있는 경우)입니다(값이 있을 수도 있고 없을 수도 있음).
- 요소의 state. 예: 사용 설정 또는 중지 여부 (해당하는 경우).
스크린 리더는 네이티브 요소에 기본 제공 접근성 메타데이터가 포함되어 있으므로 이러한 대체 UI를 구성할 수 있습니다. 렌더링 엔진이 네이티브 코드를 사용하여 시각적 인터페이스를 구성하는 것처럼 스크린 리더는 DOM 노드의 메타데이터를 사용하여 다음과 같이 액세스 가능한 버전을 구성합니다.
