시맨틱 및 보조 기술 소개
신체적 장애, 기술적 문제 또는 개인적 선호도에 관계없이 마우스나 포인팅 기기를 사용할 수 없는 사용자가 키보드 전용 사용을 통해 사이트에 액세스할 수 있도록 하는 방법을 알아봤습니다. 약간의 주의와 생각을 필요로 하지만 처음부터 계획한다면 큰 작업이 아닙니다. 기본 작업이 완료되면 완전히 액세스 가능하고 더 세련된 사이트를 만드는 여정을 시작할 수 있습니다.
이 강의에서는 이러한 작업을 토대로 화면을 볼 수 없는 빅터 차란과 같은 사용자를 지원하는 웹사이트를 빌드하는 방법과 같은 다른 접근성 요소에 대해 생각해 보겠습니다.
먼저 정보에 액세스하는 데 어려움을 겪는 장애가 있는 사용자를 지원하는 스크린 리더와 같은 도구를 가리키는 일반적인 용어인 보조 기술에 대한 배경을 알아봅니다.
다음으로 몇 가지 일반적인 사용자 환경 개념을 살펴보고 이를 바탕으로 보조 기술 사용자의 환경을 자세히 살펴보겠습니다.
마지막으로 HTML을 효과적으로 사용하여 이러한 사용자에게 우수한 환경을 만드는 방법과 이전에 포커스를 처리한 방식과 상당히 중복되는 부분을 살펴봅니다.
보조 기술
보조 기술은 장애가 있는 사용자가 작업을 완료하는 데 도움이 되는 기기, 소프트웨어, 도구를 통칭하는 용어입니다. 넓은 의미에서 로봇 팔이나 스마트폰의 이미지 인식 소프트웨어와 같은 첨단 기술일 수도 있고, 걷기용 목발이나 독서용 돋보기와 같은 저급 기술일 수도 있습니다.
보조 기술에는 브라우저 확대/축소와 같이 일반적인 기능이나 맞춤 설계된 게임 컨트롤러와 같이 구체적인 기능이 포함될 수 있습니다. 점자 디스플레이와 같은 별도의 물리적 기기일 수도 있고 음성 제어와 같이 소프트웨어로 완전히 구현될 수도 있습니다. 화면 리더와 같이 운영체제에 내장되어 있거나 Chrome 확장 프로그램과 같은 부가기능일 수 있습니다.
보조 기술과 일반적인 기술의 경계는 모호합니다. 결국 모든 기술은 사람들이 어떤 작업을 할 때 도움을 주기 위한 것이기 때문입니다. 또한 기술이 '보조' 카테고리로 이동했다가 나가는 경우가 많습니다.
예를 들어 최초의 상용 음성 합성 제품 중 하나는 맹인을 위한 음성 계산기였습니다. 이제 음성 합성은 운전 안내에서 가상 어시스턴트까지 다양한 곳에서 사용되고 있습니다. 반대로 원래 범용 기술이었던 기술이 보조 용도로 사용되는 경우가 많습니다. 예를 들어 저시력 사용자는 스마트폰의 카메라 줌을 사용하여 실제 작고 작은 물체를 더 잘 볼 수 있습니다.
웹 개발의 맥락에서 다양한 기술을 고려해야 합니다. 사용자는 스크린 리더 또는 브라일리 디스플레이, 화면 돋보기, 음성 제어, 스위치 기기 또는 페이지의 기본 인터페이스를 조정하여 사용할 수 있는 더 구체적인 인터페이스를 만드는 기타 보조 기술을 사용하여 웹사이트와 상호작용할 수 있습니다.
이러한 보조 기술의 대부분은 프로그래매틱 방식으로 표현된 시맨틱을 사용하여 접근 가능한 사용자 환경을 만듭니다. 이 섹션의 대부분은 이 주제에 관한 내용입니다. 하지만 프로그래매틱 방식으로 표현된 시맨틱스를 설명하기 전에 어포던스에 관해 조금 이야기해야 합니다.
어포던스
사람이 만든 도구나 기기를 사용할 때는 일반적으로 도구나 기기의 형태와 디자인을 보고 기능과 작동 방식을 파악합니다. 어포던스는 사용자에게 작업을 실행할 기회를 제공하거나 제공하는 모든 객체입니다. 어포던스가 더 잘 디자인될수록 사용이 더 명확하거나 직관적입니다.
전형적인 예는 주전자나 찻주전자입니다. 전에 주전자를 본 적이 없어도 주전자를 쥐는 방법을 쉽게 알 수 있습니다. 주전자의 주둥이가 아닌 손잡이를 잡아야 한다는 것을 알 수 있습니다.
이는 다른 많은 물체(예: 물주기 용기, 음료 피처, 커피 머그)에서 본 것과 유사한 어포던스를 제공하기 때문입니다. 주전자를 주둥이 부분으로 들 수 있지만, 유사한 어포던스를 사용해 본 경험에 비추어 볼 때 손잡이가 더 나은 선택입니다.
그래픽 사용자 인터페이스에서 어포던스는 취할 수 있는 작업을 나타내지만 상호작용할 실제 객체가 없으므로 모호할 수 있습니다. 따라서 GUI 어포던스는 모호하지 않도록 특별히 설계되었습니다. 버튼, 체크박스, 스크롤바는 최대한 적은 교육으로 사용 방법을 전달하기 위한 것입니다.
예를 들어 다음과 같이 일반적인 양식 요소(어포던스)의 사용을 의역할 수 있습니다.
- 라디오 버튼: '이 옵션 중 하나를 선택할 수 있습니다.'
- 체크박스: '이 옵션에 대해 '예' 또는 '아니요'를 선택할 수 있습니다.'
- 텍스트 필드: '이 영역에 텍스트를 입력할 수 있습니다.'
- 드롭다운: '이 요소를 열면 옵션이 표시됩니다.'
이러한 요소에 관해 결론을 내릴 수 있는 것은 요소를 볼 수 있기 때문입니다. 당연히 요소에서 제공하는 시각적 단서를 볼 수 없는 사용자는 그 의미를 이해하거나 어포던스의 가치를 직관적으로 파악할 수 없습니다. 따라서 사용자의 요구사항에 맞게 대체 인터페이스를 구성할 수 있는 보조 기술에서 액세스할 수 있을 만큼 유연하게 정보가 표현되어야 합니다.
어포던스 사용을 시각적으로 노출하지 않는 것을 시맨틱스라고 합니다.
스크린 리더
널리 사용되는 보조 기술 중 하나는 스크린 리더입니다. 스크린 리더는 시각 장애인이 생성된 음성으로 화면 텍스트를 소리 내어 읽음으로써 컴퓨터를 사용할 수 있게 해주는 프로그램입니다. 사용자는 키보드로 커서를 관련 영역으로 이동하여 읽을 내용을 제어할 수 있습니다.
빅터 차란님께서 시각장애인으로서 OS X의 내장 스크린 리더인 보이스오버를 사용하여 웹에 액세스하는 방법을 설명해 주셨습니다. 빅터가 VoiceOver를 사용하는 이 동영상을 참고하세요.
이제 스크린 리더를 사용해 보세요. 다음은 JavaScript로 작성된 작지만 작동하는 스크린 리더인 ChromeVox Lite가 포함된 페이지입니다. 화면이 의도적으로 흐리게 처리되어 저시력 환경을 시뮬레이션하고 사용자가 스크린 리더로 작업을 완료하도록 유도합니다. 물론 이 연습에서는 Chrome 브라우저를 사용해야 합니다.
화면 하단의 제어판을 사용하여 화면 리더를 제어할 수 있습니다. 이 스크린 리더는 기능이 매우 적지만 Previous 및 Next 버튼을 사용하여 콘텐츠를 탐색하고 Click 버튼을 사용하여 항목을 클릭할 수 있습니다.
ChromeVox Lite를 사용 설정한 상태에서 이 페이지를 사용해 스크린 리더 사용을 익혀 보세요. 스크린 리더 (또는 기타 보조 기술)가 프로그래매틱 방식으로 표현된 시맨틱을 기반으로 사용자를 위해 완전한 대체 사용자 환경을 실제로 생성한다는 사실을 생각해 보세요. 스크린 리더는 시각적 인터페이스 대신 청취 가능한 인터페이스를 제공합니다.
스크린 리더가 각 인터페이스 요소에 관한 정보를 알려주는 방식을 확인합니다. 잘 설계된 리더는 발견한 요소에 관한 다음 정보를 모두 또는 대부분 알려야 합니다.
- 요소의 역할 또는 유형 (지정된 경우, 지정해야 함)
- 요소의 이름 (있는 경우).
- 요소의 값입니다 (있을 수도 있고 없을 수도 있음).
- 요소의 상태입니다(예: 사용 설정 또는 사용 중지 여부(해당하는 경우)).
네이티브 요소에 내장된 접근성 메타데이터가 포함되어 있으므로 스크린 리더는 이 대체 UI를 구성할 수 있습니다. 렌더링 엔진이 네이티브 코드를 사용하여 시각적 인터페이스를 구성하는 것처럼 스크린 리더는 DOM 노드의 메타데이터를 사용하여 다음과 같은 액세스 가능한 버전을 구성합니다.
