brunch

You can make anything
by writing

C.S.Lewis

by 미경 Jul 05. 2023

UX-Accessibility접근성을 고려한 디자인 3

웹 접근성은 어떻게 측정하는가?

Accessibility접근성에 관한 마지막 글이다. 첫 번째에서는 왜 접근성을 고려한 디자인을 해야 하는지 알아보았고, 2편에서는 어떻게 접근성 있는 디자인을 하는지 공부했다. 마지막 편에서는 이미 개발된 웹사이트와 앱의 접근성을 어떻게 측정하고 발전시키는지 알아보겠다. 

결론적으로 웹접근성을 제대로 측정하기 위해서는, 자동화 도구 이용+ 매뉴얼 측정+사용자 리서치가 요구된다. 


자동화 도구를 이용

자동화 도구를 사용하면 해당 웹사이트의 웹접근성을 평가하고 측정해 준다. 가장 대표적인 도구로는

Site Improve

구글 라이트 하우스 (개발자 도구를 통해 이용 가능하다.)

Wave

Tenon

Sortsite

등이 있다. 참고로 가장 개인적으로 많이 쓰는 도구는 웹 사이트 시멘틱 구조(Semantic structure)를 쉽게 보여주는 Wave이다. 해당 도구들은 크롬 플러그인으로 간단히 설치하고 바로 이용할 수 있다. 도구마다 접근성을 측정하고 나타내는 방법이 다 다르다. Site Improve 같은 경우에는 WCAG레밸에 따라 A, AA, AAA로 표기한다면, 크롬 라이트하우스는 100점 만점으로 접근성을 평가하고 WAVE의 경우에는 에러의 수로 접근성에 문제가 되는 요소를 나타낸다. 

구글 라이트 하우스의 예시

이러한 자동화 도구를 사용할 경우 즉각적으로 웹 접근성 리포트를 받아볼 수 있고 어느 요소가 문제인지 알 수 있다. 하지만 안타깝게도 자동화 도구는 여러 한계가 있다. 그렇기 때문에 웹 접근성을 측정하기 위해서 단독으로 자동화 도구를 사용하는 것을 비추한다. 


자동화 도구의 한계란 무엇인가

첫 번째 이유는 부정확성이다. 영국 정부는 아래와 같은 실험을 진행했다. 그들은 접근성 문제들을 일부러 만들어 웹사이트에 이런 문제들을 설치하였고 10가지의 자동화 도구를 사용하여 몇 개의 문제를 찾을 수 있는지 테스트하였다. 그 결과, 그들이 만든 장애물 중 상당 부분을 이 10가지 도구는 잡아내지 못하였다. 구체적으로 143개의 장애물 중, 총 42개의 문제를 자동화 도구는 잡아내지 못했다. 결론적으로 부정확성률은 29%이다. 


두 번째 이유는 컴퓨터화된 테스트가 실제 사람들이 인터넷을 사용하는 방식을 완벽하게 시뮬레이션할 수 없다. 또한 자동화 도구는 웹 접근성의 문제가 실제 사용자 경험에 어떻게 영향을 미치는지를 판단할 수 없다.


마지막으로, 매뉴얼 테스트는 특정 문제가 왜 해결해야 할 우선순위로 고려돼야 하는지 알려준다


비유를 들자면, 자동화 도구는 맞춤법 검사기를 사용하는 것과 같다고 생각해 볼 수 있다. 자동화 도구는 문제를 찾는 데 도움이 될 수 있지만, 그것만을 단독으로 사용해서는 안된다. 


매뉴얼 측정

매뉴얼 측정은 수동적으로 접근성을 측정하는 것이다. 수동적으로 웹 접근성을 측정해야 하는 항목은 크게 아래와 같다. 

1. 키보드 인터렉션

2. 보이스 오버나 스크린 리더

3. 데스크톱에서 줌인 200프로를 했을 때 웹 디자인이 올바르게 모바일로 변환되는지


첫 번째로 키보드 인터렉션은 탭 (tab) 키를 눌렀을 때 자동 활성화 된다. 다시 말해 탭키나 화살표, 엔터(enter/return), 스패이스(space) 등으로 자유롭게 왭 콘텐츠를 내비게이션 할 수 있어야 한다. 이는 마우스 이용이 힘들거나 불가능할 경우 사용자들은 키보드를 통해 웹콘텐츠를 읽어나갈 수 있어야 한다. 

nhs (https://www.nhs.uk/)를 보면 탭키를 눌렀을 경우 좌측 상단처럼 키보드 인터렉션이 재생되며 웹사이트를 마우스 사용 없이 쉽게 내비게이션 할 수 있다. 


두 번째로는 스크린리더나 보이스 오버를 사용하여 해당 웹사이트의 콘텐츠가 접근가능한지 파악하는 것이다. 이 두 가지 도구는 웹사이트의 내용을 소리로 바꿔주는 역할을 한다. 이 도구들은 시각적 장애가 있는 사용자들을 위한 웹 접근성 도구이며, 웹사이트의 내용을 소리로 바꿔줌으로써, 웹사이트를 이해하고 내비게이션 하는데 도움을 준다. 


마지막으로 데스크톱으로 줌인하였을 경우 데스크톱 디자인이 모바일 디자인으로 바뀌어야 하며 웹사이트의 콘텐츠는 깨지지 않고 잘 보여야 한다. 이 역시 시각 장애인들을 위한 것이다. 시각적으로 장애가 있거나 노안이 있을 경우 보통 웹사이트를 줌인하여 글자를 크게 해서 보는 경우가 많다. 이를 위해 줌인 200프로를 하였을 경우 올바르게 모바일 디자인으로 바뀌어야 한다. 


이제 까지 어떻게 웹 접근성을 측정해야 하는지 알아보았다. 당신의 웹사이트가 이미 개발되어 릴리즈가 되었다면 자동화 도구와 매뉴얼 측정을 통해 웹 접근성을 파악하고 어떻게 개선해야 할지 알아보자. 또한 여건이 된다면 장애가 있는 사용자들을 테스팅에 초청하여 프로덕트를 사용해 보고 어떻게 개선해야 할지 심층적으로 알아보자. 

이전 06화 UX-Accessibility접근성을 고려한 디자인 2
brunch book
$magazine.title

현재 글은 이 브런치북에
소속되어 있습니다.

작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari