안녕하세요, 엔비전스입니다.

기업마다 프로세스가 다양하겠지만 접근성 진단은 아무래도 접근성에 대한 이해도가 있어야 가능하기에 서비스 출시 이후 접근성 전문가가 별도의 프로세스로 진단하는 경우가 많습니다. 그러나 개발에서부터 접근성을 어느정도 적용할 수 있다면 반복적인 문제에 소비되는 시간이 줄어들고, 그 남는 시간에 조금 더 장애인 사용자의 사용성을 고민하여 진단 및 해결방안을 제시할 수 있습니다. 개발자 입장에서도 처음부터 접근성을 어느정도 고려하면서 코드가 만들어졌을 것이기 때문에 해결방안을 적용하기가 훨씬 수월해질 것입니다.

그래서 본 시리즈에서는 웹과 네이티브 앱을 기준으로 개발자가 스스로 접근성을 진단하는 방법에 관하여 다루고자 합니다. 접근성을 잘 알지 못하더라도 기본적인 가이드라인과 접근성 진단 자동화 도구를 사용하면 적어도 60% 정도는 접근성 이슈를 해결할 수 있으며 그렇게 되면 장애인 사용자가 특정 서비스 자체를 사용하지 못하는 문제는 대부분 해결할 수 있습니다.

오늘은 그 첫 시간으로 웹접근성 자동화 진단도구 중 Axe를 소개하고자 합니다.

Axe란?

기본적인 접근성 오류를 진단하는 목적으로 개발된 Axe는 접근성 컨설팅 및 접근성 진단과 관련된 소프트웨어를 개발하는 Deque Systems inc. (이하 Deque)라는 전문 회사에서 개발하고 있는 접근성 자동화 진단도구입니다. HTML, CSS, JS로 브라우저에 그려진 페이지를 진단하는 브라우저의 확장 프로그램과 React, Vue와 같은 라이브러리 소스코드를 작성할 때, 접근성 오류를 바로잡을 수 있게 도와주는 AXE linter로 나눌 수 있습니다. 따라서 브라우저 확장형 프로그램으로 설치하여 사용하는 방식은 굳이 개발자가 아니어도 쉽게 사용할 수 있습니다.

1, 2부에서는 브라우저형 확장 프로그램을 기준으로 사용법을 설명하고 3부에서는 Axe linter를 이용하여 React나 Vue와 같은 개발 환경에서 접근성을 진단하는 방법을 살펴보도록 하겠습니다.

Axe DevTools(브라우저 확장 프로그램)의 특징:

• Chrome, Edge, Firefox에서 확장 프로그램으로 설치하여 사용 가능하므로 사용법이 매우 쉽습니다. 다만 Firefox의 경우 일부 기능만 제공하며 본 문서에서는 Chrome 확장 프로그램을 위주로 설명합니다.
• 브라우저에 페이지를 불러온 다음, 마크업 구조를 바탕으로 접근성과 관련된 마크업에 오류가 없는지를 테스트하는 자동화 테스트와 표, 대화상자, 상호작용 콘텐츠와 같이 페이지의 맥락을 파악해야 테스트가 가능한 부분을 커버하기 위한 GUided test로 나뉘어집니다. Guided test의 경우 인공지능 메커니즘을 이용하여 대부분의 진단을 수행하지만 모달 대화상자 영역이 어디인지, 링크, 버튼, 체크박스와 같은 요소들의 레이블이 적절한지 등은 수동 진단이 필요한 부분이기 때문에 맥락을 파악해야 하는 몇 가지 질문들이 출력되고 이에 답하는 것만으로 테스트를 수행할 수 있습니다.
• 국제 접근성 지침인 WCAG 2.1을 기준으로 진단합니다.
• 무료와 유료 버전으로 나뉘어지며, 페이지의 마크업 등 기본 진단 기능은 무료 버전으로도 이용할 수 있습니다.
• 마크업된 페이지를 기반으로 하는 자동 진단의 경우 각 오류에 대해 자세한 설명 링크가 제공되며 이에 맞는 해결방안을 제시합니다. 예를 들어 <button aria-hidden=”true”>제출</button>과 같이 aria-hidden 속성이 true값으로 적용되어 있으나 탭 키를 눌러서 접근할 수 있는 요소는 명백한 오류이므로, tabindex -1, display: none, disabled 속성 등을 통해 초점을 제거해야 함을 안내합니다.
• 오류가 사용자에게 미치는 정도에 따라 critical, serious, moderate, minor, best practice 단계로 구분되어 이슈의 중요도를 표시합니다.
• 유료 버전 사용 시 테스트 결과를 json 또는 csv 파일 형식으로 내보낼 수 있습니다.

설치 및 자동 진단해보기

1. Axe DevTools을 설치합니다.
2. 접근성 테스트를 하고자 하는 페이지 접속 후 개발자 도구(F12, 또는 Ctrl-Shift-I)를 실행하여 “axe DevTools” 탭을 선택합니다.
   1. “axe DevTools” 탭이 표시되지 않는다면 탭 우측 끝에 있는 ≫(닫는 겹화살괄호) 버튼을 눌러 탭 더보기 메뉴에서 선택합니다.
   2. 키보드 사용 시에도 보이는 마지막 탭에서 오른쪽 화살표 키를 누르면 탭 더보기 메뉴가 확장됩니다.
3. 부분 페이지 진단, Guided Test, 리포트 내보내기와 같은 기능을 사용하기 위해서는 유료 버전이 필요하므로 회원 가입 후 로그인 및 유료 결제를 진행해야 하며(7일은 평가판으로 사용 가능) 단순히 정적인 마크업 진단만을 이용하는 거라면 로그인을 하지 않아도 됩니다.
4. 페이지 전체가 아닌 특정 부분을 진단하고자 하는 경우에는 Scan part of my page를 실행한 다음 진단하고자 하는 영역을 마우스로 클릭하여 선택합니다. 선택된 영역은 테두리로 강조됩니다. 페이지 전체 진단 시에는 Scan ALL of my page 버튼을 실행하면 됩니다.
5. 진단이 완료되면 앞서 설명한 바와 같이 중요도에 따른 이슈들이 목록으로 나타나며 total, critical, serious 등의 분류를 선택하여 특정 중요도에 대한 이슈 또는 전체 이슈를 필터링하여 확인할 수 있습니다.

지금까지 AXE 접근성 자동화 진단에서 정적인 마크업을 기준으로 이슈를 진단하는 방법에 대해 살펴보았습니다. 접근성을 적용하다보면 가장 많이 하는 실수 중 하나는 WAI-ARIA 속성을 잘못 사용하는 것입니다. 이러한 기본적인 마크업 문제들을 수정하는 것 만으로도 상당히 많은 문제를 해결할 수 있습니다. 다음 시간에는 키보드 접근성, 모달 대화상자 접근성, 영역 구조화 등 조금 더 다양한 테스트를 하는 방법에 대해 guided test 기능을 위주로 살펴보도록 하겠습니다.