스크립트를 통한 접근성은어떻게 지켜야 할까 ?

오윤식

기술로 동행하다

목차

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