6. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
UI - Carousel
사용자 인터페이스 - 캐로셀 (공항 회전 컨베이어)
7. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
http://goo.gl/tAfOid
8. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
http://goo.gl/FeU6BB
9. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
UX - Carousel
사용자 경험 - 캐로셀 (공항 회전 컨베이어)
http://goo.gl/5A4D90
10. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
2
1
UX - Carousel
사용자 경험 - 캐로셀 (공항 회전 컨베이어)
http://goo.gl/qbjjoM
11. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
UX - Carousel
사용자 경험 - 캐로셀 (공항 회전 컨베이어)
http://goo.gl/Nc3aq
12. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
UX - Carousel
사용자 경험 - 캐로셀 (공항 회전 컨베이어)
http://goo.gl/WhPdST
13. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
UI - Carousel
사용자 인터페이스 - 캐로셀 (공항 회전 컨베이어)
14. KWCAG.2 Checklist
웹 접근성 체크 리스트 - 한국 웹 콘텐츠 접근성 가이드라인 2
원칙 지침 검사 항목 체크
인식의 용이성 대체 텍스트 텍스트가 아닌 콘텐츠에 적절한 대체 텍스트가 제공되었나?
멀티미디어 대체 수단 멀티미디어 콘텐츠에 자막, 원고, 수화 중 일부가 제공되었는가?
자동 재생 배경 음악(3초 이상)을 멈출 수 있는 기능이 제공되는가?
명료성 텍스트/배경 간의 명도 대비가 충분한가?
색상 뿐만 아니라 다른 정보로 대상을 구분할 수 있는가?
명확하게 지시 사항을 제공하고 있는가?
운용의 용이성 키보드 접근성 마우스 없이 키보드로만으로도 사용이 가능한가?
포커스(초점) 상태가 화면에 표시되는가?
충분한 시간 제공 자동 변경 콘텐츠에 시간 조절 기능이 제공되는가?
자동 변경 콘텐츠에 재생/정지 기능이 제공되는가?
광 과민성 발작 예방 깜빡임이 심한(1초에 3회 이상) 콘텐츠의 발작 유무를 테스트 했는가?
쉬운 내비게이션 페이지마다 중복되는 영역을 건너 띌 수 있는 기능이 제공되는가?
콘텐츠 블록마다 제목이 제공되고 있는가?
적절하게 링크 텍스트에 대한 정보가 제공되고 있는가?
이해의 용이성 가독성 주 언어를 명시했는가?
예측 가능성 사용자 요구 사항이 없었음에도 임의로 동작하는 것이 있는가?
콘텐츠 논리성 별도의 스타일 없이도 내용을 이해할 수 있도록 논리적인가?
표를 눈으로 보지 않고도 이해할 수 있는가?
입력 양식에 대한 Label이 잘 연결되어 있는가?
입력 도움 오류 발생 시, 쉽게 오류를 이해하고 정정할 수 있는가?
견고성 문법 준수 작성된 문서의 구조/표현/동작 문서에 문제가 되는 문법 오류는 없는가?
웹 애플리케이션 접근성 신 기술 사용에 있어 하위 호환성을 고려하였는가?
http://www.w3c.or.kr/Translation/WCAG20/
15. KWCAG.2 Checklist
웹 접근성 체크 리스트 - 한국 웹 콘텐츠 접근성 가이드라인 2
http://bitsofco.de/the-accessibility-cheatsheet/
38. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
Focusing carousel items
function setSlides(new_current, setFocus) {
var length = slides.length;
setFocus = typeof (setFocusHere !== 'undefined') ? setFocusHere : false;
new_current = parseInt(new_current, 10);
// 슬라이드 콘텐츠에 class 속성 설정
slide[index].setAttribute('class', 'slide');
slides[new_current].setAttribute('class', 'current slide');
// 인디케이터 버튼에 class 속성 설정
buttons[index].setAttribute('class', '');
buttons[new_current].setAttribute('class', 'current');
// setFocus 값이 true이면 코드 실행
if (setFocus) {
// 다음 슬라이드에 tabindex 속성 값 -1 설정
// (일반적인 탭 포커싱이 아닌, 스크립팅 포커싱 처리)
// 포커스 설정
39. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
Focusing carousel items
function setSlides(new_current, setFocus) {
var length = slides.length;
setFocus = typeof (setFocusHere !== 'undefined') ? setFocusHere : false;
new_current = parseInt(new_current, 10);
// 슬라이드 콘텐츠에 class 속성 설정
slide[index].setAttribute('class', 'slide');
slides[new_current].setAttribute('class', 'current slide');
// 인디케이터 버튼에 class 속성 설정
buttons[index].setAttribute('class', '');
buttons[new_current].setAttribute('class', 'current');
// setFocus 값이 true이면 코드 실행
if (setFocus) {
// 다음 슬라이드에 tabindex 속성 값 -1 설정
// (일반적인 탭 포커싱이 아닌, 스크립팅 포커싱 처리)
// 포커스 설정
slides[new_current].setAttribute('tabindex', '-1');
slides[new_current].focus();
}
// index 값 new_current로 변경
index = new_current;
}
40. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
Focusing carousel items
slidenav.addEventListener('click', function(event) {
var target = event.target;
// localName - 소문자 요소 이름 반환 // IE 9+
if (target.localName == 'button') {
setSlides(target.getAttribute('data-slide'), true);
}
}, true);
41. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
Focusing carousel items
slidenav.addEventListener('click', function(event) {
var target = event.target;
// localName - 소문자 요소 이름 반환 // IE 9+
if (target.localName == 'button') {
setSlides(target.getAttribute('data-slide'), true);
}
}, true);
42. 웹 접근성(KWCAG 2 + WAI-ARIA 1)을 고려한
캐로셀 UI 컴포넌트 - 애니메이션 (Animation)
43. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
Animating carousel items
<button data-action="stop">
<span class="a11y-hidden"> </span>
</button>
<button data-action="start">
<span class="a11y-hidden"> </span>▶
</button>
http://goo.gl/xhqO1N
44. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
Animating carousel items
// 캐로셀 UI 컴포넌트에 마우스가 올라가면 애니메이션 보류
carousel.addEventListener('mouseenter', suspendAnimation);
// 캐로셀 UI 컴포넌트에 마우스가 나가면 애니메이션 시작
carousel.addEventListener('mouseleave', startAnimation);
// 캐로셀 UI 컴포넌트에 포커스 인 상태에서 이벤트 대상 객체가
// slide 클래스 속성 설정 값을 가지고 있지 않을 경우, 애니메이션 보류
carousel.addEventListener('focusin', function(event) {
if (!hasClass(event.target, 'slide')) { suspendAnimation(); }
});
// 캐로셀 UI 컴포넌트에 포커스 아웃 상태에서 이벤트 대상 객체가
// slide 클래스 속성 설정 값을 가지고 있지 않을 경우, 애니메이션 시작
carousel.addEventListener('focusout', function(event) {
if (!hasClass(event.target, 'slide')) {
startAnimation();
}
});
http://goo.gl/MutcE
45. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
Animating carousel items
// 화면에 감춰진 이전, 다음 슬라이드 콘텐츠는 스크린 리더에서 읽지 않도록
// aria-hidden 값을 true로 설정
slides[new_next].setAttribute('next slide'
+ ( (transition == 'next') ? ' in-transition' : '' ));
slides[new_next].setAttribute('aria-hidden', 'true');
slides[new_prev].setAttribute('prev slide'
+ ( (transition == 'prev') ? ' in-transition' : '') );
slides[new_prev].setAttribute('aria-hidden', 'true');
// 현재 화면에 보여지는 슬라이드 콘텐츠는 스크린 리더에서 읽을 수 있도록
// aria-hidden 값을 false로 설정
slides[new_current].setAttribute('current slide');
slides[new_current].removeAttribute('aria-hidden');
46. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
Animating carousel items
// 화면에 감춰진 이전, 다음 슬라이드 콘텐츠는 스크린 리더에서 읽지 않도록
// aria-hidden 값을 true로 설정
slides[new_next].setAttribute('next slide'
+ ( (transition == 'next') ? ' in-transition' : '' ));
slides[new_next].setAttribute('aria-hidden', 'true');
slides[new_prev].setAttribute('prev slide'
+ ( (transition == 'prev') ? ' in-transition' : '') );
slides[new_prev].setAttribute('aria-hidden', 'true');
// 현재 화면에 보여지는 슬라이드 콘텐츠는 스크린 리더에서 읽을 수 있도록
// aria-hidden 값을 false로 설정
slides[new_current].setAttribute('current slide');
slides[new_current].removeAttribute('aria-hidden');
47. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
https://goo.gl/YsfRLh
48. 웹 접근성을 고려한 UI 제작 가이드
캐로셀(Carousel) UI 컴포넌트 디자인
http://www.w3.org/WAI/tutorials/carousels/