다음카카오 Pc&Mobile 웹 접근성 개선 사례

PC/Mobile
웹
접근ᄉ
2014.10.17
ᅥᆼ 개선
사례

1. 접근성 히스토리
2. 접근성 가이드
3. 접근성 평가 방식
4. 인건위 진정 대응 사례
5. 다음 PC 첫화면 접근성 적용 사례
6. 다음 Mobile 첫화면 접근성 적용 사례
7. 마무리
목차

UI직군 워크샵 2006.06.16
공평한 인터넷 환경 제공을 위한 창의적 UI발상 프로젝트에서
접근성 최초 언급, 드림보이스 체험

IWA TFT UI개발자로 구성, Improve Web Accessbility TFT 비공식적으로 활동
2007.06.05, 다음 서비스 접근성 UT 진행 - 한국시각장애인복지관

웹접근성TFT 2013.01.01, UX/UI/기획/개발 등 다양한 직군으로 구성됨
장차법 대응
접근성 가이드 개발 및 전파
접근성 CS 대응
서비스 접근성 테스트
모바일앱 접근성 확보
접근성 사내 교육

kakao 접근성 2013.10 카카오톡 안드로이드 접근성 작업 시작
사내 공감대 형성 및 앱접근성 서비스 내재화 준비
다양한 분야의 시각장애인분들과 사용성/접근성 테스트 진행
장애인 당사자, 접근성 전문가, 시민단체, IT업계, 유관 정부기관과 인터뷰 진행
카카오톡 앱 접근성 유관 실무자와 시각장애인과 함께 워크샵 진행
카카오 접근성 아지트 개설 및 자발적 스터디 진행
카카오톡 100개 이상의 접근성 관련 기능 개선
카카오 프렌즈 점자카드 제작

+ daumkakao 접근성

daumkakao 접근성 가이드
1. 전사 접근성 가이드 마련
2013년 1월 18일, 사내에 접근성 가이드 2.0 공개
2013년 3월 11일, 접근성 가이드 다룸을 통해 외부에 오픈 http://darum.daum.net
2013년 7월, 접근성QA 가이드
2. UX/UI/기획 접근성 가이드 마련
2013년 1월 18일, 접근성 가이드 > 디자이너와 기획자가 고려해야할 웹접근성 - WebAIM
2013년 11월 22일, UX/UI 접근성 가이드 - UX직군 제작
2014년 2월, UX/UI/기획에서 고려할 접근성 – 접근성 가이드에서 정리

기존 교육용 가이드
웹접근성
웹사용성
(Web Accessibility)
웹표준
(Web Standard)
(Web Usability)
• HTML Element
• (X)HTML/CSS/SCRIPT 분리
• 구조화
• (X)HTML 일반 문법 준수
• (X)HTML DTD 문법 준수
• 반복 네비게이션 링크
• 양식 컨트롤
• 인접한 링크는 공백으로 분리
• 새 브라우저 창 열기
• 웹 문서에는 독립적인 제목을 붙인다.
• 문서의 언어 변경 내용확인
• 대체 수단 제공
• 키보드로만 서비스 이용 가능
• 독립적인 링크 텍스트
• 브라우저 새 창 열기
• 페이지 자동 새로고침 지양
• 온라인 양식 (Form)
접근할수없는
이용할수있는
만족할수있는
daumkakao 접근성 가이드 1.0

변경된 전사 가이드
한국형 한국형 웹 콘텐츠
접근성 지침 2.0
모바일 애플리케이션
접근성 지침
웹접근성TFT & 접근성팀
내부실정과 접근성 평가
가이드 적용하여 자체 제
작
+ =
다음카카오
접근성 가이드 2.0

1 Accessibility Intro
1.1 접근성 가이드 설명
1.2 접근성의 이해
1.2.1 웹 접근성이란?
1.2.2 장애인 차별 금지 및 권리구제에 관한 법률
1.2.3 모바일의 접근성
1.3 디자이너와 기획자가 고려해야 할 웹접근성
2 PC 접근성
2.1 PC Web
2.1.1 PC Web 접근성 지침
2.1.2 PC Web 접근성 검사항목
2.1.3 PC Web QA 지표
3 Mobile 접근성
3.1 Mobile Web
3.1.1 Mobile Web 접근성 지침
3.1.2 Mobile Web 접근성 검사항목
3.1.3 Mobile Web QA 지표
3.2 Mobile App
3.2.1 Mobile App 접근성 지침
3.2.2 Mobile App 접근성 검사항목
3.2.3 Mobile App QA 지표
4 보조 공학 및 접근성 검사 도구
4.1 Mobile 접근성 도구
4.1.1 iOS 접근성
4.1.2 Android 접근성
4.2 PC 접근성 도구
4.2.1 센스리더
4.3 접근성 검사 도구
4.3.1 통합 검사 도구
4.3.2 색에 무관한 인식 관련 검사 도구
http://darum.daum.net

PC Web 검사항목
22 15 11
원칙 1. 인식의 용이성
• 적절한 대체 텍스트 제공
• 자막 제공
• 색에 무관한 콘텐츠 인식
• 명확한 지시사항 제공
• 텍스트 콘텐츠의 명도 대비
• 배경음 사용금지
원칙 2. 운용의 용이성
• 키보드 사용 보장
• 초점 이동
• 응답시간 조절
• 정지 기능 제공
• 깜빡임과 번쩍임 사용 제한
• 반복영역 건너뛰기
• 제목 제공
• 적절한 링크 텍스트
원칙 3. 이해의 용이성
• 기본 언어 표시
• 사용자 요구에 따른 실행
• 콘텐츠의 선형화
• 표의 구성
• 레이블 제공
• 오류정정
원칙 4. 견고성
• 마크업 오류 방지
• 웹 애플리케이션 접근성 준수
Mobile Web 검사항목
준수사항
• 자막 제공
• 초점 이동
• 제목 제공
• 표의 구성
• 누르기 동작 지원
권고사항
• 컨트롤간 충분한 간격
• 사용자 인터페이스의 일관성
Mobile App 검사항목
준수사항
• 초점 이동
• 누르기 동작지원
• 색에 무관한 인식
• 명도대비
• 자막 제공
권고사항
• 알림 기능
• 깜빡거림의 사용 제한
접근성 검사항목

원칙 1. 인식의 용이성
• 자막 제공
원칙 2. 운용의 용이성
• 초점 이동
• 제목 제공
• 적절한 링크 텍스트 원칙 3. 이해의 용이성
• 표의 구성
• 오류정정
원칙 4. 견고성
PC Web 검사항목

준수사항
• 초점 이동
• 제목 제공
• 표의 구성
권고사항
• 자막 제공
• 오류정정
22
PC Web 검사항목

준수사항
• 초점 이동
• 제목 제공
권고사항
• 알림 기능
• 깜빡거림의 사용 제한
11
Mobile App 검사항목

준수사항
• 자막 제공
• 초점 이동
• 제목 제공
• 표의 구성
• 누르기 동작 지원
권고사항
15
Mobile Web 검사항목

3. 접근성평가
접근성팀
접근성팀 셋팅
2013.04.01, 접근성 연구 및 평가를 수행하는 접근성팀(다음서비스 TX센터) 셋팅
접근성평가, CS 처리, 접근성 연구 및 교육, 컨설팅 업무 진행
접근성평가 업무
1. 접근성평가 – 요청된 전사 서비스 접근성평가 진행
3. 접근성 모니터링 - 접근성 제고를 위한 전수조사 진행하여 리포팅
4. 웹표준개발팀 모니터링 – 웹표준개발팀 마크업 결과물 접근성 평가, 팀평가 반영
접근성 품질개선 (2014년 상반기 기준)
개선전 평균 78.73점
개선후 평균 95.72점

3. 접근성평가
접근성 평가 방식
전문가평가
담당 리포터를 통한 프로젝트 접근성 가이드 기반 전문가평가
+ 리뷰어의 재검증을 통해 오류율 축소
사용자평가
리뷰어의 전맹/저시력/색각이상/지체/청각 등 5가지 유형 장애 사용자평가
+ 저시력/전맹 사용자평가
+ 전맹 애드웍 테스트를 통해 실제 사용 가능한지 다시 한번 검증

3. 접근성평가
접근성 평가 리포팅
검사항목별 Task 기반 이슈 트래킹 시스템
JIRA - 검사항목별 Task 기반 이슈 트래킹 시스템으로 관리
협의된 Task flow에서 추출된 페이지별 Task와 검사항목별 Sub Task 작성
사용자평가 의견이 접근성평가에 유실없이 반영되기 위해 이슈에 직접 추가
오류항목이 포함된 페이지의 Task별로 담당자에게 순차 전달
수정 완료 된 Task를 기반으로 리포터가 최종 검토 진행
접근성 Sub Task level
 Highest : Task flow 연관 사용자평가 의견 미해결 이슈 발생 시
 High : 준수사항으로 미 해결 이슈 발생 시
 Normal : 권장사항으로 해당 이슈에 대한 안내
완료되면 접근성평가 최종 보고서가 전달된다

4 인건위 진정 대응 사례

인권위 진정 대응 프로세스
1. 외부기관과의 커뮤니케이션을 하는 대외협력에서 인권위로부터 진정사례 등 접수하여 내부 전달
2. 접근성팀에서는 해당 진정 내용에 대한 사실여부 파악 및 해결방안 제안
3. 관련 팀/파트에서 사실여부를 재확인하고 해결방안 중 적용가능한 방안 진행 및 적용 시점 공유
4. 대외협력에서 서면진술서 및 관련 자료를 정리하여 인권위로 전달, 종료까지 마무리 진행

인권위 진정 대응 사례
Android App 진정 내용
가. 진정요지 :
진정인은 언어장애가 있는 중증장애인임. 페블릿 피씨를 이용해 다음에서 제작한 000앱을 쓰고 있는데, 폰트를
크게 설정했는데로 알아보기 어려웠음. 장애인을 위해 지금 있는 설정보다 더 큰 글씨 설정을 제공해 주기 원함
다. 요구자료
1) 진정 내용의 사실여부 및 이에대한 의견
2) 앱에서 폰트를 더욱 확대하는 것이 기술적으로 가능한지 여부
3) 진정내용관련 향후 개선계획(수용할 수 없다면 그 사유)
4) 기타 본건 조사에 필요하다고 판단되는 자료 및 의견 등
진행결과
000앱 '아주 크게' 에 해당하는 폰트 크기가 50포인트로 변경 됨

iOS App 진정 내용
가. 진정요지 :
다음 00 어플이 대체텍스트를 제공하지 않아 아이폰에서 보이스오버(아이폰의 음성프로그램)가 작동하지 않음.
이에 시각장애가 있는 진정인은 000 어플을 사용할 수 없는 바, 장애인 차별로 진정함.
나. 요구자료
1) 진정인이 주장하는 내용의 사실 여부 및 관련 자료
2) 진정 관련 귀 기관의 의견 및 향후 조치 계획
진행결과
000앱 대체텍스트 적용하여 배포됨

PC Web 진정 내용
가. 진정요지 :
피해자는 시각장애 1급으로 다음에서 운영하는 000에 사진이나 동영상을 첨부할 때 키보드로 조작할 수 없고 마
우스로만 첨부가 가능함.
시각장애인은 컴퓨터 조작시 키보드 자판으로만 사용할 수 밖에 없는 데 이는 시각장애인에 대한 정당한 편의가
제공되지 않고 있으며 시정되기를 바람
나. 요구자료
1) 진정인이 주장하는 내용의 사실 여부 및 관련 자료
2) 진정 관련 귀 기관의 의견 및 향후 조치 계획
3) 기타 본건 조사에 필요하다고 판단되는 자료 및 의견
진행결과
금주 내 모든 부분 완료됨

접근성 고려한 사례
접근성 지침만 준수

접근성 고려한 사례
사용자평가 의견을 통해
실 사용자가 이용할 수 있는 접근성 고려
지침 외적으로 고려할 사항들…

5 다음 PC 첫화면
접근성 적용 사례

aria-hidden
검색어 전환효과를 위해 마크업상에 검색어 링크가 2번 존재
화면낭독기에 동일한 정보를 2번 음성출력하고, 동일한 링크에 키보드
초점이 2번 이동되는 현상이 이슈 발생
검색어순위 중복 이슈
• 화면낭독기에서 검색어가 2번 들리므로
dummy 콘텐츠에 aria-hidden 적용
• a 요소에 키보드 초점이 이동되지 않도록
tab-index=-1 적용

OL {list-style:none}
ol 목록의 스타일 초기화로 화면낭독기가 순서 정보를 음성출력하지
않으므로 대체텍스트를 제공이 필요하였습니다.
검색어순위 대체텍스트
• 순위를 명확하게 1위, 2위...로 제공
• 화살표 아이콘도 상승/하락 으로 명확하
게 제공

명확한 버튼 대체텍스트 제공
이전/다음 버튼 정보
탭을 전환하는 이전/다음 버튼의 명칭으로 어떤 콘텐츠를 탐색하는 기능인지 인지할 수 없음
• “이전뉴스탭 / 다음뉴스탭” (추천best, 인기기획전과 같이
탭전환시 명칭이 바뀌어도 포괄하는 명칭을 찾을 수 없는
이슈) “이전탭/다음탭” 으로 제공
• "이전경기/다음경기"로 명칭을 변경

자동으로 변경되는 콘텐츠 제어
"실시간 이슈" 내 "오늘의 정보" 영역에는 시간에 따라 자동 변경
되는 날씨정보 콘텐츠를 제공
날씨 또는 증권정보 텍스트에 마우스 오버를 하면 움직임이 멈추
고 있으나 키보드 초점이동시 정지되지 않음
• 실시간으로 변경되는 콘텐츠 영역에 키보드 초점이 진
입하거나 마우스오버 동작을 수행하면 갱신이 정지되도
록 기능 구현
• 비슷한 기능구현 된 곳에 모두 적용
실시간 이슈 정지 기능제공

키보드 사용 보장
쇼핑탭 키보드사용보장 및 초점이동, 정지기능제공
쇼핑 탭메뉴(쇼핑홈~롯데닷컴)에 초점을 이동해서 엔터를 눌러
도 하위 콘텐츠가 활성화되지 않는 점이 발견 됨
• 키보드 사용보장
쇼핑홈~롯데닷컴 탭에 초점을 이동해서 엔터를 눌러도 하위 콘텐츠가
활성화되지 않고, 탭에 해당하는 페이지로 이동하였으나, 선택시 탭메뉴
가 펼쳐지도록 개선
• 초점이동
쇼핑홈~롯데닷컴 탭이 활성화되어도 하위 콘텐츠로 초점이 이동되지 않
았으나, 개선
• 정지기능
실시간으로 변경되는 콘텐츠 영역에 키보드 초점이 진입하거나 마우스
오버 동작을 수행하면 갱신이 정지되도록 기능 구현

일반인의 키보드 사용도 보장
스크린리터 탭이동과 위아래방향키 이동을 다르게 구현
건너뛰기링크를 이용해 로그인 영역에 도달하더라도 로그인유지, IP보안, 기능설명 등의 요소에서 초점
을 받아 아이디 편집창까지 도달하는데 많은 키조작이 필요 함
• 과도한 키조작을 줄이기 위해 선형화 개선을 통해 아이
디,비밀번호 입력창에 초점이 먼저 도달하도록 개선

이미지 콘텐츠 고대비
이미지로 운영 된 쇼핑 상품 기타 정보 명도대비
쇼핑운영툴의 명도대비 이슈가 발견되었으나 쇼핑운영 툴(시안) 수정 자체가 어려운 상태
• 운영 템플릿(시안)의 변경
• 운영 담당자 교육을 요청하여 명도대비와 대체텍스트
이슈 고려

색각이상, 고대비 모드 사용자를 위한 디자인
선택된 카테고리 탭을 색상과 굵기의 차이로 구분하여 저시력 사용자가 색약자가 명확히 구분하기 어려움
고대비모드 사용자의 경우 굵기와 색상의 차이를 전혀 구분할 수 없는 문제가 발견됨
개선 전 개선 후
개선 후 회색분류 개선 후 고대비류

다음 첫화면 접근성 안내 페이지
다음 PC탑에서는 장애인사용자의 사용자들이 효율적으로 다음의 콘텐츠를 탐색하고 이용할 수 있도록
안내 페이지를 제공 중 입니다.
•소개
•자동실행 광고 설정
•자동 갱신에 대한 유의사항
•페이지 전체 자동갱신
•페이지탭의 자동전환과 정지기능
•시각장애인 사용자 안내
•1. 바로가기 링크 이용하기
•2. 헤딩 구조 살펴보기
•3. 탭 메뉴의 사용
•4. 이전/다음 버튼의 사용
•5. 헤딩의 분리
•6. 콘텐츠 구조의 이해
•7. 중복되는 콘텐츠의 배제
•8. 메일 서비스 이용하기
•문의하기

다음 첫화면 시각장애인 사용방법 안내
뉴스와 같이 탭으로 구성된 최근게시물
목록에서 접근성을 준수하고 문단의 제
목까지 제공하더라도 구조가 복잡하여
전맹 사용자가 구조를 파악하고 효율적
으로 콘텐츠를 탐색하는 것이 쉽지 않아
사용법을 안내가 필요

자동실행 광고 방지
전맹 사용자는 소리나는 광고가 자동실행되어 화면낭독기 사용자가 페이지를 탐색하는데 심각한 방해요인
저시력 사용자의 경우 의도하지 않은 전체화면 광고가 실행되어 탐색중인 영역을 놓치고 마우스 포인터를 찾
지 못하는 문제가 발생

6 다음 Mobile 첫화면
접근성 적용 사례

탭 콘텐츠 페이지 전환
탭 메뉴 링크를 더블탭 하면 화면 전환되는 기능을 인지할 수 없어 사용자가 이용하지 못하는 이슈 발생
• "화면 더블탭 시 페이지 전환됩니다" 설명 텍스트를 제공하여 화면낭독기 사용자가 기능을
인지하고 사용할 수 있도록 함.

적절한 링크텍스트
사이드 메뉴 대체텍스트 전환
콘텐츠의 펼침/접힘 상태와 무관한 링크텍스트가 제공되어 상태나 기능을 명확히 인지할 수 없음
• 사이드 메뉴의 현재 상태에 따라 링크텍스트의 변화를 주어 현재 상태를 인지 할 수 있도
록 제공함

숨김텍스트 초점
뉴스본문 제목의 초점 위치
숨김텍스트 제공을 위한 기존 class 사용할 경
우, iOS에서 초점이 상단으로 튀는 현상이 존
재

숨김텍스트 초점
뉴스본문 제목의 초점 위치
iOS 버전에 따라 스타일 적용
1) iOS8 이상 버전에서 권장
2) 모든 버전 대응을 위한 방법
1) iOS8 이상 버전에서 권
장
2) 모든버전 대응을 위한 방법

비전
다음카카오는 시공간의 한계를 뛰어넘어 사람과 사람, 사람과 세상을 이어줍니다.
연결을 통해 정보가 흐르고 비즈니스가 일어나며 마음이 따뜻해집니다.
연결의 혁신으로 세상은 더욱 가깝고 새로워진다고 다음카카오는 믿습니다.

비전
접근성 향상을 통해
다음카카오는 시공간의 한계를 뛰어넘어 다양한 환경의 사람과 사람, 사람과 세상을 이어줍니다.
차별없는 연결을 통해 정보가 흐르고 비즈니스가 일어나며 마음이 따뜻해집니다.
연결의 혁신으로 장애 구분없는 모두의 세상은 더욱 가깝고 새로워진다고 다음카카오는 믿습니다.

감사합니다.
최재성 joseph.choi@daumkakao.com

다음카카오 Pc&Mobile 웹 접근성 개선 사례

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (9)

Ähnlich wie 다음카카오 Pc&Mobile 웹 접근성 개선 사례

Ähnlich wie 다음카카오 Pc&Mobile 웹 접근성 개선 사례 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (8)

다음카카오 Pc&Mobile 웹 접근성 개선 사례