WAVE - 웹 접근성 테스팅 도구

출처: 2022년, Full Stack Testing - A Practical Guide for Delivering High Quality Software by Gayathri Mohan, 9장 Accessibility Testing

 

한줄요약: 웹 접근성 테스팅에 활용할 수 있는 도구인 WAVE에 대해 소개한다.

 

---

 

접근성 감사 도구(Accessibility Auditing Tools)

접근성 감사 도구는 HTML 구조가 손상되지 않았는지 확인하고 경고를 표시한다. 예를 들어 모든 HTML 태그가 닫혀 있는지, 모든 이미지에 대체 텍스트 애트리뷰트(alt text attribute)이 있는지, 모든 Form 엘리먼트에 레이블이 있는지, 모든 엘리먼트 ID가 고유한지 등을 확인한다. 이 도구가 일차적 스캔을 수행하고 빠른 피드백을 제공하는 데 편리하다. 그러나 수동 테스트의 필요성이 없어지는 것은 아니다.

 

 

WAVE - 무료 접근성 감사 도구

WAVE는 웹 페이지가 접근성 표준(Web Content Accessibility Guideline: WCAG)을 준수하는지 확인하는 데 사용할 수 있는 온라인 접근성 평가 도구이다. 장애가 있는 개인이 웹 콘텐츠에 더 쉽게 접근할 수 있도록 돕는 평가 도구로 엘리먼트의 색 대비(color contrast), 언어 애트리뷰트(lang attributes) 등과 관련된 이슈를 표시한다.

 

WAVE 도구를 사용하여 감사를 실행하려면

1. WAVE 웹사이트(https://wave.webaim.org/)를 연다.
2. 웹페이지 주소 상자에 감사할 애플리케이션 URL을 입력한다.
3. 화살표를 클릭하여 감사를 실행한다.

 

아래 그림은 코레일 예매 웹 페이지의 주소를 입력한 결과이다. 좌측 Summary 탭은 6개의 카테고리에 대해 탐지된 접근성 이슈를 요약한다. 구별을 용이하게 하기 위해 각 카테고리의 색깔과 아이콘 모양이 의도적으로 다르다. 

• 에러(Errors): 특정 사용자에게 영향을 미치는 이슈, WCAG 요구사항 미준수
• 색 대비 에러(Contrast Errors): WCAG 색 대비 요구사항을 준수하지 않는 텍스트
• 경고(Alerts): 접근성 이슈를 야기할 수 있는 엘리먼트이며 그 영향에 대한 평가자의 판단이 필요
• Features: 올바르게 구현되면 접근성을 향상시키는 엘리먼트
• 구조적 엘리먼트(Structural Elements): HTML/ARIA 페이지 영역, 헤딩 구조(heading structure), 숨은 엘리먼트, 엘리먼트 중첩 구조(nesting)
• ARIA: 접근성 향상을 위해 HTML 엘리먼트에 추가하는 애트리뷰트인 ARIA(Accessible Rich Internet Applications)가 사용된 부분을 식별

 

 

 

아래와 같이 View Details을 클릭하면 Summary에 표시된 건수에 대한 더 자세한 목록이 나타난다. 화면 우측에 표시된 웹 페이지 엘리먼트 옆에는 상응하는 이슈 아이콘이 붙어 있다. Details 탭의 다양한 아이콘 스타일을 웹 페이지의 아이콘과 일치시켜 쉽게 식별 및 디버깅할 수 있도록 하였다. 엘리먼트 옆의 아이콘을 클릭하면 해당 이슈에 대해 더 자세히 설명하고 이슈가 발생한 코드로 바로 찾아갈 수 있는 팝업창이 뜬다.

 

 

다음으로 페이지 구조를 보려면 Summary 섹션 위에 있는 컨트롤을 사용하여 CSS 스타일을 끌 수 있다. 그러면 Structure 탭에 페이지 구조 분석이 표시된다. 아래 그림에서 볼 수 있듯이 엘리먼트와 콘텐츠의 순서를 쉽게 확인하고 표시된 계층 구조를 고려하여 네비게이션이 예상대로 작동하는지 확인할 수 있다.