세균무기가 알려주는 서비스 기획의 모든 것(7-1)
뛰어난 제품을 만들기 위해 서비스 기획자 및 PM/PO가 알아야할 가이드
07. 테스트
테스트 진행 시 기획자가 챙겨야 하는 디지털 접근성과 SEO에 대해서 살펴보자. 그리고, 글로벌 서비스 기획 시 고려할 사항도 함께 알아보자.
7-1. 디지털 접근성
사회가 성숙해지고 노령 인구가 증가하면서 디지털 접근성에 대한 관심과 필요성이 늘고 있다.
디지털 접근성(digital accessibility)이란 장애인이나 고령자가 웹사이트, 모바일 앱, 키오스크 등의 디지털 단말기로 제공되는 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록 보정하는 것으로, 법적 의무사항이다.
디지털 접근성을 지원하기 위해 많은 기업이 보조 공학기술(assistive technology)이라고 불리는 다양한 보조 프로그램과 기능을 개발해 제공하고 있다.
대표적으로 웹에서는 시각 장애인이 웹 서비스를 이용할 수 있도록 화면을 낭독해 주는 '스크린 리더(screen reader)' 프로그램이 있다.
애플의 iOS에는 '보이스오버', 구글의 안드로이드에는 '톡백'이라고 불리는 스크린 리더 기능이 단말기 내 설정에서 기본적으로 제공된다.
그런데 프로그램과 단말기 내 기능으로 제공하고 있더라도 콘텐츠를 제공하는 웹 서비스와 모바일 앱이 이를 활용항 수 있도록 지원하지 않는다면 프로그램과 기능은 사실상 무용지물에 가깝다.
그럼 보조 공학기술을 활용할 수 있도록 서비스가 무엇을 지원해야 하는 걸까?
기획자가 접근성을 이해하고 기획서 작성 시에 접근성을 미리 반영하는 것이 중요하다.
키보드 접근(keyboard access)
웹사이트에서는 키보드 액세스를 지원하는 것이 가장 중요하다.
시각 장애인이 웹사이트를 이용하려면 화면 낭독 프로그램인 스크린 리더를 설치해야 한다.
그리고 키보드의 탭 키를 활용해 페이지의 요소를 이동하면 스크린 리더가 해당 요소를 음성으로 읽어주고, 이를 활용해 웹사이트를 이용할 수 있다.
따라서 마우스 사용이 어려운 사용자를 위해 웹사이트의 모든 인터랙션과 정보에 키보드로 접근할 수 있도록 지원해야 한다.
브라우저의 개발자 도구를 열고 '인스펙터'를 활용해 요소에 마우스 오버를 해보면 접근성 정보를 확인할 수 있다.
테스트 항목
1. 탭 키 등 키보드를 사용하여 페이지를 탐색하고 인터랙션 할 수 있는지 확인한다.
- 사용자가 어떤 요소와 인터랙션을 할 수 없거나 정보를 얻을 수 없다면 이는 실패다.
2. 페이지에서 탭으로 이동하는 순서가 논리적이고, 페이지 요소의 시각적 순서(보통은 좌에서 우로, 위에서 아래로 이동한다)를 따르는지 확인한다.
- 탭 이동 순서가 논리적이지 못하고 혼란스러우면 이는 실패다.
3. 탭 키로 이동할 때 초점(포커스 상태)이 항상 보이는지 확인한다.
- 탭 할 때 숨겨진 링크나 다른 요소에 초점을 잃으면 실패다.
4. '주소표시줄'로 돌아갈 수 있는지 확인한다.
- 페이지 맨 마지막 요소에서 탭을 눌렀을 때 '주소표시줄'로 이동한다. 주소표시줄로 돌아가기 위해 마우스가 필요하다면 이는 실패다.
5. 키보드로 다이얼로그, 모달 등 팝업을 쉽게 이용하고 닫을 수 있어야 한다.
- 키보드 이동으로 팝업을 인지하고 활성화할 수 있어야 한다. 팝업이 활성화되면 키보드 포커스가 팝업의 첫 번째 실행 가능한 요소로 즉시 이동해야 한다.
- 키보드 사용은 팝업이 해제될 때까지 팝업 내 이동으로 제한해야 한다. 사용자가 팝업의 마지막 요소를 지나 키보드 포커스를 이동하면 팝업의 시작 부분으로 이동하며 팝업 내 이동을 반복해야 한다. 팝업을 띄운 상태에서 탭 키를 눌렀는데 배경 페이지의 요소로 이동한다면 이는 실패다.
- 키보드를 통해 팝업의 모든 컨트롤, 특히 팝업을 닫는 컨트롤(예를 들어 X 버튼)에 접근할 수 있어야 한다. 또한 키보드의 esc 키를 사용해 팝업을 닫을 수 있도록 지원해야 한다.
6. 의도적으로 키보드와의 인터랙션을 숨긴 콘텐츠가 드러나는 경우
- 탭 키로 이동했을 때 건너뛰는지 확인해야 한다.
- 건너뛰지 않는 경우, 이를 위해 별도의 프로그래밍 처리를 해야 한다.
텍스트
고령자와 약시자를 위해 단말기 또는 브라우저의 설정에서 글꼴 크기를 변경하면 서비스 내에서 글자 크기의 변경을 지원해야 한다.
또는 서비스 내에서 글자 크기를 변경할 수 있는 별도의 기능을 지원할 수 있다. 그리고 글자 크기가 변경되면서 화면의 그리드나 요소가 깨지지 않고 콘텐츠를 정확히 인식할 수 있는지 테스트해야 한다.
테스트 항목
1. 단말기 또는 브라우저의 설정에서 글꼴 크기를 '아주 작게'와 '아주 크게'로 변경해 본다.
- 고정 텍스트 및 가변 텍스트가 적절히 사용됐는지 확인한다.
- 가변 텍스트를 지원하는 경우에는 글꼴 크기의 변경에 따라 화면의 그리드나 요소가 깨지지 않고 정확히 인식할 수 있는지 확인하고, 인식할 수 없는 정보가 있다면 실패다. 특히, 모바일 앱에서는 화면에 스크롤 처리를 했는지 확인하고, 스크롤 처리가 되어 있지 않다면 실패다.
이미지
시각 장애인이 화면에 포함된 이미지를 이해하려면 화면 낭독 프로그램인 스크린 리더나 iOS의 보이스오버, 안드로이드의 톡백을 활용해 이미지를 음성으로 제공해야 한다. 즉, 대체 텍스트인 alt 값(alt 속성 또는 title 속성, aria-label 속성 등의 방법으로 제공할 수 있다)이 필요하다.
alt 값을 제공하려면 기획자가 기획서에 해당 이미지에 대한 대체 텍스트를 정의해줘야 한다.
이미지 버튼은 해당 버튼의 액션을 명확히 이해할 수 있도록 대체 텍스트를 제공해야 한다.
테스트 항목
1. 개발자 도구의 인스펙터를 사용하여 이미지를 선택하고 다음 사항에 대해 검사한다.
- 이미지에 대한 대체 텍스트를 제공해야 한다.
- 컨트롤, 상태 표시 또는 기타 프로그래밍 요소에 사용되는 반복된 이미지에는 통일된 대체 텍스트를 사용해야 한다.
- 이미지가 단순히 디자인적 요소인 경우에는 alt 값이 비어 있어야 한다.
색상
색맹 및 색약자를 위해 색상 대비(color contrast) 및 색상 의존성을 고려해야 한다.
색상 대비는 녹색 바탕에 하얀 글씨가 쓰여 있을 때 녹색인 배경색과 하얀색인 전경색의 비율을 의미하는데, 적록색맹자와 같이 특정 색상을 인지하지 못하는 경우에 해당 글자를 인지하기 어렵기 때문에 이를 고려해야 한다.
색상 의존성은 색상에만 의존해 특정 정보를 전달할 때, 색상을 인지하지 못해 발생하는 문제로 그래프나 도표 등에서 자주 발생한다.
ex) 문장 중간에 링크가 연결된 텍스트가 있는데 이를 텍스트 색상으로만 구분한다면 색상을 인지하지 못하는 사용자는 이것이 링크인지 아닌지 구분할 수 없다.
따라서 링크가 걸려있는 텍스트는 색상 이외에도 밑줄이나 기호 등의 방법으로 추가적인 표시를 해줘야 한다.
테스트 항목
1. 색상 대비
- 개발자 도구의 인스펙터를 사용해 색상 대비값이 4.5 이상인지 확인한다. 이 테스트는 텍스트 이미지에서도 수행해야 한다. 다만, 로고나 비활성화된 인풋 박스, 비활성화된 버튼에서는 이 테스트를 할 필요가 없다.
2. 색상 의존성
- 정보를 전달하기 위해 색상을 사용한 요소를 식별한다. 정보가 색상 이외의 밑줄, 기호 등의 다른 방법으로도 구분할 수 있는지 확인한다.
깜박임
깜박임(플래시 효과)은 사용자의 주의를 끌 수는 있다. 하지만 발작이나 멀미 등을 유발할 수 있기 때문에 사용에 주의해야 한다. 그런데도 깜박임 효과가 필요하다면 깜박임 속도가 초당 3회 미만이어야 한다.
테스트 항목
1. 깜박임이 포함된 요소를 찾는다. 깜박임의 빈도를 확인하고 깜박임 속도가 3Hz(초당 3회) 미만으로 설정돼 있는지 확인한다.
페이지 제목
사용자가 사이트를 탐색하는 데 있어 매우 중요한 정보다.
PC의 사양이 좋아지다 보니 동시에 여러 탭을 열어 두고 사용하는 사용자가 많다.
따라서 페이지마다 고유한 제목이 있어야 페이지를 쉽게 이동할 수 있다.
스크린 리더는 시각 장애인이 웹사이트를 탐색할 때마다 현재 페이지의 제목을 읽어주기 때문에 페이지 제목이 명확해야 웹사이트를 빠르게 탐색할 수 있다.
테스트 항목
1. 페이지 탭에 표시된 제목이 고유하고 페이지를 정확하게 설명하는지 확인한다.
- 제목은 웹사이트와 현재 표시하는 특정 페이지를 설명해야 한다.
헤딩(headings)
페이지를 레이아웃할 때 콘텐츠의 섹션을 정의하는 방법이다.
소개하고자 하는 섹션의 주제를 간략하게 설명한 단어나 문구로 페이지의 구조를 빠르게 이해하고 탐색할 수 있게 도와준다. 스크린 리더는 헤딩을 읽어주고 다음 헤딩으로 빠른 이동을 지원한다.
따라서 시각 장애인이 페이지의 구조나 내용을 쉽고 빠르게 이해하고 탐색하는 데 도움이 된다.
테스트 항목
1. 시각적 제목 요소를 식별한 다음 <h> 태그를 사용했는지 확인한다.
모든 상위 헤딩 요소의 헤딩 숫자가 하위 헤딩의 헤딩 숫자보다 낮은지 확인한다.
숨겨진 콘텐츠
접근성을 위해 중요한 요소다.
특정 콘텐츠를 시각적으로는 숨기면서 스크린 리더 사용자에게만 접근할 수 있게 하거나, 반대로 스크린 리더 사용자에게는 숨기면서 시각적으로 표시할 수 있다.
멀티미디어
비디오, 오디오 등 멀티미디어를 제공할 때 모든 사용자가 해당 콘텐츠를 이용할 수 있는 수단을 제공해야 한다.
이를 위해서 청각 장애인을 고려하여 오디오가 있는 비디오에는 동기화된 캡션이 필요하다.
비디오에서 말한 모든 내용은 캡션에 들어가야 하며 여기에는 이름 및 소리, 설명이 포함된다.
반면, 오디오 설명에는 시각 장애인을 고려하여 시각적으로 표시되는 모든 정보가 오디오로 전달돼야 한다.
모든 비디오 및 오디오 컨트롤 요소를 키보드로 접근할 수 있도록 지원해야 한다.
타임아웃
인증번호를 입력해야 하는 인풋 박스에서는 인증번호를 입력하거나 재요청을 위한 타이머 기준을 정해야 한다. 필자는 3분을 선호하는 편이며, 최소 20초 이상으로 설정해야 한다.
테스트 항목
1. 화면에서 타임아웃 요소를 식별하고 더 ㅁ낳은 시간을 추가로 요청할 수 없거나 20초 미만이면 실패다.
표(table)
표를 사용하여 데이터를 표시하는 경우에는 헤더 셀과 데이터 셀을 프로그래밍 방식으로 연결하여 스크린 리더를 위한 테이블 내비게이션을 만들어야 한다.
두 개 이상의 헤더가 있는 복잡한 테이블에서는 각 헤더가 유니크한 ID를 가지고 있어야 하며, 각 데이터 셀은 관련된 헤더 셀의 ID 속성을 가지고 있어야 한다.
디지털 접근성에 대해 정리된 문서나 자료
