ⓒ 2014 NHN TECHNOLOGY SERVICES CORPORATION

접근성과 사용성, 기획자가 챙겨야 하는 이유

김성훈

Contents.

1. 웹접근성 어떻게 하고 있나요?

2. 정말 문제가 있나요?

3. 사용자를 잘 고려하고 있나요?

4. 기획단계에서 잘 반영하고 있나요?

5. 직군별 가이드를 잘 이해하고 있나요?

6. 마치며…

웹접근성 어떻게 하고 있나요?

이미지 출처 https://www.flickr.com/photos/kalexanderson/5254488638

기획자가 웹접근성까지 꼭 알아야 하나요?

FE개발에서 알아서 하는 거 아닌가요?

시간이 부족해서 웹접근성을 완벽히 적용하기 어려워요.

일단 프로젝트 먼저 완료하고 웹접근성을

살펴봅니다.

웹접근성 품질마크만 획득하면 되는 거 아

닌가요?

UX기획자

AS-IS 웹접근성 수행 프로세스

• 상세 설계서

분석/설계

• 디자인

• FE/BE

• 자동 평가

• 전문가 평가

• 인증마크 획득

구현 평가 완료

웹접근성을

기계적으로

적용

최종 단계에서

수행하는

웹접근성

우선 순위를

고려하지 않은

기획

타직군의 대한

웹접근성

이해도 부족

웹접근성은 하고 있어요. 그런데…

정말 문제가 있나요?

이미지 출처 https://www.flickr.com/photos/23194090@N00/2307306626

Case1) 논리적인 구조로 제공하지 못한 경우

Bad Good

Case2) 방향 지식적 문구를 사용한 경우

Bad Good

정문에서 마주봤을 때 왼쪽부터 신관, 별관, 본관이 위치하고 있습니다. 신관 - 출입구에서 왼쪽에 문화관광과, 오른쪽에 주민생활지원과가 있습니다. 복도를 따라 왼쪽으로 들어가면 오른편에 교환실이 있습니다.

Case3) 의미를 제대로 전달하지 않은 경우

모양으로만 아이콘의 의미를 인지하기 어려울 뿐만 아니라, 대체 텍스트를 제공하고

있으나 그 의미를 충분하게 전달하지 못한 경우

Bad

Case4) 오류 발생 시 문제가 발생하는 경우

자동인증 방지문자를 잘못 입력한 오류지만

ID/PW 모두 삭제되어 다시 처음부터 입력해야 함.

Bad

사용성 적용 범위 수행 단계 타 직군 이해도

비장애인의 사용성만 고려

설계서에 접근성 고려가 안됨

접근성 준수만을 목적으로 함

개발 완료 후 수정으로 인한

리소스 증가

적절치 못한 정보 구조

문제를 인지하지 못함

접근성 검수를 하지 못함

UX 관점의 고민이 필요합니다.

사용자를 잘 고려하고 있나요?

이미지 출처 http://500px.com/photo/50052600/jump-over-your-shadow-by-magdalena-roeseler

혹시 비장애인의 사용성 만을 고려하지 않았나요?

신체장애 청각장애 시각장애 환경장애 비장애인

사용성 접근성

휴리스틱 평가 (Heuristics Evaluation; HE)

휴리스틱(Heuristics; 발견적 접근법)을 이용한 전문가

평가의 한 방법

사용성 평가 방법

01. 사용자에게 시스템의 현재 상태를 시각화하여 보여준다. 02. 현실 세계와 부합하도록 시스템을 설계한다. 03. 사용자에게 적절한 통제권을 부여한다. 04. 일관성과 표준성을 높인다. 05. 사용자의 실수를 미연에 방지할 수 있도록 설계한다. 06. 사용자가 적은 인지적 노력으로 시스템을 사용할 수 있게 한다. 07. 사용자가 시스템을 유연하게 사용할 수 있도록 한다. 08. 심미적이고 간결한 시스템을 제공한다. 09. 에러 발생 시 사용자 스스로 문제를 파악하고 수정할 수 있도록 설계한다. 10. 사용자에게 충분한 도움말을 제공한다.

Jakob Nielsen’s 10 Heuristic

Jakob Nielsen’s 10 Heuristic

01. 사용자에게 시스템의 현재 상태를 시각화하여 보여준다. 02. 현실 세계와 부합하도록 시스템을 설계한다. 03. 사용자에게 적절한 통제권을 부여한다. 04. 일관성과 표준성을 높인다. 05. 사용자의 실수를 미연에 방지할 수 있도록 설계한다. 06. 사용자가 적은 인지적 노력으로 시스템을 사용할 수 있게 한다. 07. 사용자가 시스템을 유연하게 사용할 수 있도록 한다. 08. 심미적이고 간결한 시스템을 제공한다. 09. 에러 발생 시 사용자 스스로 문제를 파악하고 수정할 수 있도록 설계한다. 10. 사용자에게 충분한 도움말을 제공한다.

NWCAG vs Heuristic

01. 대체 콘텐츠를 제공한다.

02. 어떠한 경우에도 정보나 구조의 손실이 없어야 한다.

03. 읽고 이해하기 쉬운 환경을 보장한다.

04. 충분한 시간을 보장한다.

05. 발작을 유발할 수 있는 콘텐츠는 제공하지 않는다.

06. 키보드 접근성을 보장한다.

07. 쉽고 빠른 내비게이션 환경을 보장한다.

08. 사용자 오류를 예방한다.

NWCAG

*NWCAG : NHN Web Content Accessibility Guidelines

Heuristic Checklist

(*출처: HCI Lab, 연세대)

251개

평가 분류 Heuristic NWCAG

항목 01. 사용자에게 시스템의 현재 상태를 시각화하

여 보여준다. 06. 키보드 접근성을 보장한다.

체크리스트 현재 커서가 어떤 부분을 가리키고 있는지에 대

한 피드백이 제공되는가?

6.3.1 키보드 포커스를 시각적으로 구별할 수 있는

가?

Case1) NWCAG, Heuristics 체크리스트 비교

키보드로 이동 시 포커스 아웃라인 확인 가능

평가 분류 Heuristic NWCAG

항목 02. 현실 세계와 부합되도록 시스템을 설계한다. 02. 어떠한 경우에도 정보나 구조의 손실이 없어야

한다.

체크리스트 메뉴 항목들이 가장 논리적인 순서로 배치되어

있는가? 2.4.1 콘텐츠가 논리적인 순서로 되어 있는가?

Case2) NWCAG, Heuristics 체크리스트 비교

두 단계 이상의 메뉴를 선형화 시 계층 관계가 뚜렷함.

Case3) NWCAG, Heuristics 체크리스트 비교

평가 분류 Heuristic NWCAG

항목 04. 일관성과 표준성을 높힌다. 07. 쉽고 빠른 내비게이션 환경을 보장한다.

체크리스트 모든 페이지들은 그 내용을 설명하는 제목과 헤

더를 가지고 있는가?

7.1.3 주요 콘텐츠 블록의 제목을 <h1>~<h6>로 마

크업했는가?

주요 콘텐츠 블록의 제목을 h2로 제공하고 있음.

Case4) NWCAG, Heuristics 체크리스트 비교

평가 분류 Heuristic NWCAG

항목 03. 사용자에게 적절한 통제권을 부여한다. 06. 키보드 접근성을 보장한다.

체크리스트 마우스를 움직이는 것 외에 다른 방법으로 메뉴

를 선택할 수 있는가?

6.1.1 마우스 이벤트로 동작하는 기능은 키보드 만

으로도 동일한 운용이 가능한가?

본문에서 Tab 키 사용 시 다음 객체(보내기)로 이동이 되어 키보드 사용자가 편지를 보낼 수 있는 사례

사용성은 모든 사용자의 만족을 높이는데 있습니다.

신체장애 청각장애 시각장애 환경장애 비장애인

사용성

기획단계에서 잘 반영하고 있나요?

이미지 출처 https://www.seouldesign.or.kr/bbs2/view.jsp?seq=1842&code=001012&event_code=0

거실을 개 방적으로 설계하고, 각 방의 충분한 공간을 마련해 휠체어를

제자리에서 한 바퀴 돌렸을 때 장애물이 걸리지 않는 범위를 확보한다. 공간

입구

욕실

휠체어

엘리베이터

모든 문의 입구 너비를 넓히고, 문턱의 높이를 바닥과 수평으로 맞춘다.

내부 곳곳에 보조 손잡이를 마련해 편의성을 높인다.

조리대, 식탁 등을 휠체어 바퀴에 맞춰 설계함으로써 접근성을 높인다.

휠체어를 탄 사람과 일반인 모두 사용할 수 있어야 하며 지하를 포함해

집의 전 층에 접근할 수 있어야 한다.

집을 만들어 봅시다. 단, 접근성을 고려해서…

접근성에 꼭 필요한 경험을 설계하다.

=

y

y

x

비장애인 장애인

alt = “ ”

접근성에 꼭 필요한 경험을 설계하다.

<alt=“구름 모양, 흰색, 작은 냉장고 크기의 Hands On Search 기계. 맨 위에는 사와레루(Hands

On Search의 일본명)라고 일본어로 적혀있다. 이 로고 또한 3D 프린터로 만들어졌다. 초등학생

키 기준으로 얼굴 높이에 스크린이 있고, 스크린 아래 왼쪽에 동그란 모양의 버튼, 오른쪽에는

네모난 모양의 버튼이 있다. 버튼 아래에 3D 프린터가 들어있고 프린터 안쪽을 들여다 볼 수

있도록 프린터 벽이 투명한 창으로 되어 있다.“>

<alt=“3D 프린터” longdesc=“msg_01.html”>

구름 모양, 흰색, 작은 냉장고 크기의 Hands On Search 기계. 맨 위에는 사와레루(Hands On Search의 일본명)라고 일본어로 적혀있다. 이 로고 또한 3D 프린터로 만들어졌다. 초등학생 키 기준으로 얼굴 높이에 스크린이 있고, 스크린 아래 왼쪽에 동그란 모양의 버튼, 오른쪽에는 네모난 모양의 버튼이 있다. 버튼 아래에 3D 프린터가 들어있고 프린터 안쪽을 들여다 볼 수 있도록 프린터 벽이 투명한 창으로 되어 있다

직군별 가이드를 잘 이해하고 있나요?

이미지 출처 https://www.flickr.com/photos/broterham/75702736

NWCAG 체크리스트

• (전체 27개)

• 기획 10개

• 디자인 3개

• FE 13개

• BE 2개

직군별 가이드에 대한 이해도 중요합니다.

판단이 필요한 영역은 UX 가이드 별도 제공

FE / BE 디자인

1. 스킵내비게이션

2. 브라우저 타이틀

3. 대체텍스트

4. 레이어 팝업

5. 자동재생 콘텐츠

6. 키보드 사용보장

7. 캡차

1. 명도대비 적용 가이드

2. 색각이상 가이드라인

명도대비 서비스 적용 가이드

http://nuli.navercorp.com/data/acces

sibility/3.3.1_guide.png

색각이상자를 위한 가이드라인

http://nuli.navercorp.com/sharing/blog/post/

1132656

디자인 가이드 (예시)

상세설계서 (예시)

상세설계서 (예시)

UX가이드 (예시)

UX가이드 (예시)

AS-IS 웹접근성 수행 프로세스

• 상세 설계서

분석/설계

• 디자인

• FE/BE

• 자동 평가

• 전문가 평가

• 인증마크 획득

구현 평가 완료

TO-BE 웹접근성 수행 프로세스

분석/설계

• 디자인

• FE/BE 개발

• 서비스 오픈

검증 구현 완료

• UX가이드

• 상세 설계서

• 검토 및 리뷰

• 피드백 반영

마치며…

이미지 출처 https://www.flickr.com/photos/xtyler/8419128781

ⓒ 2014 NHN TECHNOLOGY SERVICES CORPORATION

Thank you.