웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.
- 한국어 위키백과
웹 접근성은 무엇인가요?
웹 접근성이라는 용어는 여러 기관에서 비슷한 형태로 정의하고 있습니다. 그중에서 개발자 입장에서 가장 쉽게 공감할 수 있는 한국어 위키백과의 정의를 인용했습니다.
웹 접근성의 대상은 노인이나 장애인만이 아니라 "장애를 가진 사람과 장애를 가지지 않은 사람 모두"입니다. 화면을 볼 수 없어 스크린 리더(화면 낭독 프로그램)를 이용하는 시각 장애인은 PC에서 마우스를 사용하지 않고 키보드만을 사용해 웹사이트에 접근합니다. 시각 장애를 가지지 않은 사람이더라도 업무 특성에 따라 마우스 대신 키보드만으로 작업을 진행할 수도 있습니다. 웹사이트에서 키보드를 사용할 수 있게 기능을 구현하는 것은 시각 장애인만을 위한 것이 아니라는 것입니다.
웹 접근성은 웹사이트 제작 시 "사이트가 올바르게 설계되어 개발되고 편집되어 있을 때" 제 기능을 할 수 있습니다. 웹 접근성은 정답을 가지고 있지는 않습니다. 다양한 사용자가 웹사이트를 이용하는 데 불편함이 없게 웹 접근성을 향상하는 것입니다. 스크린 리더 사용자가 웹사이트를 방문했을 때 모든 텍스트 정보를 읽어줄 수도 있지만 사용자가 원하는 텍스트에 바로 접근할 수 있게 기능을 제공하는 기능을 통해 웹 접근성을 향상할 수 있습니다.
넥사크로 N이 알아서 구현해 주는 거 아닌가요?
넥사크로 N은 도구일 뿐 스스로 무언가를 해주는 것은 아닙니다. 넥사크로 N에서 웹 접근성을 향상할 수 있는 여러 기능을 지원하지만 개발자가 이를 적절하게 사용하지 않으면 완성된 애플리케이션은 웹 접근성을 보장하지 못할 수 있습니다.
웹 접근성 정의에서 언급한 것처럼 넥사크로 N에서도 웹 접근성을 향상하기 위해 다음과 같은 작업이 필요합니다.
웹 접근성 향상을 위한 올바른 설계
사용자 동선을 고려한 화면 개발
스크린 리더 사용자를 위한 정보 제공
대규모 프로젝트의 경우 웹 접근성에 대한 고려 없이 설계하고 개발을 상당 부분 진행한 이후에 웹 접근성 기능을 추가하려면 개발 비용이 증가할 수 있습니다. 준비 단계부터 웹 접근성을 고려한 프로젝트를 진행한다면 기존 개발 방식과 큰 차이 없이 개발을 진행할 수 있습니다.
웹 접근성이 낮은 웹 사이트는 어떤 문제가 있나요?
간단한 양식을 입력하고 전송하는 페이지 예시입니다. 이름, 전화, 회사명을 입력하고 전송하는 기능을 제공하고 있습니다.
마우스와 키보드를 사용해 입력하는 경우에는 "이름", "전화", "회사"에 해당하는 입력 영역에 마우스 포인터를 이동하고 클릭한 후에 해당 항목에 입력할 내용을 키보드로 입력하고 "전송" 버튼 위로 마우스 포인터를 이동해 마우스 버튼을 클릭해 전송을 처리합니다.
키보드 사용자의 경우
이제 마우스를 사용하지 않거나 마우스를 사용할 수 없는 환경에서는 어떨까요? 일반적으로는 Tab 키를 사용해 각 입력 영역으로 포커스를 이동한 후 항목을 입력하고 버튼에 포커스가 이동하면 마우스 버튼 클릭 대신 Enter 키를 입력해 양식을 전송할 겁니다.
다음 링크에서 실제 화면을 실행해 키보드 만으로 양식을 채워보세요.
http://demo.nexacro.com/developer_guide/a11y/N/sample_no_a11y_Nexacro_N/quickview.html?screenid=Desktop_screen&formname=FrameBase::Form_Work.xfdl
생각했던 것처럼 잘 동작하나요?
화면에 보이는 대로 Tab 키를 입력할 때마다 "이름", "전화", "회사"에 해당하는 입력 항목 위로 포커스가 이동하고 마지막으로 "전송" 버튼 위로 포커스가 이동해야 하는데 그렇지 않을 겁니다. "이름" 항목에서 Tab 키를 입력하면 "전화"가 아니라 "회사" 항목으로 포커스가 이동합니다. 그다음은 "전송" 버튼으로 이동하고요. "전화" 항목은 "전송" 버튼 다음에 이동합니다.
기대한 동작 순서 | 실제 동작 순서 | 기댓값과 일치 여부 | |
|---|---|---|---|
1 | 이름 | 이름 | O |
2 | 전화 | 회사 | O |
3 | 회사 | 전송 버튼 | X |
4 | 전송 버튼 | 전화 | X |
Tab 키 입력 시 이동 순서가 보이는 것과 다르긴 하지만 양식 항목을 다 채운 후 Tab 키를 몇 번 더 입력하든지 아니면 Shift+Tab 키를 입력해 버튼으로 포커스를 옮겨서 데이터를 전송할 수 있습니다.
하지만 이렇게 잘못된 순서로 동작하는 양식이 여러 개이거나 매일 입력해야 하는 작업이라면 사용자는 관리자에게 업무 시스템에 대해 불평할 겁니다.
Shift+Tab 키를 입력하면 반대 방향으로 포커스를 이동합니다.
"전송" 버튼을 지나서 "전화" 항목을 채운 후 Shift+Tab 키를 입력하면 다시 "전송" 버튼으로 포커스가 이동합니다.
스크린 리더(센스리더) 사용자의 경우
시각장애인은 화면에 표시되는 텍스트 정보를 볼 수 없기 때문에 스크린 리더라는 보조 기술을 사용해 화면에 표시된 텍스트 정보를 음성으로 출력해 사용합니다.
Tab 키로 같은 페이지를 이용하는 경우에는 어떻게 정보가 출력될까요?
아마도 이 문서를 읽는 대부분 사용자는 스크린 리더를 사용할 수 있는 환경이 아니라서 "텍스트 상자" 형태로 출력되는 음성을 표현했습니다. 괄호 안에 숫자는 읽는 순서입니다.
센스리더 8.2 버전 기준으로 음성 출력을 확인했습니다.
입력 항목은 "편집창", 버튼은 "링크"로 읽어주고 다른 정보는 읽어주지 않습니다(괄호 안의 숫자는 순서를 표기하기 위해 추가했습니다). 어떤 항목을 입력해야 하는지 어떻게 해야 데이터가 전송되는 건지 명확한 정보를 제공하지 않습니다.
센스리더의 가상커서를 사용으로 설정(기본값입니다)한 경우에는 웹 브라우저에서 ↑ 또는 ↓키로 정보를 탐색할 수 있습니다. 가상커서를 사용하면 Tab 키로 이동하지 못하는 텍스트 정보에 접근할 수 있습니다.
Tab 키로 이동했을 때는 알 수 없었던 텍스트 정보를 추가로 읽어주어서 각 편집창이 어떤 항목인지는 알 수 있습니다. 하지만 "전송"이라는 텍스트가 일반 라벨인지 버튼인지 구분해주지 않습니다. 사용자가 "전송"이라는 텍스트를 들었을 때 어떤 행동을 취해야 하는지 알 수가 없습니다.
각 항목 사이에 "빈줄"이라고 읽어주는 부분이 있는데 넥사크로 N 내에서 소스 생성 시 접근성 최적화를 진행하지 않아서 의미 없는 항목을 읽는 것입니다. 이 문제는 뒤에서 다시 체크할 겁니다.
접근성 향상 가이드는 넥사크로 N에서 개발한 결과물이 마우스 사용자, 키보드 사용자, 스크린 리더 사용자 등 다양한 사용자가 제공하는 정보와 기능에 동등하게 접근할 수 있게 만들 수 있게 안내합니다.
이 문서에서는 아래와 같은 내용을 다룹니다.
용어 정리
가이드 문서 내에서 사용하는 용어는 별도 용어집으로 정리했습니다.
용어집은 웹 접근성 관련 용어집에서 확인할 수 있으며 웹 브라우저에서 가이드 문서를 보고 있다면 화면 왼쪽에서 "용어집" 아이콘을 선택하고 용어집을 펼쳐볼 수 있습니다.