|
Time Table |
|
|
프로그램 |
시간 |
|
등록 확인 |
12:30 ~ 13:15 |
|
행사 소개 (박태준) |
13:15 ~ 13:30 |
|
장애 환경의 온라인 체험 및 활용 방법 (김보민) |
13:30 ~ 14:10 |
|
접근성과 사용성, 기획자가 챙겨야 하는 이유 (김성훈) |
|
|
Break Time |
14:10 ~ 14:30 |
|
사용성 측면에서 본 한국형 웹 콘텐츠 접근성 지침 2.0과 2.1 (김상준/일산직업능력개발원) |
14:30 ~ 15:40 |
|
접근성 빅(?) 데이터, 새로운 법칙의 발견! (김용원) |
|
|
웹사이트 분석! MEAN Stack과 PhantomJS만 알면 끝! (정인호) |
|
|
Break Time |
15:40 ~ 16:00 |
|
스크린리더도 크로스 테스팅이 필요합니다! (김형섭/엔비전스) |
16:00 ~ 17:15 |
|
유저 테스트가 서비스에 반영되기까지 (엄지연) |
|
|
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까? (윤원진) |
|
|
이벤트 선물 증정 |
|
-웹접근성의 목적
장애인과 같은 소수자들 뿐만아니라 모든 사람이 자유롭고 편리하게 웹 서비스를 이용할 수 있게 하기 위한 것을 말함
-스폐셜유저 체험
link : http://a11ybooth.naver.com
-웹접근성 지침
1. 대체콘텐츠를 넣는다.
2. 적절한 명도대비를 맞춘다.
3. 키보드의 사용성을 높인다.
4. 의도하지 않은 기능이 실행될 때는 알려준다
-일반적인 웹접근성 기획
인증마크 획득을 위한 기계적인 적용
개발 후 최종단계에서 수행
-휴리스틱 가이드 라인 : 전문가들이 주요한 사용성 이슈를 검증하기 위해 쓰는 가이드라인
휴리스틱 #1. Visibility of System Status 시스템은 사용자에게 시스템 상태에 대해 적절한 시기에 적절한 형태의 정보를 인지하기 편한 형태로 제공해야 한다.
휴리스틱 #2. Match the System and the Real World 사용자가 현실 세계에서 접하는 관련 시스템의 방식과 용어를 적절히 연구하여 시스템 설계시에 반영하여 사용자가 혼란 없이 시스템을 사용할 수 있어야 한다.
휴리스틱 #3. User Control and Freedom 사용자가 실수로 특정 기능을 선택하게 되더라도 이를 복구하거나 원활한 상태로 되돌아 갈 수 있는 자유도와 컨트롤을 제공해야 한다.
휴리스틱 #4. Consistency and Standards 일반적으로 통용되는 기준을 지키고 시스템 내외적으로 일관성을 지켜야 한다.
휴리스틱 #5. Error Prevention 에러 발생시 사용자에게 적절한 형태로 정보를 제공하는 것도 중요하며, 에러를 처음부터 발생하지 않도록 방지하는 것이 최선이다.
휴리스틱 #6. Recognition Rather than Recall 시스템의 대상과 인터랙션을 시각화하여 사용자가 적절히 인식할 수 있도록 하라.
휴리스틱 #7. Flexibility and Efficiency of Use 반복적인 작업을 원활히 하고 사용자의 특성에 적합하게 맞출 수 있도록 촉진 요소들을 고려하고 인터랙션을 디자인 하라.
휴리스틱 #8. Aesthetic and Minimalist Design 불필요한 요소들을 제거하여 시스템의 가시성을 높이고 미학적으로 가치 있는 디자인을 구현하라. |
nwcag(NHN Web Content Accessibility Guidelines) 체크리스트
NHN Web Content Accessibility Guidelines(이하 NWCAG) 1.0은 NHN에서 제공하는 웹 콘텐츠의 접근성을 보장하기 위한 목적으로 만들어졌다.
NWCAG는 한국정보화진흥원에서 제정한KWCAG2.0의 모든 내용을 포함하고 있어, NWCAG를 모두 준수했을 경우 한국정보화진흥원의 웹 접근성 품질 인증을 받을 수 있다. 또한 KWCAG에는 포함되지 않았지만 웹 접근성 개선에 도움이 되는 지침을 추가하였다.
기획 10개 디자인3개 front-end 13개 back-end 2개
|
체크리스트별 책임 |
|||||
|
1.1.1 |
필수이미지(그림, 사진, 로고, 차트, 다이어그램, 배경처리된 이미지, 동적으로 제공하는 이미지, 플래시의 Name값 등)에 적절한 대체 텍스트를 제공하는가? |
O |
|||
|
1.1.1-1 |
필수[권고] 이미지(그림, 사진, 로고, 차트, 다이어그램, 배경처리된 이미지, 동적으로 제공하는 이미지, 플래시의 Name값 등)를 제공하는 서비스의 운영 어드민에 대체 텍스트 입력을 위한 입력필드가 마련되어 있는가? |
O |
|||
|
1.2.1 |
O |
||||
|
1.3.1 |
O |
||||
|
2.1.1 |
O |
||||
|
2.2.1 |
O |
||||
|
2.3.1 |
O |
||||
|
2.3.2 |
<thead>,<tbody>,<tfoot>으로 그룹핑 되어 있는가? (th로 그룹핑 안될경우 <thead>생략가능, tbody만 있을 경우 <tbody>생략 가능) |
O |
|||
|
2.3.3 |
O |
||||
|
2.4.1 |
O |
||||
|
3.1.1 |
O |
||||
|
3.2.1 |
O |
||||
|
3.3.1 |
O |
||||
|
4.1.1 |
서비스 특성상 시간 제한이 있는 경우, 시간 제한이 있는 콘텐츠임을 사전에 공지하고 있으며 남은 시간에 대해 알려주고 있는가? |
O |
|||
|
4.2.1 |
O |
||||
|
5.1.1 |
O |
||||
|
6.1.1 |
O |
||||
|
6.2.1 |
O |
||||
|
6.3.1 |
O |
||||
|
7.1.1 |
O |
||||
|
7.1.2 |
O |
O |
|||
|
7.1.3 |
O |
||||
|
7.2.1 |
O |
||||
|
7.3.1 |
O |
||||
|
8.1.1 |
O |
||||
|
8.2.1 |
폼 콘트롤 요소에는 적절한 label을 제공하며, 폼 콘트롤 요소의 id값과 <label>의 for값을 동일하게 제공하는가? |
O |
|||
|
8.3.1 |
O |
||||
개발 완료 후 웹접근성을 지키려고 다시 수정한다면 다시 개발하는것 만큼의 노력과 시간이 들어감
기획단계에서부터 사용자를 고려한 설계가 필요함. 접근성 마크 획득을 위한 기계적인 설계, 코딩, 개발이 아니라 사용자의 편의성을 고려하여 진행되어야 한다.
kwcag 2.1 2015년 국가 표준예정
kwcag ? 한국형 웹 콘텐츠 접근성 지침은 국제 웹 표준을 국내 실정에 맞게 반영한 것.
-Kwcag 2.1 에서 달라진 것
용어 통일 및 보완, 문자의 명료화
기술 종속성을 벗고 범용성 확보
- 마크업 요소를 언급했던 부분 삭제하거나 변경
- html5도 포함하 수 있도록 원칙면을 담음
모바일 환경의 고려
IR기법 사용시 display:none , visibillity : hidden 사용금지
-text-indent, position 등ㅇ 음수를 사용하거나 box 요소 크기를 작게하고 overflow:hidden 사용한다
*IR기법(Image Replacement) : 의미가 포함되어 있는 이미지를 배경으로 처리하고 대신 전경에 상응하는 텍스트를 넣는 방법.
콘텐츠 간의 구분 검사항목 추가
- 고정간격, 테두리, 줄맞춤, 무늬 등으로 구분하는 내용
- 디자인 상 거의 발생되지 않는 내용으로 권고 수준의 검사항목
팝업창 제목제공시 [팝업]임을 표시해야함
<title> 우편번호찾기[팝업]</title>
링크텍스트는 맥락을 통해 이해되면 ok
자동 새창 [팝업] 1개까지 공식 허용
시스템, 플랫폼 오류는 오류정정 기능 제공 예외 (예: 계좌이체 시 은행, 계좌번호 오류 내용)
|
다음에서 권장하는 IRr기법
1. Phark Method (권장) text-indent:-9999px; 장점 : 단점 : css on, image off시 텍스트 안보임 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ------------------------------------------------------------------------ 2. WA IR (권장) <a href="#"> span {position:relative;z-index:-1;} 장점 : 단점 : |
-화면읽기 프로그램을 이용한 접근성 평가 방법
sense reader v4.0
window-eyes v8.4
web service url --> nwcag 1.0(진단수행 , 수동.자동) ----> data
N-WAX(NHN Web Accessibility eXtension)
N-WAX는 웹 페이지의 접근성 진단을 쉽게 할 수 있도록 제작된 도구. 서비스를 사용하기 위해 로그인을 하는 등 세션 정보가 요구되는 경우 및 자바스크립트, 플래시 등의 플러그인을 통한 동적으로 구성된 웹 페이지를 원활히 검사할 수 있도록 브라우저 확장 기능 형태로 제작되었다.
firefox 용 다운받기 - https://addons.mozilla.org/ko/firefox/addon/n-wax/
크롬개발자도구-- window.performance
<웹사이트 분석! MEAN Stack과 PhantomJS만 알면 끝! (정인호)>
meanStack : JSON 으로 유통되는 데이터를 효과적으로 처리하기 위해 DB부터 프론테 엔드 MVC까지 자바스크립트 언어로 구성한 패키지. MongoDB, ExpressJS, AngularJS, Node.js 등이 있음
mongoDB : json 기반의 nosql 데이터베이스
node.js : javascript v8 엔진 기반의 개발 플랫폼 / 클라이언트 단이 아닌 서버사이드
express : nodejs 기반의 웹어플레킹션 프레임워크 // 뷰템플릿 엔진을 만들어줌 , 라우팅관리 (url 매핑)
angular.js : 클라이언트 사이드에서 디자인 패턴(mvc, mvvc)을 지원함
phantomjs : 웹브라우저 렌더링 엔진인 웹킷을 내장하고 있는 headless 화면이 없는 브라우저 같음.
웹접근성 진단, 웹페이지 성능측정가능(로딩시간, 리소스 체크 가능)
jaws for window v13.0
<시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까? (윤원진)>
시맨틱 태그란 ? 웹 문서를 구조적으로 만드는 것으로서 각 레이아웃을 구별하기 위하여 사용되는 태그. 의미에 집중 이전 굵은글씨 b 사용 -----현재 strong 의미 있는 이름을 가진 태그를 사용
헤딩 정보구조를 반영하여 올바른 순서로 작성되어야함
잘못된 시맨틱 마크업은 사용자에게 혼란을줌.
섹셔닝 요소? Article, section, nav , aside 등…
html5 outliner : html5 방식으로 마크업한 후 html5 방식의 구조를 확인할 수 있음
http://gsnedders.html5.org/outliner ---크롬도구도잇음
html5 아웃라인 : 눈에 보이지 않는 구조, 즉 암묵적인 구조가 생성되는데, 이것이 html5에 도입된 아웃라인 이라는 개념이다
왜 outline 에 신경써야할까? 문서의 의미론적 구조는 페이지 내용을 사용자에게 전달 하는데 중요한 토대가 된다. HTML구획 요소와 HTML 제목 요소의 관계가 문서의 개요(outline)을 결정짓게 된다.