Download - [2016널리세미나] 스크립트를 통한 접근성은 어떻게 지켜야 할까
스크립트를 통한 접근성은어떻게 지켜야 할까 ?
오윤식
기술로 동행하다
목차
1.접근성은 마크업만 지키면 되는가 ?
2.자바스크립트의 발전
3.실무 스크립트 접근성 준수 예시
1. 접근성은 마크업만 지키면 되는가 ?
접근성 = 시멘틱 마크업
1. 접근성은 마크업만 지키면 되는가 ?
1. 접근성은 마크업만 지키면 되는가 ?
디자인
마크업
FRONT-END 개발
BACK-END 개발
기획
1. 접근성은 마크업만 지키면 되는가 ?
1. 접근성은 마크업만 지키면 되는가 ?
Graceful Degradation( 우아한 성능 저하 )
Progressive Enhancement( 단계적 향상 )
접근성 = 가독성
1. 접근성은 마크업만 지키면 되는가 ?
2. 자바스크립트의 발전
2. 자바스크립트의 발전
ㅍ
2. 자바스크립트의 발전
2. 자바스크립트의 발전
JAVASCRIPT – HTML (DOM)
3. 실무 스크립트 접근성 준수 예시
3. 실무 스크립트 접근성 준수 예시 (1)
mousedownmouseup
clickmouseovermouseout
마우스 이벤트에 대해 키보드 이벤트 중복 사용
keydownkeyupkeypress ( 기본 핸들러 외 )
focusblur
< 시연참조 >
3. 실무 스크립트 접근성 준수 예시 (2)
<a> 태그의 href 속성을 최대한 활용
- 링크 요소 외에는 input or button 으로 처리
- 팝업의 경우 href 경로를 넣고 스크립트에서 this.href 로
활용잘못된 예 <a href=”#”>..</a>올바른 예 <a href=”#destination”>..</a>
잘못된 예 <a href=”javascript:goURL();”>..</a>올바른 예 <a href=”newpage.html” onclick=goUrl(this.);”>..</a>
< 시연참조 >
3. 실무 스크립트 접근성 준수 예시 (3)
Document 직접적인 innerHTML 사용 자제
해당 페이지 내에 콘텐츠를 삽입할 때 innerHTML 자체로 페이지에
삽입이 아닌 createElement 를 통해 append 시키도록 한다 .
< 시연참조 >
3. 실무 스크립트 접근성 준수 예시 (4)
이벤트를 통한 노출 콘텐츠는 해당 핸들러 뒤에 생성
이벤트를 통해 노출되는 하위메뉴 , 설정메뉴 , 유효성 안내문구 , 등의 콘텐츠는 해당 event 핸들러 바로 뒤에 생성 하는게 좋으며
dailog 팝업의 경우 tabindex 처리와 focus 처리
< 시연참조 >
3. 실무 스크립트 접근성 준수 예시 (5)
이벤트 태그가 아닌 태그에 이벤트를 걸 경우
최대한 <a>,<input>,<button>, 등의 기본 핸들러에만 이벤트 부여
불가피하게 <div>,<span>,<img>, 등에 이벤트를 걸 경우에는
tabindex=0, keypress 이벤트 , aria-role=“button” 처리
< 시연참조 >
3. 실무 스크립트 접근성 준수 예시 (6)
자동재생 형태 정지기능 제공
자동 롤링 이미지 , 동영상 플레이어 , 등에 대한 play/pause 기능 제공
3. 실무 스크립트 접근성 준수 예시 (7)
사용자 환경별 호환 조건 처리
모바일 , IE, Fire Fox, Chrome, Opera 등 디바이스별 및 브라우저별
미지원 함수들에 대한 조건문을 통해 확인 후 별도 처리
< 시연참조 >
배려 , 소통 , 공유
Thank you!
2016 널리 세미나
기술로 동행하다
4th