[QA] 기획자가 챙겨야 할 웹 접근성 가이드
최근 기획자들을 자주 만나고 있는데 갈수록 웹 접근성에 대한 규제는 늘고 그 필요성에 대한 요구도 늘고 있는데 반해 워낙 Mobile First를 추구하다 보니 웹 접근성에 대한 관심이나 이해는 부족하거나 갈수록 낮아지고 있는 것 같다. 그리고 허구한 날 UI/UX 타령이다. 누구를 위한 UI/UX인가?
그래서 웹 접근성은 무엇이고, 기획이나 QA 시에 웹 접근성을 준수하기 위해 무엇을 고려하고 검토해야 하는지에 대해서 정리해봤다.
웹 접근성(Web Accessibility)은 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적 의무사항입니다.
[ 관련 법규 ]
장애인 차별 금지 및 권리 구제 등에 관한 법률 [시행일 2008년 4월 11일]
제20조(정보접근에서의 차별금지)
① 개인·법인·공공기관(이하 이 조에서 "개인 등"이라 한다)은 장애인이 전자정보와 비전자정보를 이용하고 그에 접근함에 있어서 장애를 이유로 제4조제1항제1호 및 제2호에서 금지한 차별행위를 하여서는 아니 된다.
제38조(진정)
이 법에서 금지하는 차별행위로 인하여 피해를 입은 사람(이하 "피해자"라 한다) 또는 그 사실을 알고 있는 사람이나 단체는 국가인권위원회(이하 "위원회"라 한다)에 그 내용을 진정할 수 있다.
제50조(과태료)
① 제44조에 따라 확정된 시정명령을 정당한 사유 없이 이행하지 아니한 자는 3천만 원 이하의 과태료에 처한다.
이 글은 미 정부 공식 웹 접근성 가이드인 '18F Accessibility Guide'와 국내에서 가장 웹 접근성에 신경 쓰는 네이버의 '웹 접근성 가이드'를 참고하여 작성하였다.
키보드 액세스
웹사이트에서 키보드 액세스는 접근성을 위한 핵심입니다.
마우스 사용이 어려운 사용자를 위해 웹사이트에서 마우스로 액세스 할 수 있는 모든 인터랙션 및 정보에 키보드만으로도 액세스(컨트롤) 할 수 있게 지원해야 합니다.
테스트
Tab 이동 및 입력, 스페이스 바를 사용하여 페이지를 탐색하고 인터랙션 할 수 있는지 확인합니다.
- 롤 오버(이미지, 버튼 등에 마우스 오버 시 작동되는 전환 효과) 및 호버 액션도 실행이 가능한지 확인합니다.
- 사용자가 어떤 요소와 인터랙션을 할 수 없거나 정보를 얻을 수 없다면 이는 실패입니다.
페이지 내 Tab 이동 순서가 논리적이고 페이지 요소의 시각적 순서(좌에서 우, 위에서 아래로)를 따르는지 확인합니다.
- Tab 이동 순서가 논리적이지 못하고 혼란스러우면 이는 실패입니다.
페이지 내 Tab 키로 이동할 때 초점이 항상 보이는지 확인합니다.
- 페이지를 Tab할 때 숨겨진 링크나 다른 요소에 초점을 잃으면 실패입니다.
페이지를 Tab하여 [주소표시줄]로 돌아갈 수 있는지 확인합니다.
- [주소표시줄]로 돌아가기 위해 마우스가 필요하다면 이는 실패입니다.
키보드 사용자가 다이얼로그 팝업, 라이트 박스 모달 팝업 등 팝업을 쉽게 사용하고 닫을 수 있어야 합니다.
- 키보드 이동으로 팝업을 인지하고 활성화할 수 있어야 합니다. 팝업이 활성화되면 키보드 포커스가 팝업의 첫 번째 실행 가능한 요소로 즉시 이동해야 합니다.
- 키보드 사용은 팝업이 해제될 때까지 팝업 내 이동으로 제한되어야 합니다. 사용자가 팝업의 마지막 요소를 지나 키보드 포커스를 이동하면 팝업의 시작 부분으로 이동하며 팝업 내 이동을 반복해야 합니다.
- 키보드 사용자는 팝업의 모든 컨트롤, 특히 팝업을 닫는 컨트롤(예를 들어 X 버튼)에 액세스 할 수 있어야 합니다. 또한 Esc 키를 사용하여 팝업을 닫을 수 있어야 합니다.
의도적으로 인터랙션을 숨긴 콘텐츠가 드러나는 경우
- Tab 이동 시 건너뛰는지 확인해야 합니다.
- 건너뛰지 않는 경우, 이를 위해 별도의 프로그래밍 처리를 해야 합니다.
화면에 보이지 않는 정보를 제공하는 타이틀 속성이 있는지 확인합니다.
마우스를 사용하는 사람이 사용할 수 없는 요소에 포커스가 이동하지 않는지 확인합니다.
구글과 다음에서 마우스를 사용하지 않고 키보드만으로 인터랙션을 해보시면 위 내용이 충분히 이해가 가실 겁니다. 그럼 구글은 얼마나 웹접근성에 신경을 썼는지, 그리고 다음은 얼마나 소홀한 지 알 수 있습니다. :(
텍스트
고령자와 약시자를 위해 서비스 내에서 텍스트 사이즈 변경을 지원하거나 브라우저에서 글꼴 크기 변경 시 깨지지 않고 인식할 수 있도록 지원해야 합니다.
테스트
브라우저 설정에서 글꼴 크기를 변경합니다.
- 고정 텍스트 및 가변 텍스트가 적절히 사용되었는지 확인합니다.
- 가변 텍스트의 경우, 글꼴 크기의 변경에 따라 인식할 수 있는지 확인하고 인식할 수 없는 정보가 있다면 실패한 것입니다.
이미지
페이지에서 이미지를 사용할 때 해당 콘텐츠에 대한 대체 방법을 제공해야 합니다. 이것은 Alt 속성 또는 Title 속성, Aria-label 속성 등의 방법으로 제공할 수 있습니다.
이미지는 Img 태그를 사용하고 Alt 속성(대체 텍스트)을 지원합니다.
시각을 통해 화면 이미지 정보를 인식하기 어려운 전맹 사용자들이 스크린 리더(시각장애인이 컴퓨터를 사용할 때 화면에 나타나는 정보들을 음성으로 출력해주는 화면낭독 프로그램)를 통해 이 Alt 속성을 음성으로 듣게 됨에 따라 이미지 콘텐츠 정보를 인식할 수 있게 됩니다.
이미지에 텍스트가 있는 경우에도 이미지의 모든 텍스트가 대체 콘텐츠로 제공되어야 합니다.
이를 위해서 Front 개발 시 기획자가 정의한 Alt 속성 값을 개발자가 꼼꼼하게 입력하고 백오피스에 이미지 등록 시 Alt 속성 값을 입력할 수 있도록 입력 박스를 추가해야 합니다.
<img src="image.png" alt="대체 텍스트 입력">단, 기능과 관련되지 않은 디자인적 요소로서의 이미지에는 Alt 속성을 넣지 않아 스크린 리더에서 읽히지 않게 해야 합니다.
QR코드나 바코드와 같은 이미지 정보는 Alt 속성에 QR코드의 연결 정보 또는 바코드의 정보를 제공해야 합니다.
<img src="qrcode.png" alt="QR코드 세균무기에게 바로가기 https://germweapon.tistory.com/">
이미지 버튼의 경우에는 해당 버튼의 기능을 명확히 이해할 수 있도록 대체 텍스트를 제공해야 합니다.
<input type="image" src="next.gif" alt="다음 메뉴">
테스트
개발자 도구를 사용하여 이미지를 선택합니다.
다음 사항에 대해 검사합니다.
- 이미지에 대한 설명이 제공되어야 합니다.
- 컨트롤, 상태 표시 또는 기타 프로그래밍 요소에 사용되는 반복된 이미지에는 통일된 Alt 텍스트가 있어야 합니다.
- 이미지가 단순히 디자인적인 요소인 경우에는 Alt 속성이 비어있어야 합니다.
<img src="/images/sign.jpg" alt="Warning do not read this sign">
색상
색맹 및 색약자를 위해 전경색(텍스트)과 배경색의 비율인 색상 대비 및 색상 의존성을 고려해야 합니다.
색상 대비(Color Contrast)는 전경색과 배경색의 비율을 의미합니다. 텍스트는 배경과의 대비가 4.5:1 이상이어야 합니다.
색상 의존성은 색상에만 의존해 특정 정보를 전달할 때 색상을 인지하지 못해 발생하는 문제입니다. 예를 들어, 텍스트 중간에 링크가 연결된 텍스트가 있는데 이를 색상으로만 구분했을 때 색상을 인지하지 못하는 사용자는 이것이 링크인지 아닌지 구분할 수 없습니다. 때문에 링크는 색상 이외에 밑줄, 기호 등의 다른 방법으로도 구분이 되어야 합니다.
테스트
● 색상 대비
개발자 도구를 통해 색상 대비값을 확인하여 4.5 이상인지 확인합니다.
이 테스트는 텍스트 이미지에서도 수행을 해야 합니다. 다만, 로고 및 비활성화된 양식 필드, 비활성화된 버튼은 이 테스트를 할 필요가 없습니다.
● 색상 의존성
정보를 전달하기 위해 색상을 사용하는 요소를 식별합니다.
정보가 색상 이외의 밑줄, 기호 등의 다른 방법으로도 구분이 가능한지 확인합니다.
링크가 일반 텍스트로 둘러싸여 색상으로만 구별되는 경우 링크 대비 주변 텍스트와는 3:1, 주변 색상과는 4.5:1 이상인지 확인합니다.
깜박임
깜박임은 발작이나 멀미 등을 유발하기 때문에 좋지 않은 UI입니다. 그럼에도 불구하고 깜박임 요소가 꼭 필요한 경우에는 다음의 요소를 고려해야 합니다.
테스트
깜박임이 포함된 요소를 찾습니다.
깜박임의 빈도를 확인할 수 있는 경우 그 빈도를 확인합니다.
깜박임 속도가 3Hz(초당 3회) 미만이거나 스크롤 지연이 >=400으로 설정되어 있는지 확인합니다.
페이지 제목
페이지 제목은 사용자가 사이트를 탐색하는데 매우 중요한 정보입니다. 대부분의 사용자는 한 번에 여러 탭을 엽니다. 때문에 페이지마다 고유한 제목을 가지고 있어야 페이지를 이해하고 페이지 사이를 이동하는데 도움이 됩니다.
테스트
페이지 탭에 표시된 제목이 고유하고 페이지를 정확하게 설명하는지 확인합니다.
- 제목은 웹사이트와 사이트에서 표시하는 특정 페이지를 설명해야 합니다.
<title>Page title - Site name</title>예를 들어 이 페이지의 제목은 '기획자가 챙겨야 할 웹 접근성 가이드 - 세균무기'입니다. 앞은 페이지의 이름이고, 뒤는 사이트의 이름을 표시합니다.
헤딩(Headings)
헤딩은 페이지를 레이아웃 할 때, 콘텐츠의 섹션을 정의하기 위한 방법으로 소개하고자 하는 섹션의 주제를 간략하게 설명합니다. 헤딩 요소는 페이지의 구조를 이해하고 빠르게 페이지를 탐색할 수 있도록 도와줍니다.
헤딩 요소를 사용할 때, <h1> 요소는 일반적으로 홈페이지에서는 사이트의 제목으로, 다른 페이지에서는 페이지의 제목에 사용하며 가급적 페이지당 1회만 사용하는 것이 바람직합니다. 일부 접근성 툴에서 한 페이지에 <h1>을 여러 번 사용한 경우 올바르게 인식하지 못하는 경우가 있습니다.
하위 섹션의 경우, 문서 개요 순서에는 <h2>에서 <h6>까지를 사용합니다. 헤딩을 생략하지 마시고 문서 개요 순서(낮은 수에서 높은 수로)를 지켜줘야 합니다.
텍스트 기반 로고의 경우에는 <em> 요소를 사용합니다.
로고가 이미지이고 해당 페이지의 메인 헤딩으로 사용한다면, <h1> 요소를 추가하고 sr-only 규칙을 사용하여 시각적으로 보이지는 않지만 스크린 리더 사용자는 액세스 할 수 있도록 지원합니다.
테스트
시각적 제목 요소를 식별합니다.
모든 시각적 헤딩 요소에 <h> 태그를 사용했는지 확인합니다.
모든 상위 헤딩 요소의 헤딩 숫자가 하위 헤딩의 헤딩 숫자보다 높은지 확인합니다.
<div>
<h3>Category</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam sit amet auctor lectus. Curabitur non est nibh.
Suspendisse vehicula fermentum quam.
Donec lobortis diam a ligula faucibus mattis.
</p>
<h4>Sub Category 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam sit amet auctor lectus. Curabitur non est nibh.
Suspendisse vehicula fermentum quam.
Donec lobortis diam a ligula faucibus mattis.
</p>
<h4>Sub Category 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam sit amet auctor lectus. Curabitur non est nibh.
Suspendisse vehicula fermentum quam.
Donec lobortis diam a ligula faucibus mattis.
</p>
</div>
숨겨진 콘텐츠
숨겨진 콘텐츠는 접근성을 위해 매우 유용합니다. 시각적으로 숨기면서 스크린 리더 사용자에게만 표시하거나 반대로 스크린 리더 사용자에게는 숨기면서 시각적으로 표시할 수 있습니다.
● Aria Hidden
aria-hidden은 아래와 같은 기능들과 함께 사용해야 합니다. 스크린 리더에서 무언가를 숨기기를 원한다면, aria-hidden='true'를 사용합니다.
- Collapsing Menu
- 반복적인 정보
- Off screen content
● CSS
CSS를 사용하여 콘텐츠를 숨기고 스크린 리더에서만 인식할 수 있게 허용할 수 있습니다.
.sr-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}이를 사용하여 다음을 수행할 수 있습니다.
- Form 요소에 추가적인 세부 정보 제공
- 숨겨진 라벨의 제공
- 상세한 에러 정보 제공
- 페이지 요소에 Context 제공
- 탐색을 위한 추가적인 안내 제공
또한 시각적으로도 숨기면서 동시에 스크린 리더에서도 숨길 수 있습니다.
{
display: none;
}
멀티미디어
오디오와 비디오 등의 멀티미디어를 사용할 때 모든 사용자들이 해당 콘텐츠를 이용할 수 있는 수단을 제공해야 합니다.
● 캡션
오디오가 있는 비디오에는 동기화된 캡션이 필요합니다. 비디오에서 말한 모든 내용은 캡션에 포함되어야 하며 캡션에 작성된 모든 내용은 비디오에서 말해야 합니다. 여기에는 이름 및 소리, 설명이 포함됩니다.
● 오디오 디스크립션
오디오 설명은 시각적으로 표시되는 모든 정보가 오디오를 통해 전달되어야 합니다. 비디오를 위한 스크립트는 내레이터가 모든 시각 정보를 설명하는 방식으로 작성할 수 있습니다.
● 키보드 액세스
모든 비디오 컨트롤 요소를 키보드를 통해 액세스 할 수 있어야 합니다.
타임아웃
타임아웃을 사용하는 경우 최소 20초 이상을 사용자에게 제공해야 합니다.
테스트
페이지에서 타임아웃 요소를 식별합니다.
타임아웃을 확인하고 더 많은 시간을 추가적으로 요청할 수 없거나 20초 미만이면 실패입니다.
표(Table)
표를 사용하여 데이터를 표시하는 경우, 헤더 셀과 데이터 셀을 프로그래밍 방식으로 연결하여 스크린 리더를 위한 테이블 내비게이션을 만들 수 있습니다.
테이블에는 한 행의 헤더와 한 열의 헤더로 두 가지의 헤더를 가지고 있을 수 있습니다. 한 행과 열에 두 가지 이상의 헤더를 가지고 있는 복잡한 테이블도 있을 수 있습니다. 각 테이블의 헤더 셀은 <th scope='col'> 또는 <th scope='row'>를 가지고 있어야 합니다.
두 레벨 이상의 헤더를 가지고 있는 복잡한 테이블의 경우에는 각 헤더는 유니크한 id를 가지고 있어야 하며 각 데이터 셀은 관련된 헤더 셀의 id 속성을 가지고 있어야 합니다.
테이블에 연결된 텍스트가 있는 경우, 텍스트가 프로그래밍 방식으로 테이블에 연결되어 있는지 확인합니다. 이를 위해 <caption> 속성을 사용합니다. 이 속성은 <table> 속성 아래에 첫 번째 속성으로 사용되어야 합니다. 캡션은 필수는 아니지만 페이지를 탐색하려는 스크린 리더 사용자에게는 매우 유용할 수 있습니다. 캡션 속성은 데이터에 Context를 제공하므로 데이터 테이블에서 권장하고 있습니다.
테스트
데이터 테이블을 식별합니다. (레이아웃 테이블은 제외)
테이블의 소스 코드를 봅니다.
테이블 헤더를 식별합니다.
| Name | Height | Age |
| Walter | 6'4 | 34 |
| Steve | 5'4 | 30 |
<table>
<caption>User's Height and Weight</caption>
<tr>
<th scope='col'>
Name
</th>
<th scope='col'>
Height
</th>
<th scope='col'>
Age
</th>
</tr>
<tr>
<th scope='row'>
Walter
</th>
<td>6'4</td>
<td>34</td>
</tr>
<tr>
<th scope='row'>
Steve
</th>
<td>5'4</td>
<td>30</td>
</tr>
</table>
| Name | Height | Age | |
| Feet | Inches | ||
| Walter | 6 | 4 | 34 |
| Steve | 5 | 4 | 30 |
<table>
<caption>User's Height and Weight</caption>
<tr>
<th rowspan='2' id='name'>
Name
</th>
<th colspan='2' id='height'>
Height
</th>
<th rowspan='2' id='age'>
Age
</th>
</tr>
<tr>
<th id='feet' headers='height'>
Feet
</th>
<th id='inches' headers='height'>
Inches
</th>
</tr>
<tr>
<th headers='name' id='walter'>
Walter
</th>
<td headers='height feet walter'>6</td>
<td headers='height inches walter'>4</td>
<td headers='age walter'>34</td>
</tr>
<tr>
<th headers='name' id='steve'>
Steve
</th>
<td headers='height feet steve'>5</td>
<td headers='height inches steve'>4</td>
<td headers='age steve'>30</td>
</tr>
</table>
직군별 체크리스트
세균무기가 알려주는 서비스 기획의 모든 것 | 세균무기 - 교보문고
세균무기가 알려주는 서비스 기획의 모든 것 | 세균무기와 함께하는 서비스 기획의 모든 것!이 책은 저자인 세균무기가 약 20년 동안 서비스 기획자이자 프로덕트 오너로 일하며 블로그, 커뮤니
product.kyobobook.co.kr