NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


웹 접근성 관계요소 분류.

본문 건너 뛰기

NHN의 UIT Lab. 산하 ‘웹 표준화 팀(Web Standardization Team)‘에서는 2007년 7월부터 팀내 ‘웹 접근성 TF’를 구성하고 올해 연말까지 NHN의 자체적인 웹 접근성 지침을 개발하기로 하였습니다. 현재 웹 접근성 TF에는 16명의 웹 표준화 팀원들이 참여하여 자체적인 연구활동과 지침개발 작업을 진행하고 있습니다. 오늘은 웹 접근성 지침을 개발하기 위한 사전 작업으로서 ‘웹 접근성 관계요소’를 정리하고 이를 맵핑해 보았습니다. 맵핑 작업에는 ‘Mindomo‘ 라는 온라인 마인드맵 툴을 이용하였고 웹 접근성 지침을 개발할 때 고려해야 할 요소들을 가능한 빠짐없이 분류하고자 하였습니다. 부족한 빈틈을 매워줄 적절한 조언도 필요하고 다른 분들께 도움이라도 될까 싶어 공유하게 되었습니다. 많은 조언 부탁드립니다. 위쪽 이미지와 아래쪽 표의 내용은 동일합니다.

웹 접근성 관계요소 분류 맵

웹 접근성 관계요소 분류 맵

마우스 중앙에 위치한 휠 스크롤러를 이미지 위에서 클릭하시면 보다 편하게 보실 수 있습니다.

웹 접근성 관계요소 분류 표

1차 분류 2차 분류 3차 분류 4차 분류 5차 분류 6차 분류 7차 분류 설명
사람에 따른 분류 웹 저작자 Content Developement 웹 기획자(Planner)       콘텐트, UI/UX 개발 및 기획
웹 이용자(End User)       사용자 생산 콘텐트(UGC) 저작
Client-side Developement Web Designer       웹 그래픽 설계
HTML/CSS 개발자       문서 구조화 및 화면 렌더링 구현
Javascript/AJAX 개발자       Javascript를 이용한 동적 UI 구현
Flash/Action Script 개발자       Flash를 이용한 동적 UI 구현
Server-side Developement Server-side 개발자       웹 프로그램 저작
웹 이용자 어린이 경험치       웹을 처음 경험하거나 경험치가 낮아 사용능력이 떨어짐
언어능력       고급어휘 또는 외국어 능력이 떨어짐
노인 경험치       웹을 처음 접하거나 자주 사용하지 않아 웹을 이해하거나 사용하는 능력이 떨어진다
신체능력       신체기관의 노화로 인하여 시각, 청각, 지체기능이 정상인보다 떨어진다
시각장애 저시력       웹 저작자가 서체의 크기를 줄이는것을 제한하거나 서체의 크기를 조절할 수 있도록 지원
색맹       색에의하여 내용을 구분하도록 하는 콘텐트의 제한, 특히 적녹생맹이 가장 많음
전맹       시력이 전혀 없고 청력에만 의존하는 사람, 마우스를 사용할 수 없음
청각장애         멀티미디어 콘텐트의 음성을 인지할 수 없으므로 캡션(자막)이나 대체 텍스트에 의존
지체장애         팔이 불편하거나 없는 경우 마우스, 키보드의 사용에 제한이 생긴다
정신지체         지능이 70 이하인 경우로서 어린이의 웹 이용행태와 유사, 언어능력과 사용능력이 모두 떨어짐
난독증         지능은 정상이나 글을 판독하는 것에 어려움을 느끼는 뇌질환
정상인         특별한 장애가 없으나 환경요인에 의하여 웹에 접근하는 것에 일시적인 어려움을 격을 수 있다
환경에 따른 분류 하드웨어(Hardware) 환경 장치(Device)별 분류 PC 입력장치 키보드   키보드만 사용하는 경우
마우스   마우스를 사용할 수 없거나 정교한 사용이 어려운 경우
출력장치 모니터 저해상도 1024*768 미만의 해상도
색재현성 LCD등 색 재현력이 떨어지는 경우
스피커   장치이상 또는 장치의 부재
프린터   흑백 인쇄
프로젝션   조명이 어두운 환경, 어두운 배경과 고 명도대비 요구
Mobile 화면의 크기      
접속 속도      
데이터 이용 요금      
입력장치의 한계      
접속(Network) 환경 분류 저속환경       고용량 파일 전송에 의한 지연
접속불안정       권한(로그인) 세션 종료
소프트웨어(Software) 환경 운영체제(Flatform)별 분류 Windows        
Mac        
Linux        
PC 브라우징 도구의 Vendor별 분류 Internet Explorer        
Firefox        
Opera        
Safari        
Mobile 장치의 화면 렌더링 방식에 따른 분류 Small Screen Rendering       디자인 서식이 제거된 화면
Full Browsing Rendering       디자인 서식이 포함된 화면
보조 도구 분류 웹 이외의 문서 읽기전용 프로그램 Adobe Acrobat Reader(PDF)      
MS Word Viewer(DOC)      
한글 Viewer(HWP)      
MS Excel Viewer(XLS)      
음성(aural)출력장치 Client-side TTS     사용자 PC에 설치된 화면낭독기(Screen Reader) 환경
Server-side TTS     웹 저작자가 제공하는 TTS(Text To Speech)환경
분류: 웹 접근성 | 2007년 8월 24일, 2:09 | 정찬명 | 댓글: 20개 |
트랙백URI - http://naradesign.net/wp/2007/08/24/127/trackback/

20개의 댓글이 있습니다.

  1. 엽우 댓글:

    좋은 자료 잘 보고 갑니다.
    고맙습니다.

  2. Hooney 댓글:

    좋은 자료 감사합니다. 웹 접근성에 관계된 요소들을 무척 상세하게 정리한 자료군요~

    팀내 TF에 16명이 참여하다니, 1개 TF의 독과점 아닌가요? 팀 인원 수가 올해 초에 비해서 2배수로 늘었을지도 모르지만요~ ㅎㅎ

    덧) 마인드맵이 인과관계를 표현하는데 효율적이지만, 가치관계를 표현하기에 기능적 한계가 있더군요.

  3. 신현석 댓글:

    그런데 CRT가 왜 색 재현력이 떨어지는 경우인가요?

  4. freeism 댓글:

    와~ 좋은 자료 감사합니다. ^^

  5. 정찬명 댓글:

    허걱.. 신현석님 치명적인 오류발견 감사합니다 (__) CRT가 아닌 LCD로 정정되었습니다. 역시 올려놓길 잘 했군요.^^

  6. rill55 댓글:

    CRT가 색재현력은 더 좋지않나요?^^
    요즘은 모든 멀티미디어 형태가 LCD대상으로 제작되어서
    상대적으로 CRT에서 해상도도 어둡고 LCD에 비해 떨어지는면이 있긴해요

  7. 와, 디테일하게 정리가 잘 되어있네요~!!
    정말 좋은 자료네요!

  8. Na! 댓글:

    개인적으로는 이자료가.. 막연하게 떠돌던.. 요소들을 탁!~ 하고 고 쳐서 제자리를 잡아주는 느낌이네요..
    좋은 자료.. 공개 해주셔서 감사합니다.. 저희 팀.. [압박]용 자료로 사용 하겠습니다..

    항상 얻어만 가는 – Na!

  9. legendre 댓글:

    일목요연하게 정리가 잘 되어 있네요.
    한가지 여쭈어 볼 게 있는데요.
    자바스크립트를 미지원하는 웹 브라우저를 쓰는 사람은 “PC 브라우징 도구의 Vendor별 분류”에 포함될 것 같은데요.
    자바스크립트를 지원하지만 사용하지 않는 경우(이를 이용한 팝업을 기피하거나, 스크립트를 통해 노출되는 광고를 기피하기 위해 이런 옵션을 켜 둘수도 있겠죠.)는 어디에 포함되나요? 이 경우에도, 접근성에 타격을 입을 수 있지 않을까요?(큰 분류로는 소프트웨어 환경쪽인 듯한데요.)

  10. Na! 댓글:

    쓰고 나니 생각나는.. Device에..
    뭐. PSP나.. Nindendo DS등은 모바일 범주로 포함할수 있겠으나..

    TV+SetTopBox 가 곧 추가 될것같다는 생각이 듭니다.. 개인적으로는 이 조합이..

    Webpage를
    개개인이 보는 페이지에서(개인 PC모니터)..
    가족등의 그룹이 보는 페이지 (거실의 TV)의 특성을 만들어 낼것 같다는 혼자만의 상상을 하고 있습니다.

    디지탈.. XBOX360과 PS3로 거실(누가 저런걸 거실에 놓고 사나..?)의 패권를 다투는
    MS와 Sony도 일부는 그런생각이 있지 않을까 하고요..

    지금도 TV+XBOX360 / TV+PS3 /TV+wii (다 콘솔 게임기네..) 가 인터넷 접속을 지원하고 있습니다..
    TV + IPTVSetTopBox는 .. 어떨지도..

    TV해상도가.. 많이 좋아지기는 하지만.. 모니터와는 다르고.. 조작에 관한.. 문제도 PC와는 다르다고 생각됩니다.

    Na!의 혼자만의 상상….

  11. 정찬명 댓글:

    Na! 님께서 조언해주신 범주의 장치들이 보편적으로 사용되는 시기가 온다면 저 목록에 추가하도록 하겠습니다 ^^ 조언 감사드립니다.

  12. 정찬명 댓글:

    legendre님, 안녕하세요? ^^

    Javascript 를 지원하지만 꺼놓고 웹을 사용하는 사람들은 Javascript 의 지원을 받는다고 보는것이 맞다고 생각합니다. 언제든 원하면 켜서 해당 기능을 이용할 수 있으니까요. 하지만 웹 브라우징 도구 자체에서 아예 javascript 를 지원하지 않는 경우라면 사용 자체가 원천적으로 제한되기 때문에 이 경우에는 접근성에 문제가 됩니다.

    일단 Javascript 를 지원하지 않는 브라우징 장치는 모바일에서 Small Screen Rendering 되는 브라우져(Opera Mini..)가 있겠고 기타 텍스트 전용 브라우저(Lynx..)가 있겠는데 텍스트 전용 브라우저와 같은 경우와 Javascript 미 지원 브라우징 장치의 경우는 너무 극단적인 상황이라고 판단하여 따로 분류하지는 않았습니다. 하지만 지침을 만들때에는 자바스크립트에만 의존하는 UI를 사용하지 않도록 하는 내용을 포함시킬 예정입니다.

    조언 감사드립니다.(__) 즐거운 주말 보내세요^^

  13. jaNg. 댓글:

    일목요연하게 정리되있어서 그런지 더 보기 수월하네요.
    매번 좋은 글만 보고가다 메세지 남깁니다. 감사합니다 :)

  14. 소프트원트 댓글:

    이곳 한번 방문해보시겠어요 ?
    미국과학재단 사이트입니다.

    http://www.nsf.gov/news/news_summ.jsp?cntn_id=110283&org=NSF&from=newsField

    위 링크에서 Full Story를 클릭하면, 이동하려는 페이지 안내가 있습니다. 좀 기다리면, 해당 페이지로 이동합니다.

    외부링크를 언급할 때, 사용자에게 해당 사실을 안내해야한다는 이야기가 있는 데 이런 사례를 직접 보게 되내요.

    이렇게 하면, 성질 급한 우리나라 사람들 견디어 낼 수 있을까요 ? ^^

    제 사이트에서도 한번 시험해봐야 겠어요. 정말 사용자를 위한 것이 무엇인 지 느낄 수 있는 것같내요.

  15. 소프트원트 댓글:

    NSF에 보니, 웹제작에 대한 내부기준이 있더군요. 보면서 놀라고 있습니다.

    http://www.nsf.gov/web/guide/index.jsp

    개인적으로 아는 기관이 있는 데, 계속 어떻게 설득해야할 지 난감 그 자체입니다. 말해도 씨알이 먹히지 않으니.. 매번 상황상황, 돈돈돈타령… 웹표준 준수 업체를 사업수행기관으로 선정한다는 공고도 내지만 결국 선정과정에는 반영도 결과도 IE전용 사이트를 만들어내고 있는 데, 이걸로 들이밀어봐야 겠습니다.

    보면, 비HTML 문서에 대해서도 어떻게 제공해야 하는 지에 대한 기준도 있어 도움이 될 수 있지않을까 합니다. 언제 우리나라도 이런 날이 올까요…

    어찌되었든 오늘 아주 좋은 자료를 찾게 되어 기쁩니다. ^ ( ^ ) ^ 룰루랄라…..

  16. 호이♡ 댓글:

    안녕하세요 찬명님 사내 접근성 세미나를 준비중인데 ‘웹 접근성 관계요소 분류 표’ 를 요약해서 참고자료로 쓰려고 하는데 괜찮으신지요~~~ 출처는 밝히도록 할께요~~

    접근성이 단지 장애인들을 위하는 부분이 아니다 라는 것을 느끼게 해 줄 좋은 자료네요 ^^

    좋은 하루 되세요~~~

  17. 엘리스 댓글:

    사실 이 세상의 모든 사람이 접근할 수 있는 웹사이트를 만드는 것은 불가능하겠지만 대부분 많은 사람들이 접근할 수 있도록 하는 것이 중요하다는 것은 분명한 사실이라는 생각이 듭니다. 좋은 자료 감사합니다.

  18. 정찬명 댓글:

    호이님, 물론 괜찮습니다. ^^
    엘리스님, 좋은 하루 되세요. ^^

  19. getting 댓글:

    꽤 오래전 포스팅 된 글이지만 코멘트 남겨봅니다.
    근래에 해상도를 고려하여 작업할때 어떤점을 기준으로 두고 작업해야 하는지 궁금합니다.

    아마 대체적으로 960px과 980px로 나뉘어 지고
    폰트의 경우도 px 구분시 11px와 12px로 나누어지는 것 같습니다.

    해외에서도 960과 980으로 나누어지는 분위기인것 같습니다.

    xe사이트의 경우는 960으로 구성되어 있고,
    nhn에서 제공되는 쇼핑몰 등… 모두 960으로 구성되어 있습니다. (네이버제외)

    apple의 경우는 980px…

    표준을 준수할때 해상도와, 폰트는 가장기본적이라고 보는데…
    어떤관점을 보고 설계를 해야하는지 궁금합니다.

    예로 규모있는 설계를 필요로 하는 쇼핑몰의 경우는 960으로 작업을 할 경우,
    폰트는 11px 중심으로 사용해야 하는 것 같은데…

    어떤게 명확한 답을 내릴 수 있는지 궁금합니다.

  20. 정찬명 댓글:

    @getting

    960 또는 980 픽셀의 폭으로 디자인 하는 것은 모두 1024×768 픽셀 해상도의 모니터에서 잘 보이도록 디자인 된 것입니다. 최근에는 1024×768 이상의 해상도를 사용하는 경우가 대부분이기 때문이죠. 그보다 작은 해상도로 접근하는 PC 환경은 1% 미만인 것으로 알고 있습니다.

    글꼴 크기의 경우 기본적으로 12px 이상이 되어야 좋습니다. 11px 글꼴은 저시력자와 노인에게 가독성이 매우 떨어지기 때문에 추천드리지 않습니다.

    그리고 모니터 해상도와 글꼴 크기에 대한 가이드는 표준과 무관합니다. 웹 표준에서 권장할 만한 사항도 아니고 관련 지침도 없습니다. 모니터 해상도는 사용성 측면에서 고려되는 사항이고 글꼴 크기는 접근성 측면에서 고려되는 사항입니다.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님