[2019널리세미나] WCAG 2.1 Reflow 성공 기준에 대응하는 우리들의 자세
안녕하세요. 야무입니다. 세션 3번째 시간 “WCAG 2.1 Reflow 성공 기준에 대응하는 우리들의 자세“ 발표를 시작하겠습니다. 지난 2018년 6월 5일. 그러니까… 약 1년 전에 WCAG 2.0을 보완하는 2.1 공식 권고안이 발표되었습니다. 2008년 WCAG 2.0 권고안이 발표된 지 약 10년 만의 일입니다. 눈 부신 기술의 발전 속도에 비해, 현저하게 더딘 10년 만의 업그레이드 소식은 다소 아쉽습니다. 아쉬움을 전하긴 했지만, 사람을 위한 보다 나은 접근성 향상 방법이 공식화 되고, 서비스를 제작하는 이들에게 가이드를 제시한다는 점은 분명 반가운 소식입니다. WCAG 2.1 웹 콘텐츠 접근성 지침 문서(웹)는 https://www.w3.org/TR/WCAG21/ 에서 볼 수 있습니다. WCAG 2.1은 2.0 버전 내용을 포함하는 Super Set(상위 집합) 입니다. 즉, 2.0 내용은 변경 없고 새로운 성공 기준이 추가된 버전입니다. 이미 2.0 내용을 잘 알고 있는 분들은 2.1 문서 내용을 모두 읽기 보다는 새롭게 추가된 내용만을 모아 제공하는 문서를 읽는 것이 좋습니다. What’s New in WCAG 2.1 https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/ WCAG 2.1에 새롭게 추가된 성공 기준은 모바일, 저시력, 인지/학습 장애 접근성을 개선합니다. 모바일 8개, 저시력 5개, 인지/학습 장애 4개 총 17개의 성공 기준이 추가되었습니다. WCAG 2.1의 적합성 수준별 성공기준은 서로 다른 상황의 요구 사항을 충족시키기 위해 3가지 적합성 수준(A, AA, AAA)으로 분류됩니다. A는 최소 수준의 적합성으로 광범위한 접근성 준수를 달성하기는 어렵습니다. AA는 가장 일반적인 수준의 적합성으로 대부분의 법률/공식 요구사항으로 준수를 권장합니다. AAA는 어려운 수준의 적합성으로 구현하기 쉽지 않고, 비교적 많은 시간과 노력이 요구됩니다. WCAG 2.0과 WCAG 2.1의 변경 사항을 비교한 표입니다. 간단하게 변경사항을 요약하면 1개의 지침과 17개의 성공 기준이 추가 되었습니다. 그림 대신 실제 표를 통해 내용을 확인할 분들은 https://bit.ly/wcag2vs21로 접속해서 내용을 확인하세요. 이 시간에 WCAG 2.1의 변경 사항을 모두 살펴보기는 어렵습니다. 앞으로 남은 시간도 얼마 없으니까요. 이제 본론으로 들어가겠습니다. 새롭게 추가된 WCAG 2.1의 17개의 성공 기준 중 우리가 살펴 볼 것은 1.4.10 리플로우(Reflow) 입니다. WCAG 2.1 공식 권고안 Reflow 성공 기준 입니다. 저 시력 장애로 힘들어 하는 이들에게 도움을 주기 위해 고안된 이 성공 기준의 적합성 수준은 AA 입니다. Success Criterion 1.4.10 Reflow https://www.w3.org/TR/WCAG21/#reflow Reflow 성공 기준 원문 내용을 살펴보면 콘텐츠는 정보나 기능의 손실 없이 양 방향(수직/수평)으로 스크롤 되지 않도록 제공되어야 한다고 명시되어 있습니다. 수직 방향으로 스크롤 되는 콘텐츠의 경우, 너비(width) 기준을 320px로 잡았을 때 수평 방향으로 스크롤 바가 생기면 안 된다는 것입니다. 반대로 수평 방향으로 스크롤 되는 콘텐츠는 높이(height) 기준을 256px로 잡았을 때 수직 방향으로 스크롤 바가 생기면 안됩니다. 여러분의 이해를 돕기 위해 그림을 살펴봅시다. 데스크탑 웹 사이트를 사용자가 브라우저 화면 확대 기능(Ctrl + Plus, Minus 키)을 사용해 최대 400%까지 확대 했을 때 한 쪽 방향이 아니라, 양 쪽 방향 모두 스크롤 바가 생기지 않도록 서비스를 제작해야 한다는 성공 기준이 Reflow 입니다. 여러분! 질문 입니다. 왜? 400% 까지 확대를 기준으로 든 것일까요? 힌트를 드리면 CSS 픽셀 입니다. Understanding Success Criterion 1.4.10: Reflow - Viewing distance and display resolution https://www.w3.org/WAI/WCAG21/Understanding/reflow.html#viewing-distance-and-display-resolution 간단히 말해서 각 장치는 픽셀 농도가 각기 다릅니다. 디스플레이 기술이 발전함에 따라 동일한 크기의 물리적 공간에 픽셀 개수를 더 많이 넣을 수 있게 되었습니다. 픽셀 농도(density)는 배율(ratio)로 구분하는데 1x, 2x, 3x 처럼 픽셀 농도가 커질 수록 배율 또한 높아집니다. 즉, 배율이 클 수록 픽셀이 촘촘합니다. 이러한 변화(기술적, 환경적)에 따라 설계(Design) 방법 또한 변화해왔습니다. 특히 디자이너가 만들어 내는 에셋은 비트맵(JPG, PNG 등) 포멧이 일반적인데 비트맵 이미지 포멧은 앞서 이야기 한 픽셀 밀도에 영향을 받습니다. 그러므로 비주얼 디자인(예: 아이콘, 로고 등) 시 픽셀 밀도를 고려해야 합니다. 예를 들어 10을 기준으로 하는 디자인은 3배율 픽셀 밀도를 가진 장치에서 30px로 처리되어야 합니다. 반면 CSS, SVG와 같은 포멧은 픽셀 밀도에 전혀 영향을 받지 않습니다. 즉, CSS에서 사용하는 단위는 장치의 픽셀 밀도와 무관하게 독립적으로 사용 가능한 단위가 됩니다. 쉽게 말해 앞서 그림에서 10에 해당 됩니다. 실제 사용 시에는 10px 단위로 쓰지만, 장치 독립적이기에 3배율 픽셀 밀도를 가진 장치에서 30px로 처리가 되는 것입니다. 이런 이유로 Reflow 성공 기준의 단위는 CSS 기준인 것입니다. ※ 참고로 iOS 앱은 장치 독립적인 단위로 pt를, Android 앱은 dp 단위를 사용합니다.
Recommended
Recommended
More Related Content
More from Nts Nuli
More from Nts Nuli (20)
[2019널리세미나] WCAG 2.1 Reflow 성공 기준에 대응하는 우리들의 자세
- 1. 2019. 7th NULI SEMINAR AI & ACCESSIBILITY WITH EDUCATION Make it More Accessible! 모두가함께누리는!
- 2. 2019. 7th NULI SEMINAR AI & ACCESSIBILITY WITH EDUCATION Session 3 WCAG 2.1 Reflow 성공 기준에 대응하는 우리들의 자세 야무 (yamoo9), UA Lab
- 3. 강의에 앞서_ WCAG2.1국제표준접근성가이드라인 중일부를,국내표준에반영하기 위한작업이정보접근성포럼을통해올해하반기진행될예정입니다. 강의에서다루는주제인Reflow는국제표준에추가된성공기준중에서도 함께고민해볼이슈가가장많은지표입니다.오늘강의를들은후,여러분의 의견을Facebook에공유해주시면여러분의의견을참고하여국내접근성 개정에반영될수있도록 조치하겠습니다. #reflow #국내접근성개정 #찬성 #찬성이유 #reflow #국내접근성개정 #반대 #반대이유
- 10. bit.ly/wcag2vs21
- 12. 1.4.10 Reflow (AA) 콘텐츠는정보나기능의손실없이양방향으로스크롤되지않도록제공되어야합니다.(CSS픽셀기준) 320px에 해당하는 너비의 수직 스크롤링 콘텐츠 256px에 해당하는 높이의 수평 스크롤링 콘텐츠 Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for: • Vertical scrolling content at a width equivalent to 320 CSS pixels. • Horizontal scrolling content at a height equivalent to 256 CSS pixels.
- 13. 1.4.10 Reflow (AA) 콘텐츠는정보나기능의손실없이양방향으로스크롤되지않도록제공되어야합니다.(CSS픽셀기준) ※ 권고안 작성자는 320px 너비를 합리적인 최소 크기로 선택했다고 설명합니다.
- 14. CSS 픽셀이 기준인 이유? 오늘날모바일기기는각각장치마다가진픽셀밀도(PixelDensity)가다릅니다.
- 16. 반면CSS,SVG포멧은비트맵과달리장치의픽셀밀도에전혀영향을받지않습니다. 장치독립적으로적용가능한단위(DIP)를제공합니다. ★Reflow의성공기준단위가CSS픽셀인이유! CSS 픽셀이 기준인 이유?
- 17. 현시점에서장치픽셀배율은최대4x까지고려됩니다. (Android 4x, iOS 3x) ★Reflow의성공기준배율을최대400%까지잡은이유! 400% 확대까지 설정한 이유? ※ 저 시력 사용자 이용 실태 보고에 따르면 400% 이하로 화면을 확대하는 사용자가 많습니다.
- 18. 브라우저확대/축소배율이400%까지(IE기준)지원합니다. (Chrome은500%까지,Edge는1000%까지지원) 400% 확대까지 설정한 이유? ※ 저 시력 사용자 이용 실태 보고에 따르면 400% 이하로 화면을 확대하는 사용자가 많습니다.
- 19. Reflow의 필요성을 이야기 하는 사용자 It's nearly impossible to read text if I have to scroll right and left to read each line. It's disorienting and I lose my place. It makes it hard to understand what I'm reading. 각줄을읽을때좌우로스크롤해야한다면텍스트를읽는것이 거의불가능합니다.제자리를잃어혼란스럽고,읽고있는것을 이해하기어렵게만듭니다.
- 20. Adobe Reader의 Reflow 예시 각줄을읽을때좌우로스크롤해야한다면혼란스럽고,읽고있는것을이해하기어렵게만듭니다.
- 21. Adobe Reader의 Reflow 예시 Reflow기능을켜면스크롤바가한방향에만생겨콘텐츠를읽기편해집니다.
- 22. 저 시력 사용자 이용 실태(2018.09) WebAIM에서실시한저시력사용자설문결과를보면“브라우저확대＂기능사용자비율이44%! ※ 아쉽게도 국내 설문은 진행된 적이 없는 것 같습니다.
- 23. 저 시력 사용자 이용 실태(2018.09) 저시력사용자의확대비율은400%이하가일반적입니다.
- 24. Reflow의 작동 방식 HTML/CSS 또는PDF,ePub으로제작된문서는 사용자가콘텐츠크기를확대할때 페이지공간이변경되더라도,화면(Viewport)내에서모든정보를보거나기능을사용 할수있어야합니다. 반응형 웹 디자인 (RWD) 콘텐츠 Reflow를 지원하는 것을 ‘반응형 웹 디자인(Responsive Web Design) 이라고 합니다. CSS 미디어 쿼리를 사용해 태블릿, 스마트 폰과 같은 모바일 장치 에 최적화 된 레이아웃을 제공하기 위해 다양한 뷰 포트의 너비(width)에 대해 웹 콘텐츠를 다시 포멧 하는 기능입니다. 중요한것은이러한디자인이뷰포트너비의변화만처리한다기보다는브라우저확대/축소 기능을사용한경우또한포함한다는점입니다.
- 25. Reflow ≒ RWD 결국 Reflow 성공 기준은 웹 사이트를 반응형 웹 디자인으로 구축했을 때 충족합니다. 브라우저 화면 확대/축소 시에도 콘텐츠를 읽거나, 기능을 사용하는데 제약이 없습니다. bit.ly/ms-rwd
- 26. Reflow ≒ RWD 반응형 웹 디자인으로 구현된 웹 사이트를 브라우저에서 400% 확대해 본 결과 화면 구성이 변경 됨에도 콘텐츠를 읽거나, 기능을 사용하는데 제약은 없습니다. yamoo9.github.io/front-end-master
- 27. Reflow 성공기준에부합하는사이트예시 대한민국 국회 – 국회 예산 정책처 웹 사이트는 Reflow 성공 기준에 부합합니다. 화면 구성이 변경 됨에도 콘텐츠를 읽거나, 기능을 사용하는데 제약은 없습니다. nabo.go.kr
- 28. Reflow 예외 사항 2차원레이아웃이요구되는기능및 의미를가진콘텐츠는Reflow예외사항입니다. 이미지, 지도, 다이어그램, 비디오, 게임, 프레젠테이션, 데이터 테이블. 콘텐츠 조작에 있어 메뉴, 툴바 등이 지속적으로 표시되어야 하는 웹 애플리케이션. Except for parts of the content which require two-dimensional layout for usage or meaning. • images, maps, diagrams, video, games, presentations, data tables. • necessary to keep toolbars in view while manipulating content.
- 29. Reflow 예외 사항 지도웹서비스는Reflow 성공기준예외사항입니다.
- 35. Q. Reflow 성공 기준에 부합하려면 반드시 반응형 웹 디자인으로 설계해야 할까요? 반응형웹은서비스를제작하는수단중하나인데...Reflow성공기준으로인해 무조건반응형웹으로서비스를제작해야하는건아닌지우려됩니다. A. Reflow 성공 기준에 부합하는 방법이 꼭 반응형 웹 디자인만 있는 것은 아닙니다. 분명반응형웹디자인은Reflow성공기준을충족하는가장효과적인방법이지만, 반응형웹디자인을사용하지않는레거시시스템인경우,모바일전용웹 사이트를 대체수단으로제공할수있습니다.(320px너비에대응되어야함)
- 36. 반응형이 아닌, 모바일 전용 페이지 별도 제공 반응형웹사이트가아니더라도,대체수단을제공한다면? Reflow 성공기준에부합합니다. koreanair.comkoreanair.com/content/koreanair-mobile
- 37. Q. Reflow 성공 기준은 모바일 장치에서도 400% 확대 시 스크롤 바가 양쪽에 생기지 않아야 하나요? 데스크탑에비해화면이협소한모바일장치에서Reflow성공기준에부합되도록 만드는것은매우어려워보입니다. A. 모바일 장치는 Reflow 성공 기준에서 예외 사항으로 간주 됩니다. 모바일브라우저는장치방향이변경될때자동으로Reflow 됩니다.게다가모바일환경에서 사용자는핀치인/아웃동작으로화면을확대/축소하므로이것은브라우저의확대/축소기능과 관련이없습니다. 즉,모바일장치에서확대/축소는UA지원문제로간주됩니다.
- 38. 모바일 장치에서의 확대/축소는 UA 지원 사항 손가락을모으거나,펼쳐화면을확대하는기능은? Reflow 성공기준이아니라,UA 지원이슈에해당하므로 Reflow 예외사항으로봐야합니다.
- 39. Q. Reflow 성공 기준에 따라 사이트 내에서는 양쪽에 스크롤 바가 생기면 안 되는 건가요? 브라우저 화면의양축에스크롤바가생기지않더라도내부적으로스크롤바가표시되는 경우가있습니다.이런경우도스크롤바가생기지않도록해야할까요? A. Reflow 성공 기준이 가지는 목적 외 경우라면 세로 축 스크롤 화면의 가로 스크롤 또한 허용 될 수 있습니다. Reflow 성공기준은저시력사용자의접근성향상을위해 브라우저화면확대시,콘텐츠를읽고 이해하기용이하도록합니다.바꿔말하면연속된흐름의읽기콘텐츠가아닌경우, 브라우저 화면스크롤바와방향이교차하는스크롤바가 표시될수있습니다.(연속된읽기콘텐츠가아닌경우)
- 40. 연속된 읽기 콘텐츠가 아닌 경우, 스크롤 바 예시 hanwha-security.com
- 41. 스크롤 바를 대체 하는 토글 메뉴 예시 m.11st.co.kr/MW
- 43. 결론 Reflow는저시력사용자의접근성을향상시키는WCAG2.1에추가된성공기준(AA)이다. 브라우저확대기능을사용해화면을확대했을때,스크롤바가양축에모두표시되지않아야한다. 콘텐츠는확대된화면에맞춰재구성(Reflow)되어야한다. 툴바,메뉴바가지속적으로표시되는인터페이스,데이터표,다이어그램,지도,게임등은예외이다. 반응형 웹(RWD)으로 구축된 서비스는 일반적으로 Reflow 성공 기준에 충족한다. 반응형웹이아니더라도,적절한대체수단(예:모바일전용웹사이트)을제공한다면충족한다. 모바일환경(예:스마트폰,태플릿등)에서의확대/축소는Reflow성공기준대상이아니다. 연속된읽기콘텐츠가아닌경우,브라우저화면스크롤바와교차하는스크롤바를표시할수있다.
- 44. 리마인드_ WCAG2.1국제표준접근성가이드라인 중일부를,국내표준에반영하기 위한작업이정보접근성포럼을통해올해하반기진행될예정입니다. 오늘강의에서다룬Reflow는국제표준에추가된성공기준중에서도함께 고민해볼이슈가가장많은지표입니다.여러분의의견을Facebook에공유 해주시면여러분의의견을참고하여국내접근성개정에반영될수있도록 조치하겠습니다. #reflow #국내접근성개정 #찬성 #찬성이유 #reflow #국내접근성개정 #반대 #반대이유
- 47. bit.ly/AOA11Y
- 50. Thank you