[2016널리세미나] 스크립트를 통한 접근성은 어떻게 지켜야 할까
1. 스크립트를 통한 접근성은 어떻게 지켜야 할까? 2. 목차 순서로 최종 실무예시 및 해결법에 대해서 중점적으로 다루겠습니다. 3. 접근성은 마크업만 지키면 되는가? 대부분은 접근성은 마크업 개발자들의 책임이라고 생각합니다. 4. 시멘틱 마크업은 필수적이긴 하지만 접근성의 전부라고 할수 없습니다. 5. 기획 디자인 부터 서버개발까지 사용성에 맞는 화면구성 및 디자인 그리고 그에 맞는 데이터 형식을 출력하는데에 모두 접근성을 고려해야합니다. 6. 성능을 저하시켜서 접근성을 지키기보다는 최신 환경 기준에 구환경에서는 최소한의 컨텐츠 가독이 가능하게 하여 신기술 도입장벽을 허물고 생산성을 높히는 단계적 향상을 추구하고 있습니다. 7. 모두 똑같은 정보를 습득할수 있게 전달력이 좋고 가독성이 좋은 것을 접근성이라고 개인적으로 결론 지어봤습니다. 8. 자바스크립트 발전 방향을 알아보겠습니다. 9. 브라우저를 벗어난 활용과 화면 구현을 100% 자바스크립트만으로 그리는 형식으로까지 발전하고 있습니다. 10. 이전에 멀티미디어 플러그인의 리치 인터넷 애플리케이션 형태들이 스크립트만으로 구현하고 있는 추세입니다. 11. 자바스크립트로 html DOM 구조를 변경하다보니 컨텐츠가 엉뚱한 위치에 위치에 생성되기도 합니다. 12. 이런 문제점들에 대해서 어떠떻게 고려할지 예시를 통해서 살펴보도록 하겠습니다. 13. 모든 마우스 액션에 상응하는 키보드 이벤트를 중복으로 줘야 됩니다. mousedown과 keydown, mouseup과 keyup, click과 keypress, mouseover과 focus, mouseout과 blur. 예시를 보시면 mouseover 에만 들어가있는 탭 컨텐츠 노출 기능이 tab 키로 이동시에는 노출이 안됩니다. 따라서 같은 액션을 focus 에도 중복으로 넣어줘야 됩니다. 14. a 링크 태그의 href 속성을 무시하고 click 이벤트를 통해 액션을 제어지만 href 의 속성을 최대한 이용하여 스크립트 미지원 환경에서도 최종적으로 같은 결과의 액션이 일어나도록 처리해줘야 됩니다. 예시를 보시면 스크립트에서 "이동하시겠습니까?" 의 확인 창을 띄운 후 페이지 이동을 하려는 동작을 요할때 a 태그의 href 이동 경로 url 을 그대로 갖고 와서 확인 누르면 이동할수 있게 처리하면 좋습니다. 15. 피이지내에서 사용자 이벤트에 의해 컨텐츠 생성할때 innerHTML 을 많이 사용하지만 해당 document 위치에 문자열 형식의 innerHTML 을 사용하시기 보다는 createElement를 통해서 가상객체를 먼저 생성한 후 appendChild 로 삽입해 주도록 합니다. 예시를 보시면 추가 버튼을 누르면 입력란이 추가로 생성되는데 이와 같이 스크립트에서는 createELement 를 활용하여 넣어주시면 됩니다. 16. show hide 기능을 쓸때는 이벤트 핸들러 바로 뒤에 노출되도록 HTML 구조도에 맞게 보여지도록 하셔야 됩니다. 첫번째 예시로는 설정 버튼을 누르면 노출되는 설정메뉴들이 바로 설정버튼 다음에 나오도록 해야됩니다. 두뻔째 예시로는 전화 입력 폼 에서 번호가 아닌 문자를 입력하시면 경고 dialog 창이 나타나는데 이를 바로 뒤에 넣지 못넣는다면 focus 를 dialog 의 첫번째 텍스트에 focus를 주시고 dialog 내부에 있는 버튼들에 tabindex=1 속성을 줘서 tab 키로 탐색시 dialog 안에서만 이동되고 닫게되면 열리기 전 영역이나 원하는 영역으로 focus 를 주시면 됩니다. 17. a,input,buuton 등 Html 기본 이벤트 핸들러 태그들 외에 어쩔수 없이 액션을 넣어야할 경우 click 이벤트만으로 처리하게 되면 키보드 접근이 안되기 때문에 tabindex=0 , keypress 이벤트, aria-role 속성도 추가해주시면 접근이 가능합니다. 예시를 보시면 img 태그로 되어있는 썸네일 이미지를 클릭하면 큰이미지가 변경이 되는데 click 이벤트만 주고 있어서 키보드 접근이 안됩니다. 위와 같이 해당 속성 및 추가 이벤트를 주시면 키보드로도 이벤트가 활성화 됩니다. 18. 자동 슬라이드 되는 효과나 동영상에 대해서 재생/정지 기능을 제공을 해야합니다. 특히 라이브러리를 사용하실때 이런 접근성이 용이한 기능들이 존재하는지 확인하고 이용해주세요. 19. 브라우저마다 지원 함수들이 다른게 존재하는데 조건문을 줘서 브라우저별 그에 맞는 함수들을 모두 지원해줘야 됩니다. 예시로 addEventListener 함수는 ie8이하에서 지원이 안되고 대신 attachEvent 함수를 지원하고 있기 때문에 조건문으로 addEventListener 인식시 해당 함수를 사용하고 attachEvent 인식시에 이 함수를 사용하게 크로스 브라우징 처리를 해줍니다. 20. 시간과 고려를 통해 더욱 많은 사람들과 소통하고 공유할 수 있기를 바랍니다.
Recommended
More Related Content
More from Nts Nuli
More from Nts Nuli (20)
[2016널리세미나] 스크립트를 통한 접근성은 어떻게 지켜야 할까
- 1. 스크립트를 통한 접근성은 어떻게 지켜야 할까? 오윤식 기술로 동행하다
- 2. 목차 1.접근성은 마크업만 지키면 되는가? 2.자바스크립트의 발전 3.실무 스크립트 접근성 준수 예시
- 3. 1. 접근성은 마크업만 지키면 되는가?
- 4. 접근성 = 시멘틱 마크업 1. 접근성은 마크업만 지키면 되는가?
- 5. 1. 접근성은 마크업만 지키면 되는가? 디자인 마크업 FRONT-END개발 BACK-END개발 기획
- 6. 1. 접근성은 마크업만 지키면 되는가?
- 7. 1. 접근성은 마크업만 지키면 되는가? Graceful Degradation (우아한 성능 저하) Progressive Enhancement (단계적 향상)
- 8. 접근성 = 가독성 1. 접근성은 마크업만 지키면 되는가?
- 10. 2. 자바스크립트의 발전
- 11. ㅍ 2. 자바스크립트의 발전
- 12. 2. 자바스크립트의 발전 JAVASCRIPT – HTML (DOM)
- 13. 3. 실무 스크립트 접근성 준수 예 시
- 14. 3. 실무 스크립트 접근성 준수 예시(1) mousedown mouseup click mouseover mouseout 마우스 이벤트에 대해 키보드 이벤트 중복 사용 keydown keyup keypress (기본 핸들러 외) focus blur <시연참조>
- 15. 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> <시연참조>
- 16. 3. 실무 스크립트 접근성 준수 예시(3) Document 직접적인 innerHTML 사용 자제 해당 페이지 내에 콘텐츠를 삽입할 때 innerHTML 자체로 페이지에 삽입이 아닌 createElement 를 통해 append 시키도록 한다. <시연참조>
- 17. 3. 실무 스크립트 접근성 준수 예시(4) 이벤트를 통한 노출 콘텐츠는 해당 핸들러 뒤에 생성 이벤트를 통해 노출되는 하위메뉴, 설정메뉴, 유효성 안내문구, 등의 콘텐츠는 해당 event 핸들러 바로 뒤에 생성 하는게 좋으며 dailog 팝업의 경우 tabindex 처리와 focus 처리 <시연참조>
- 18. 3. 실무 스크립트 접근성 준수 예시(5) 이벤트 태그가 아닌 태그에 이벤트를 걸 경우 최대한 <a>,<input>,<button>, 등의 기본 핸들러에만 이벤트 부여 불가피하게 <div>,<span>,<img>, 등에 이벤트를 걸 경우에는 tabindex=0, keypress 이벤트, aria-role=“button” 처리 <시연참조>
- 19. 3. 실무 스크립트 접근성 준수 예시(6) 자동재생 형태 정지기능 제공 자동 롤링 이미지, 동영상 플레이어, 등에 대한 play/pause 기능 제공
- 20. 3. 실무 스크립트 접근성 준수 예시(7) 사용자 환경별 호환 조건 처리 모바일, IE, Fire Fox, Chrome, Opera 등 디바이스별 및 브라우저별 미지원 함수들에 대한 조건문을 통해 확인 후 별도 처리 <시연참조>
- 21. 배려, 소통, 공유
- 22. Thank you! 2016 널리 세미나 기술로 동행하다 4th
Editor's Notes
- 안녕하세요. 발표시작하겠습니다. 이번 시간에는 스크립트를 통한 접근성은 어떻게 지켜야 할까에 대해서 이야기해보도록 하겠습니다.
- 발표 순서는 위 목차로 나뉘어지며 1,2장 접근성 ,그리고 스크립트에 대해서 간단하게 짚고 넘어간 뒤에 실무 예시 및 해결법에 대해서 중점적으로 다루겠습니다~
- 여기 모이신 여러분들 대부분 접근성에 대한 정보를 공유 하기 위해서 오신 것으로 알고 있는데요… 접근성을 지켜야된다고 하면 보통 HTML 마크업 코딩에만 신경쓰게 되고 대부분 마크업 개발자들에게만 책임을 묻게 되죠.
- 시멘틱 마크업이 분명 태그의 의미와 용도를 적절하게 사용하는 역할로 접근성을 지키기 위해 필수적이긴 하지만 사실은 시멘틱 마크업이 곧! 접근성이다 라고 설명할 수는 없죠.
- 하나의 웹 프로젝트를 완성하기 위해서 더 세분화 되어 있지만 간단하게 추리자면 위와 같이 기획부터 디자인, 서버개발 까지 분담이 되어 하나의 정보를 전달할 수 있는 웹이 만들어지죠. 웹사이트가 나오기위해서는 이렇게 한 포로세스를 거쳐서 완성되기때문에 초기 기획 단계에서부터 디자인까지 사용성에 맞는 화면 구성, 그리고 그에 맞는 디자인이 나와줘야 되고 뒷 단에서는 그에 맞는 데이터 형식을 저장 및 출력까지 모든 요소에 접근성은 필요로 합니다.
- 제가 우연히 찾은 사이트인데요. 영화 상영시간 안내 페이지..인것 같은데요.. 이런 시안을 받게 되면 어떻게 마크업 해야될지 난감하죠. 디자인을 위해서라면은 어느 정도 위로가 되겠는데..별로 위로도 안되고 이걸 테이블로 짜야 될지 말아야 될지.. 그냥 통 이미지로 박아버리고 싶고 확실히 접근성을 이해하는 기획자나 디자이너분들은 결과물 자체가 다르게 나옵니다. 이렇게 접근성을 준수하는건 마크업에만 제한된게 아닌 모든 작업자들이 고려를 하고 실제 작업을 하게 되면 번거로운건 맞지만, 보다 더 많~은 사람, 모든 사람들에게 동일한 정보를 제공하기 위해서 필요하죠
- 접근성을 지키기 위해서 ie6,7,8등 구환경 기준하에 성능을 저하시킴으로 준수를 하기도 했는데요 새로운 기술은 계속해서 도입되고 또 모바일웹의 활성화와 html5가 부각되면서 구 버전의 기준으로만 개발할 수 없는 상황에 도달하게 됐습니다. 여기에서 서로 타협하는 합의 개념인 단계적 향상으로 구브라우저에서는 최소한의 콘텐츠 가독이 가능하게만 처리하는 방식으로 기준: 구브라우저 -> 모던 브라우저 로 접근성을 준수 하고 있습니다. 이로 인해 신기술 도입 장벽이 사라지고 생산성을 높이고자 하는 합의라고 볼수 있죠.
- 접근성을 한마디로 어떻게 표현할지를 한번 고민해봤는데요. 이건 제 나름의 생각으로 무조건 정답은 아니라고 생각하고, 또 정답이 있다고 생각하지는 않지만 굳이 표현하자면 정보를 얻는데에 있어 차별을 두지 않고 모두 똑같은 정보를 습득할 수 있게 잘 표현된 문서? 즉 HTML 마크업을 규제하는것이 아니고 좀 더 포괄적으로 전달력이 좋은!, 가독성이 좋은 것이 좋은 접근성이라고 결론을 내봤습니다.
- 예시에 앞서서 또 빼먹으면 서운하니까 간략한 자바스크립트 현황에 대해서 얘기해보겠습니다.
- Javascript 는 1990년 전반부터 html 과 같이 발전해 나갔죠. 최근에는 Node.js 를 중심으로 브라우저를 벗어난 활용과 angular,react 처럼 화면구현을 100% 자바스크립트로 그리는 Client-Rendering 형식도 많이 활용되면서 빠르게 발전하고 있습니다..
- 이전에 플래시나 실버라이트등의 플러그인을 통해 제공한 리치 인터넷 애플리케이션 형태들이 별도의 플러그인 없이 스크립트만으로 다이나믹한 UI 를 구현하고 있는 추세입니다.
- 자바스크립트는 결국엔 HTML DOM 형태를 조절을 합니다. 예를들어좌에서 우로 이동하는 애니메이션도 단순하게 0.1초당 margin-left 값을 +1 씩 더해주라고 선언하는게 사실은 전부거든요. 근데 이렇게 마음대로 HTML DOM 구조를 변경할수 있기 때문에 흐름에 맞지 않게 코드들이 변형되기도 하고 콘텐츠가 엉뚱한 위치에 생성되기도 합니다.
- 경우에 따라서 이런 문제들은 다양하게 나타나는데 여기서는 흔히 잘못 쓰이는 기법들에 대해서 어떻게 고려해야 할지를 이제 코드 예시를 통해서 몇 가지 살펴보도록 하겠습니다.
- 사용자들을 위해서 모든 마우스 액션에 상응하는 키보드 이벤트를 똑같이 줘야 되는데요 위표와 같이 좌측의 마우스 액션에 대해 일반적으로 쓰이는 우측의 키보드 이벤트를 중복해서 사용해줘야 됩니다. input,button,a 태그와 같이 핸들러 태그들에는 기본적으로 click 이벤트에 대한 keypress 액션이 먹히게 되는데 그 외 태그들에 대해서 click 이벤트를 줄 경우에는 keypress , 그 중에서도 엔터 keyCode 에 대해서도 같은 이벤트를 줘야 됩니다. 위와 관련해서 간단하게 예제 보여드리겠습니다.
- a 태그는 기본적으로 링크 타겟 및 페이지전환 태그인데 요즈음에는 페이지 속성들이 다양하다 보니 페이지 전환도 단숨에 시키려고 하지 않고 확인 절차나 경고 절차를 수행하고 이동시키게 끔 많이 처리하고 있는데요. 그러다 보니 a 태그의 href 속성은 무시한 채 스크립트의 click 이벤트로 처리하는 경우가 많으시죠. (자연스럽게!) 저희 유교사상에 맞게 개발도 사실은 겸손하게 생각해야 돼요~. 모든 브라우저가 스크립트를 지원한다는 생각이나 모든 브라우저가 똑같이 작동한다는 자만심을 어느 정도 버리고 작업을 해야 모든 사람들과 소통을 할 수 있습니다~^^ 이런경우 a 태그의 href 속성을 최대한 활용을 하는 방법으로 합니다. 특정 액션을 요구하고 페이지 이동을 하시려고 할때 이와 같이 href 에는 최종으로 이동되는 페이지경로를 넣어주고 스크립트에서는 특정 액션이 완료된 후 해당 href 의 경로로 이동하게 처리하시면 됩니다. 예시를 통해서 한번 확인해보겠습니다. (#destination 에 대한 예시도 작업예정)
- 페이지내에서 사용자 이벤트에 의해 콘텐츠 객체를 생성할때 innerHTML 을 많이 사용하는데요. 물론 간단하고 편하죠 Html을 쭉 늘려서 문자열 형태로 넣어주면 되기때문에.. 브라우저에서 문자열을 DOM 구조로 알아서 해석해 주기 때문에 문제가 없어 보이지만 좋은 접근성 방법은 아닙니다. createElement 를 통해 가상 객체를 우선 생성하고 appenChild 로 페이지내에 삽입해주도록 하는 방법을 권하는데요.. 예시를 통해서 확인해보겠습니다.
- 흔히 쓰는 show hide 기능 관련해서... // 스크립트에서 해당 버튼을 눌렀을 때 노출되는 내용이 HTML 구조에서 엉뚱한 위치에 생성되는 경우가 있는데요. 이벤트 핸들러에 대한 추가적인 내용은 당연히 구조상 핸들러 바로 밑에 생성이 돼야 가장 문맥 흐름에 맞겠죠. 어떻게 보면 당연한 내용이지만 가끔 사이트 돌아다녀보면 버튼을 누르고 소스코드를 확인해보면 엄한 위치에 나타나는 경우도 종종 찾아볼수 있었음다. dailog 팝업의 경우에는 전체화면을 덮는 스타일로 나타나야 되기 때문에 dialog의 제목, 그리고 버튼들에 대해서 tabindex=1 속성을 줘서 tab 키로 탐색시 dialog 안에서만 움직이고 또 dialog 를 닫으면 다시 타겟을 dialog 열리기 전 영역에 주시면 됩니다. 예시를 한번 살펴보겠습니다. (예시1 에서 wai-aria open 추가 예정) (예시2 에서 tabindex 추가 예정)
- 일반적으로 a,input,button 등 Html 기본 이벤트 핸들러 역할을 하는 태그들에만 이벤트를 걸어줘야되는데요. 작업을 하다 보면 div나 p, span 태그에 이벤트를 진~짜 어쩔수 없이 걸어야 하는 경우가 생깁니다. 그럴때 단순히 onclick 으로 만 처리를 하게 되면 키보드 접근시 작동이 안되게 되는데요. 그 해결방법은 tabindex 와 keypress, 그리고 추가적으로 aria 속성도 넣어주시면 접근이 가능해집니다. 마찬가지로 예시화면으로 설명해드리겠습니다.
- 시간 간격으로 자동 슬라이드 되는 효과를 구현할 때 직접 제작을 하기 보다는 돌아다니는 라이브러리들을 많이 사용하고 저 역시 시간 소모와 안정성을 위해서는 오히려 라이브러리 참조를 많이 하는데요. 어떤 라이브러리를 사용할지 고민하실 때 접근성에 대한 이런 이슈들도 항상 고민하고 사용해주시기 바랍니다. 특정 라이브러리를 여기서 제가 추천해드릴 필요는 없을 것 같고요. 효과 중 흔하게 쓰는 슬라이드 기능에 재생 정지 기능이 제공이 되는지, 항상 접근성도 고려하고 있는지를 선정 기준에 넣어주시기 바 랍니다.
- 자바스크립트의 발전과 더불어 모든 브라우저에서 100% 똑같이 지원되지가 않는데요. 정말 징그러운 크로스 브라우징 처리도 유념해두면서 작업해야 되죠. 간단하게 예를 들면 방금전에 보여드린 예시에서 이벤트 리스너 처리를 조건별로 처리했는데요 아시겠지만 ie8 이하에서는 addEventListener 함수는 지원하지 않고 있습니다. 대신에 attachEvent 리스너 함수를 지원하고 있기때문에 위에는 ie8 이상의 모던 브라우저에서의 동작이고 아래는 ie8 이하 구버전에서의 동작도 조건문을 줘서 처리하시기 바랍니다. Prototype 을 써서 하는 방식도 있고 여러가지 있는데요 어떤 방법을 쓰시던 귀찮더라도 고려 해주는 인내심 있는 개발을 해주세요.
- 조금만 배려하고 고려해주면 지킬 수 있는 그런 다양한 접근성 방법을 최대한 살려서 더욱 많은 사람들과 소통하고 공유할 수 있기를 바라겠습니다. 감사합니다.