Skip to content

접근성과 사용성 엮어내기

이 글에서 유리 파즈(Uri Paz)는 접근성 가이드라인을 준수했음에도 불구하고, 실제로 사용자 테스트를 진행했을 때 문제가 발생할 수 있음을 설명해줍니다. 가능한 한 많은 사람이 여러분의 웹사이트를 온전히 사용할 수 있도록, 사용성 테스트를 통해 웹 접근성 모범 사례를 만드는 방법을 알아보세요.

공식적으로 웹 접근성 표준을 적용하면, 제품 개발 기간 동안 시각 장애인이 참여하지 않아도 그들이 사용할 수 있는 제품을 만들 수 있습니다. 하지만 과연 제품이 모두 완성된 후에도 사용성이 좋을까요? 이 글에서는 시각적 장애뿐 아니라 웹 접근성 표준과 사용성 원칙의 관계에 대해서도 간략히 설명할 것입니다. 또한 시각 장애인visually impaired participants과 전맹인blind participants을 대상으로 한 사용성 실험으로부터 얻은 주요 내용들도 공유할 예정입니다.

시각 장애란?

시각 장애란 앞은 볼 수 있지만 시력이나 시야가 줄어든 사람을 뜻합니다. 시각 장애는 읽기, 걷기, 운전하기, 사회 활동과 같은 일상 생활을 수행하기 어렵고 불가능하게 합니다. 한쪽 눈이나 양쪽 눈의 가벼운 시력 손상부터 심각한 시력 손실까지 다양한 시각 장애가 존재합니다.

시각 장애의 몇 가지 예입니다.

  • 중심암점
    가운데 시야의 시력 상실
Screenshot of an online stationery store with a large, black circle in the center, and the rest of the screen a bit blurred to show the impact of Central scotoma
“Peripheral Pierre”가 활성화된 펑키파이 장애 시뮬레이터Funkify Disability Simulator
  • 터널시야
    주변 시야의 시력 상실
Screenshot of an online stationery store with only a small part of the site visible, to show the impact of tunnel vision
“Tunnel Toby”가 활성화된 펑키파이 장애 시뮬레이터
  • 반맹
    시야 절반의 시력 상실
Screenshot of an online stationery store with only half the screen visible, to show the impact of Hemianopia
“Side(hemianopia)”가 활성화된 노커피 비전 시뮬레이터NoCoffee Vision Simulator

경사와 위사

직조는 세로 방향의 경사와 가로 방향의 위사가 교차해 만드는 직물 생산 방식을 말합니다. 직조와 마찬가지로 시각 장애인을 위한 사용자 경험 창출은 접근성과 사용성이라는 두 가지 요소의 결합으로 이루어집니다.

A diagram showing the structure of warp (vertical) and weft (horizontal) yarns in a weave

경사–접근성

웹 접근성이란 웹사이트, 웹 애플리케이션 및 기술을 장애인이 사용할 수 있도록 디자인하고 개발하는 것을 의미합니다. 더 구체적으로 사람들은 웹을 인지하고, 이해하고, 탐색하고, 웹과 상호작용하고, 웹에 기여할 수 있습니다. 사람들이 웹에 접근하는 방법에 영향을 끼칠 수 있는 장애는 청각, 인지, 신경, 신체, 언어 그리고 시각 장애 등 다양하다.

“웹의 힘은 그 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할 수 있는 것이 필수적인 요소다.”

-팀 버너스 리Tim Berners-Lee, 월드 와이드 웹 창시자

버너스 리가 말했듯, 웹의 보편성을 보장하고 모두에게 웹에 대한 접근을 제공하기 위해 굉장히 많은 약어들을 제공하는 광범위한 웹 접근성 표준이란 것이 존재합니다.

다음 세 가지 핵심 요소를 살펴봅시다.

Screenshot of the web content accessibility guidelines 2.1 documentation with the main sections highlighted, including the principle, guideline and success criterion
WCAG 2.1에는 인지 가능, 조작 가능, 이해 가능, 견고함이라는 네 가지 원칙에 따라 분류되어 있는 열세 가지의 가이드라인이 있습니다. 각각의 가이드라인은 테스트 통과 여부에 따라 A, AA, AAA 세 가지 수준의 평기 기준들을 가지고 있습니다.

웹 접근성 지침을 준수하는 것은 기술적이며 높은 수준의 전문성을 필요로 합니다. 보다 쉽게 접근성이 좋은 제품을 만들기 위해 웹 접근성 지침을 준수하기만 하면 과연 사용하기 쉬운 제품이 만들어질까요?

저는 시각 장애인, 전맹인 참가자들과 함께 웹 접근성 지침을 따르면 접근 가능하다고 판명된 제품을 테스트했는데 다음과 같은 일들이 벌어졌습니다.

  • 시각 장애인들은 폰트 굵기가 너무 가늘어 큰 사이즈의 폰트를 읽을 수 없었습니다.
  • 시각 장애인들은 날짜 선택 내비게이션을 이해하기 너무 어려워 식당을 예약할 수 없었습니다.
  • 시각 장애인들은 그들의 시야 바깥에서 활성화된 로그아웃 버튼을 찾을 수 없었습니다.

즉 웹 접근성 지침을 엄격하게 적용하면 어느 정도 도움은 줄 수 있습니다. 하지만 사용성 좋은 제품이 되는 것은 아닙니다. 사용성을 항상 고려해야 한다는 사실은 W3C 문서에도 명시돼 있습니다.

“디자이너, 개발자, 프로젝트 매니저들은 웹 접근성 지침을 준수하기 위해 체크리스트를 통한 기술적인 측면에서의 접근성에만 신경 씁니다. 하지만 결국 인간 상호작용 측면이 고려되지 않아 접근성을 높이는 데 실패하게 됩니다.”

저는 특히 브루스 로슨Bruce Lawson의 책 《웹 접근성: 웹 표준과 규정 준수Web Accessibility: Web Standards and Regulatory Compliance》의 그림 설명을 좋아합니다.

“접근성이 좋은 웹사이트를 만들기 위해서 단순히 레시피를 따르기만 하면 된다고 생각하지 않았으면 좋겠습니다.접근성이라는 맛있는 디저트를 만들기 위한 레시피: CSS 한 숟갈, 코드 한 숟갈, 시맨틱 마크업 한 꼬집 그리고 WCAG 지침 한 컵. 레시피를 따라 하는 것만으로도 맛있는 푸딩이 만들어지면 좋겠지만··· 성가신 사실은 인간이란 제각각 다른 욕구와 능력을 가지고 있다는 점입니다.”

접근성 표준 준수는 필수적인 목표지만(법적으로 필수이기도 합니다), 단순히 표준을 준수하기만 하면 아무 의미가 없습니다.

 

위사 – 사용성

사용성usability이란 특정 환경에서 특정한 사용자가 특정한 목표를 수행하기 위해 사용자 인터페이스를 사용할 수 있는지를 측정하는 지표입니다.

사용성은 공식이나 예, 아니요로 답할 수 있는 분야가 아닙니다. 수년간 소프트웨어 시스템의 사용성을 측정하기 위한 다양한 사용성 모델들이 제안돼왔습니다. 그중 하나는 1993년 제이콥 닐슨Jacob Nielsen이 “사용성이란 사용자 인터페이스의 1차원적 속성이 아니라 다섯 가지 핵심 속성으로 구성됐다”고 저술한 그의 저서 《사용성 엔지니어링Usability Engineering》에서 만든 모델입니다.

1. 학습 용이성Learnability

사용자가 처음 화면을 만났을 때 얼마나 쉽게 기본적인 동작들을 수행하는가.

2. 효율성Efficiency

사용자가 화면에 익숙해졌을 때 얼마나 빨리 작업을 수행하고 생산성을 높일 수 있는가.

3. 기억력Memorability

일정 기간 방문하지 않던 재방문 유저가 모든 사용법을 다시 배우지 않고도 얼마나 빨리 숙련도를 회복할 수 있는가.

4. 오류Errors

사용자가 얼마나 많은 오류를 발생시키고, 이러한 오류들은 얼마나 심각하며, 얼마나 쉽게 오류를 복구할 수 있는가.

5. 만족감Satisfaction

사용자들이 디자인에 주관적으로 얼마나 만족하는가.

사용성 좋은 제품은 디자인과 개발 단계에서 이러한 다섯 가지 기본 요소를 필수적으로 만족해야 합니다.

 

시각 장애인, 전맹인들과 함께 사용성 테스트를 진행하며 배운 것들

사용성 테스트는 참가자들이 일련의 과제들을 수행하는 구조화된 인터뷰입니다. 참가자들은 테스트를 진행하며 제품과의 상호작용에 대한 반응을 구두로 설명합니다. 이를 통해 관찰자들은 참가자들이 사용자 인터페이스에서 어떤 행동을 하고 있는지뿐만 아니라 왜 그렇게 하는지 이해할 수 있습니다.

제가 처음 접근성 표준을 준수하는 제품에 대한 시각 장애인 및 전맹인을 대상으로 사용성 테스트를 진행했을 때는 이러한 유형의 테스트에 대한 정보를 찾기가 쉽지 않았습니다. 그래서 저는 그 테스트 과정의 몇 가지 중요한 점들을 공유하기로 마음먹었습니다.

공유하고자 하는 점은 세 부분으로 나뉩니다.

  1. 세션 전
  2. 세션 중
  3. 세션 후
A visually impaired participant examines a magnified user-interface while a moderator watches from the side
시각 장애인 참가자들과 진행한 두 가지, 전맹인들과 진행한 세 가지 세션을 합쳐 총 다섯 가지 세션을 진행했습니다.
  1. 세션 전

테스트 목표 정의하기

사용성 테스트의 시작점입니다. 테스트 목표는 명확하고, 구체적이며, 달성 가능하고, 연관성이 있어야 합니다. 테스트 목표는 여러 팀과의 협력을 통해 정하게 됩니다. 디자이너, 프로덕트 매니저, 개발자, 기획자, QA 등 각자의 역할은 다른 관점과 전문지식을 제공합니다.

작업 생성하기

시각 장애인이나 전맹인 참가자들이 사이트를 탐색하는 방식의 특성상 작업이 완료되기까지 오랜 시간이 걸릴 수 있으므로 중요하게 생각되는 항목들을 우선적으로 해서 작업의 우선순위를 정하게 됩니다. 하지만 시간이 오래 걸린다고 해서 복잡한 절차를 간소하게 만드는 등 타협은 하지 말아야 합니다.

일정 설정하기

사용성 세션 일정을 설정하는 것은 제품의 복잡성이나 참가자들의 물리적 한계 등 다양한 문제를 고려해서 설정됩니다.

다음과 같은 사항들을 고려해야 합니다.

  • 실험실에 들어오고 나갈 때 참가자와 함께 이동할 시간(우리는 각각의 참가자들과 동행할 직원을 배정했습니다)
  • 참가자가 자기가 쓰는 장비를 가져올지에 따라,  참가자의 조건에 맞춰 보조기술을 설정하고 배치할 시간
  • 참가자가 편안하게 인터페이스를 탐색할 수 있는 시간
  • 각 세션이 끝난 후 모여서 세션의 내용을 간단히 정리할 시간

우리는 각 세션마다 1시간을, 그리고 각 세션 사이에는 45분의 여유를 두었음에도 시간이 너무 부족했습니다(세션 사이에는 1시간 정도의 여유를 두는 것이 좋습니다).

참가자 모집하기

어느 한 집단의 배경과 능력을 대표할 수 있을 만한 참가자를 선택하는 것이 테스트 과정에서 정말 중요합니다. 우리는 온라인에서 물건을 구매해본 경험이 있는 시각 장애인과 전맹인을 찾고 있었습니다.

병원, 전문학교, 대학의 시각 장애인들을 위한 정보기술 학습센터처럼 참가자를 찾을 수 있는 방법은 매우 다양합니다.

우리 같은 경우에는 안과 전문의로 일하고 있는 제 아내가 자신이 일하고 있는 병원의 ‘시각 장애인과 전맹인을 위한 정보센터’의 담당자를 소개해줬습니다. 운이 좋게도 우리가 원하는 참가자들을 적극적으로 찾아주는 담당자를 만났습니다.

참가자들을 준비시키기 위해 우리는 다음과 같은 사항들을 논의했습니다.

참가자들을 지켜보는 사람들이 있고, 세션이 녹화되는 등의 정보를 포함하는 테스트의 성격
참가자들의 온라인 쇼핑 경험. 참가자들이 주로 컴퓨터나 모바일로 구매하는가? 선호하는 브라우저는 무엇인가? 어떤 보조기술을 사용하는가? 추가적으로 영어를 사용하지 않는 나라에서 테스트가 이루어지는 경우에는 인터페이스가 영어로 쓰여 있을 때의 언어 능력 수준을 물어봐야 합니다.
참가자들은 인센티브를 받게 될 것입니다(보상품이 접근 가능한지를 확인해두는 것도 중요합니다).
참가자들이 그들의 장비를 가져올 수 있는지 아닌지
전반적으로 응답률은 높았고, 대부분의 참가자가 참가를 희망했습니다.

테스트 환경 설정하기

참여를 확정 지은 참가자들이 웹과 상호작용하는 방법은 제각각이었습니다. 누군가는 글꼴, 색상 대비, 화면 확대 또는 스크린리더에 대한 설정을 바꿔 정보를 습득하는 반면, 누군가는 이러한 설정들의 몇 가지 조합이 필요하기도 했습니다.

대부분의 참가자들은 짐 옮기기를 어려워하거나 데스크톱 컴퓨터를 사용하고 있어서 자기  장비를 가져오고 싶어 하지 않기 때문에 우리가 직접 준비해야 했습니다. 보조 도구를 설정하는 법을 알고 있는 사람을 찾기만 한다면 세션 사이사이에 보조 도구를 설정하거나 조정하는 것은 어려운 일이 아니었습니다.

우리는 다양한 브라우저와 NVDA, JAWS, ZoomText와 같은 보조 도구들을 여럿 준비해뒀습니다.

또 화면에 더 가까이 다가가야 하거나 다른 각도로 봐야 하는 시각 장애인들을 위해서 카메라와 마이크를 준비해야 합니다. 실험실이 물리적으로 접근 가능한지도 반드시 확인해야 합니다.

입구에는 계단이 없고, 화장실이나 대중교통에 접근할 수 있어야 하며, 안내견이 앉아 있을 수 있는 장소가 있어야 합니다.

기밀유지계약서 발송NDA; Sending A Non-Disclosure Agreement

사전 동의를 원하는 다른 경우와 마찬가지로 쉽게 확인할 수 있는 PDF를 사용해 NDA를 온라인으로 발송할 수 있습니다.

세션 리허설하기

사용성 세션 일주일 전에 예상치 못한 어려움을 피하기 위해 시각 장애인 참가자를 대상으로 리허설을 진행했습니다. 리허설 중 우리가 사용하는 화면 공유 도구가 보조 도구 중 하나와 충돌을 일으키는 것을 확인할 수 있었습니다. 리허설은 시간 관리에 대한 불안감을 없애주기도 합니다. 예를 들어, 진행자의 소개가 너무 길어서 계획했던 테스트의 몇 가지 항목을 확인해볼 수 없었습니다.

또한 특정 테스트가 명확하지 않거나 예상보다 쉽거나 어려운 경우에도 테스트 계획을 수정하는 데 도움이 되었습니다. 중요한 것은 리허설을 통해 중재자가 ‘실제’ 참가자와 함께 연습해보고, 사용성 테스트에 대해 심리적으로 준비할 수 있었다는 점입니다.

2. 세션 중

사회자

사회자는 이처럼 원활한 사용성 테스트를 위한 핵심 요소입니다.

재러드 M 스풀Jared M. Spool은 이렇게 말했습니다.

 

“훌륭한 사용성 테스트 중재자는 오케스트라 지휘자와 비슷합니다. 참가자를 편안하고 스트레스 없도록 해줍니다. 중재자는 참가자들에게 낯선 사람들이 자신의 모든 행동을 지켜보고 있는 낯선 환경에 놓여 있다는 사실을 잊게 해줍니다. 중재자는 특히 문제가 되는 부분을 디자인 팀에 알려줍니다. 중재자는 또한 사용자 경험의 모든 측면이 수행될 수 있도록 체계화된 노하우와 인내심을 발휘합니다.”

여러 성격을 활용해 진행하기: 사용성 테스트를 위한 세 가지 역할

 

시각 장애인 및 전맹인을 대상으로 한 테스트에서 오케스트라 지휘자는 더욱 조심스럽게 행동해야 합니다. 예를 들어, 관찰자의 집중력에 영향을 끼치는 스크린리더가 사용된 세션의 경우에는 참가자에게 크고 명확하게 말하도록 요청해 참가자의 과정과 과제 이해 여부를 관찰자가 알 수 있도록 하는 것이 중요합니다.

관찰자

우리는 서로 다른 부서의 관계자들을 초대해 직접적으로 참가자들과 접촉하고 핵심 정보를 파악할 수 있는 더 좋은 기회를 갖도록 했습니다. 다만 결과에 대한 보고서를 보는 것보다 참가자의 경험을 직접 듣는 것이 더 유용합니다.

Three people remotely observing the usability session from a conference room
접근성의 장점은 다양한 역할군이 참여한다는 점입니다. 테스트 세션들 중 하나를 관찰하는 제품 디자이너, 프론트엔드 개발자, 분석가를 볼 수 있습니다. 총 12명의 관찰자가 있었습니다.

 

테스트 시간 동안 스크린리더가 주의를 산만하게 할지라도 참가자의 말에 귀를 기울이는 것이 중요합니다.

3.세션 후

보고서 작성하기

세션이 끝난 뒤, 테스트를 통해 얻은 결과를 보고서로 작성합니다.

몇몇 결과는 수정해야 할 버그와 관련돼 있었습니다. 예를 들어, 전맹인들은 NVDA의 요소 목록 대화 상자의 특정 버튼을 항상 찾지 못했고 때로는 “좋아요” 버튼을 클릭한 후 스크린리더를 통해 확인받지 못했습니다.

일부 결과는 콘텐츠와 연관돼 있었습니다. 예를 들어, 일부 전맹인 참가자들이 잘못된 양식을 작성하고 있다는 사실을 눈치 채지 못했거나 전체 페이지를 빠르게 훑고 싶었지만 aria-labels에 포함된 내용이 너무 길어 그러지 못했습니다.

또 일부 결과는 시각적인 환경과 연관돼 있었습니다. 돋보기 소프트웨어를 사용하는 시각 장애인 참가자들은 다음 동작이 화면의 다른 영역에 나타났을 때 어떻게 진행해야 할지 갈피를 잡지 못했습니다. 또한 “닫기” 아이콘이 충분한 색상 대비를 갖고 있었는데도 찾지 못했습니다.

결과적으로 우리는 회사의 여러 부서에 영향을 끼치는 65가지 문제점을 찾았습니다.

하지만 보고서는 긍정적인 점도 포함하고 있었습니다. 예를 들어, 일부 참가자는 링크 옆의 아이콘을 사용하면 텍스트를 읽을 필요가 없기 때문에 도움이 된다고 조언해주었습니다. 어떤 참가자들은 플레이스홀더 글자의 대비를 좋아했으며 몇몇 참가자는 이미지 확대 및 축소가 매우 잘 동작한다고 말해주었습니다.

“우리를 제외하고 우리에 관해 논하는 것은 의미가 없다”

2020년 7월 26일, 세계는 미국장애복지법ADA 서명 30주년을 맞이했습니다. 이 법은 버스를 타고, 학교에 가고, 영화를 보고, 박물관을 관람하는 등 기본적인 일상 생활조차 어려움을 겪던 장애인들에게 너무나 오랫동안 닫혀 있던 문을 열어주었습니다.

많은 행사가 이 역사적인 서명을 기록하고자 했지만 코로나 바이러스의 확산으로 인해 취소되거나 온라인 행사로 변경되었습니다.

장애 커뮤니티의 선구적인 연사들이 참여하는 버추얼 크립 캠프Virtual Crip Camp가 그중 하나입니다. 이 행사의 초대장에는 “우리를 제외하고 우리에 관해 논하는 것은 의미가 없다Nothing About Us Without Us”라는 슬로건이 적힌 녹색 버스가 있습니다.

A light green bus with the phrase “Nothing About Us Without Us” along the side underlined in red. Red-colored peace symbols are located on the back and front of the bus. A crutch and various black hands raised in fists and love fingers reach out of the windows. A wheelchair ramp is visible with the side door wide open. The text reads “Crip Camp: The Official Virtual Experience” in bold black letters
버추얼 크립 캠프의 초대장(당연히 넷플릭스의 다큐멘터리 “크립 캠프: 장애는 없다”와 관련돼 있습니다).

“우리를 제외하고 우리에 관해 논하는 것은 의미가 없다” 는 가장 많이 영향을 받는 사람들이 직접 의사결정에 참여해야 한다는 뜻을 담고 있습니다. 이 슬로건은 1990년대에 장애인 활동가들이 사용하기 시작했고, 그 이후 전 세계의 다양한 장애인 인권 활동에 인용되었습니다. 슬로건이 널리 퍼져나갔다는 사실은(SNS에서는 #NothingAboutUsWithoutUs라는 해시태그를 사용합니다) 장애인들이 그들의 삶에 영향을 끼치는 결정에 참여하려는 열망을 말해줍니다.

비슷한 DNA가 사용자 중심 디자인 접근법에서도 보입니다. 이 접근법은 사용자가 제품에 적응하는 것이 아니라 제품이 사용자에게 적합해야 한다는 철학을 가지고 있습니다. 사용자 중심 디자인 접근법에서는 개발 과정 중 서로 다른 시점에 다양한 기법들을 적용해 사용자와 협업을 진행합니다. 사용성 테스트는 그 기법들 중 한 가지입니다.

사용성 테스트의 진짜 마법은 테스트 결과가 아니라 참가자들을 실시간으로 관찰하고 그들의 말, 생각, 행동, 기분을 흡수하는 팀 구성원들의 관점 변화입니다. 결과적으로 팀원들은 공감 능력을 향상시키고, 다른 이들의 필요와 동기에 대해 더 잘 이해하고, 반영하고, 공유하게 됩니다.

참가자가 장애를 가진 경우에는 이러한 공감 능력이 특히 필수적입니다. 공감 능력은 관찰자를 행동하게 하고, 변화를 위한 동기를 부여하며, 장애를 가진 사람들의 경험에 대한 관심을 높여줍니다.

접근성 좋은 웹사이트를 만들어주는 자동화 도구들은 우리가 만든 이 사이트가 WCAG의 가이드라인을 얼마나 준수하는지 보여주지만 장애인들이 사용하기 좋은 웹사이트를 의미하지는 않습니다. 시각 장애인이면서 Wix에서 일하는 제 동료인 접근성 엔지니어 닐 오스만Neil Osman은 접근성의 기계론적인 방식에 대해 이러한 표현을 자주 씁니다.

“돼지에게 립스틱을 바를 수는 있지만 돼지는 여전히 돼지일 뿐입니다.”

단지 접근성 표준 목록을 따라 한다고 사용성이 좋은 제품이 만들어지는 것이 아닙니다. 장애를 가진 사람들을 위한 해결책을 만들기 위해, 우리 스스로가 그들에게 먼저 다가가야 합니다.

면책 조항: 이 글의 정보들은 법적 근거가 되지 않으며 모든 정보, 내용 및 자료는 오직 정보 제공 목적으로 쓰였습니다. 이 글의 정보는 최신 법률 또는 최신 정보가 아닐 수 있습니다.

 

 

도서 소개


헤이던 피커링의 《인클루시브 디자인 패턴
누구라도 접근 가능한 인터페이스를 만드는 데 실제로 적용할 수 있는 인클루시브한 디자인 패턴을 알려드립니다. HTML과 CSS·자바스크립트 라이브러리, WAI-ARIA 역할 및 웹 콘텐츠 접근성 지침의 올바른 사용법, 반응형 디자인에서 일반적인 접근성 문제를 해결하는 방법, 건너뛰기 링크를 다루는 방법, 내비게이션 영역 및 랜드마크의 효율적인 활용법, 버튼이나 폼을 유지하는 방법 등을 구체적으로 설명합니다.

저작권 정보이 글은 Smashing Magazine 기사를 번역한 것입니다. 저작권자의 정당한 허락을 받은 저작물로 한국어판 저작권은 웹액츄얼리에 있습니다. 웹액츄얼리의 서면 동의 없이 무단 전재, 복제를 금합니다. 원본은 Weaving Web Accessbility With Usability에서 확인할 수 있습니다.
참여를 기다립니다!웹액츄얼리에서 웹디자인 관련 영문 번역자를 찾습니다. 웹 콘텐츠 번역에 관심 있는 분은 메일로 간략한 본인 소개와 번역 이력을 보내주시면 연락드리겠습니다.
books@webactually.com

 



맨위로