웹의 힘은 보편성에 있으며, 장애와 관계없이 모든 사람이 접근할 수 있는 것은 필수적인 요소입니다.

The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.

- 팀 버너스리

이전 장에서 간단한 예시를 통해 키보드 사용자, 스크린 리더 사용자가 어떤 어려움을 겪는지 살펴봤습니다. 이번 장에서는 사용자의 어려움을 어떤 식으로 보완하고 웹 접근성을 향상할 수 있는지 살펴보겠습니다.

Tab 키 입력 시 순서 바로잡기

Tab 키 입력 시 포커스 이동 순서가 보이는 것과 다르게 처리되는 대부분의 경우는 중간에 화면 요소가 변경된 경우입니다. 이전 장 예시에서도 아마 처음 화면을 설계할 때는 "이름"과 "회사"만 입력하고 전송하도록 만들고 나서 중간에 "전화" 항목이 추가되었을 겁니다.

넥사크로 스튜디오에서는 각 컴포넌트를 화면에 배치하는 순서에 따라 탭 이동 순서 속성값(taborder)이 자동으로 설정됩니다. 처음 화면을 그릴 때 속성값은 아래와 같습니다.

화면에 보이는 순서대로 컴포넌트를 배치하고 Static, Button 컴포넌트의 text 속성값만 수정했습니다.

이런 상태에서 "전화" 항목이 추가되면 어떻게 바뀔까요? 화면에서는 중간에 컴포넌트를 추가했지만 taborder 속성값은 마지막 순서로 설정됩니다.

때문에 화면 내 컴포넌트 배치가 변경되는 경우에는 taborder 속성값의 순서를 확인하고 수정해주어야 키보드 사용자가 어려움 없이 이용할 수 있습니다.

컴포넌트 목록에서 taborder 순서 조정하기

컴포넌트를 화면 중간에 추가한 경우에는 추가한 컴포넌트뿐 아니라 뒤에 있는 컴포넌트의 taborder 속성값까지 모두 수정해 주어야 합니다. 예시처럼 간단한 경우에는 어려운 일이 아니지만 화면이 복잡한 경우에는 번거로운 작업이 될 수 있습니다.

넥사크로 스튜디오에서는 화면 내 컴포넌트 목록을 표 형태로 확인하고 taborder 순서를 간단하게 조정하는 기능을 제공합니다. 다음과 같은 순서로 화면 내 컴포넌트의 taborder 속성값을 조정합니다.

마우스 오른쪽 버튼을 클릭하면 해당 화면에서 사용할 수 있는 기능 목록(컨텍스트 메뉴)이 표시됩니다.

Tab Order 표가 팝업창으로 나타납니다.

추가한 컴포넌트 5번과 6번을 선택합니다. 5번 항목을 마우스로 클릭하고 Ctrl 키를 누른 상태에서 6번 항목을 클릭합니다.

선택한 항목이 같이 위로 이동합니다. "전화" 항목이 "회사" 항목 위에 오도록 이동합니다.

실행한 화면에서 Tab 키를 입력해 포커스가 화면에 보이는 순서대로 이동하는지 확인합니다.

다음 링크에서 실제 화면을 실행해 Tab 키를 입력해 이동해 보세요.

http://demo.nexacro.com/developer_guide/a11y/N/sample_no_a11y_Nexacro_N/quickview.html?screenid=Desktop_screen&formname=FrameBase::Form_Work_Taborder.xfdl

웹 접근성 개발 환경 설정하기

Tab 키 입력 시 순서를 바로 잡는 것은 화면 개발자가 할 수 있는 일입니다. 하지만 전체적인 프로젝트 내 웹 접근성을 향상하려면 프로젝트 설정을 건드리는 작업이 필요합니다.

웹 접근성 모듈 추가하기

프로젝트를 생성하면 기본 모듈(컴포넌트, 오브젝트)을 별도 작업 없이 바로 사용할 수 있도록 준비되어 있습니다. 하지만 일부 추가 모듈은 프로젝트 내에서 사용하려면 별도의 추가 작업이 필요합니다. 웹 접근성 모듈도 마찬가지입니다.

다음과 같은 순서로 웹 접근성 모듈을 추가합니다.

TypeDefinition - Objects 양식이 팝업창으로 나타납니다.

Environment 속성값 설정하기

Environment에서는 애플리케이션 전체에 반영되는 접근성 관련 속성을 설정할 수 있습니다.

스크린 리더(센스리더) 사용자의 경우

이전 장에서 만든 예시 화면을 스크린 리더에서 어떻게 읽어주는지 살펴봤습니다. Tab 키 입력 시 다음과 같은 순서로 읽는다고 했었죠(taborder 순서는 조정했으니 순서는 제대로 읽어줄 겁니다).

넥사크로 스튜디오에서 웹 접근성 환경을 설정한 후에는 어떻게 읽는지 살펴봅시다.

Edit 컴포넌트에 대한 동작은 변경이 없으나 마지막 Button 컴포넌트는 "링크"가 아닌 "버튼"으로 기능을 명확하게 읽어주고 있습니다. 그리고 Button 컴포넌트의 text 속성값 정보도 같이 읽어줍니다.

이제 사용자는 Button 컴포넌트의 역할이 어떤 것인지 좀 더 명확하게 알 수 있습니다.

센스리더의 가상커서를 ↑ 또는↓ 키로 탐색하는 경우에도 마찬가지입니다. 이전에는 불필요한 "빈줄"이라는 정보를 매번 이동하는 사이에 읽어주었는데 이제는 명확한 정보만 읽어줍니다.

편집창에 정보 추가하기

센스리더 가상커서를 사용해 탐색하는 경우에는 화면에 입력해야 하는 정보가 어떤 것인지 확인할 수 있습니다. 하지만 Tab 키로 이동하는 경우에는 그렇지 않습니다.

화면을 보면서 키보드로 탐색하는 경우에는 현재 포커스가 이동한 편집창에 어떤 내용을 입력해야 하는지 알 수 있습니다. 하지만 화면이 보이지 않는 경우에는 스크린 리더에서 읽어주는 정보에만 의존해야 하기 때문에 추가적인 정보를 제공해주어야 합니다.

각 컴포넌트에 접근성 관련 속성값을 설정해서 Tab 키로 조작 시에도 적절한 정보를 제공할 수 있도록 수정해 보겠습니다.

Edit 컴포넌트의 accessibilitylabel 속성값을 다음과 같이 수정합니다.

Tab 키 입력 시 이전과 다르게 각 편집창에 대한 추가 정보를 읽어줍니다.

화면 작업을 하는 중에 표시되는 문자열을 수정할 수 있습니다. 예를 들어 "전화"를 "휴대폰"으로 변경하는 경우 이전처럼 Edit 컴포넌트의 accessibilitylabel 속성값을 직접 입력한 경우에는 Static 컴포넌트와 Edit 컴포넌트 속성값을 모두 수정해야 합니다. 이런 불편함을 줄이기 위해 "라벨, 입력창" 형태로 짝 지워진 경우에는 accessibilitylabel 속성값에 문자열 대신 참조할 컴포넌트 id를 설정할 수 있습니다.

스크린 리더의 동작은 똑같습니다.