달력

03

« 2017/03 »

  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  

Daum의 웹접근성 추진전략 및 Pragmatic HTML/CSS

1 추진현황

  • UI 워크샵
  • IWA TFT 결성
  • 시각장애인UT
  • UI 개발가이드라인
  • 사내/와교육및홍보
  • 진국영역확장

2 웹접근성?

  • IWA TFT
  • 웹접근성준수실태
  • 웹접근성? 웹표준? 웹사용성?
  • 국제/국내동향
  • 기대효과

3 웹접근성 향상 기술 실무 적용 방법

3.1 웹표준화

3.1.1 HTML

  • HTML Element
  • (X)HTML/CSS/SCRIPT 분리
  • 구조화
  • 일반문법준수
  • DTD 문법준수

3.1.2 CSS

  • 속성
  • 에러속성
  • 경고속성

3.2 웹 접근성

3.2.1 HTML

  • 웹 문서 제목
  • 문서 언어
  • 대체 수단 제공
  • 키보드로만 서비스 이용
  • 독립적인 링크 텍스트
  • 페이지 자동 새로고침
  • 온라인 양식

3.2.2 CSS

  • 미디어 설명자

3 웹 사용성

3.3.1 HTML

  • 반복 네비게이션 링크
  • 양식 컨트롤
  • 인접 링크 분리
  • 새 브라우저 창 열기

4 Daum 첫 화면으로 본 웝 접근성

4.1 개발 프로세스

4.2 웹 접근성 개발 프로세스

4.3 적용 된 웹 접근성 예제

4.3.1 웹 표준화 part

  • (X)HTML/CSS/JASCRIPT 분리
  • 구조화
  • W3C 유효성 검증기 통과 Tip

4.3.2 웹 사용성 part

  • 목차 제공
  • 양식콘트롤
  • fieldset / legend
  • 이용가이드

4.3.3 웹 접근성 part

  • 키보드 이용
  • 독립적 링크 텍스트
  • 의미론적 요소

4.4 효과

5 결론


Daum_웹접근성.pdf

Daum_웹접근성

신고
Posted by ui5bbada

웹 접근성 향상을 통한 장점 및 기대효과

웹접근성 : 어떠한 사용자(장애인,노인 등), 어떤 기술 환경에서도 전문적인 능력 없이도 웹사이트에서 제공하는 모든 정보에 접근하고 이용할 수 있도록 보장하는 것을 말함

웹접근성 향상은 웹표준을 준수하여 웹사용성이 높게하게 위함이 기본이 된다.


  • 웹 기술 품질 보증

    웹표준 준수는 품질인증마크와 같다

    ‘KS’마크 - 정부가 공산품의 치수·성분·재질 등 표준규격을 정해 제품의 품질을 평가, 일정한 수준에 이른 제품에 준다. 공업기술수준이 아주 낮았던 시절에 제정된 마크이므로 최소한의 규격기준 정도로 생각하면 된다.

    품질인증마트 처럼 웹표준 또한 웹에서의 최소한의 규격기준이다.

    웹 접근성 품질마크 인증 및 웹 접근성 보장 등을 법제화 준비중

  • 웹 사용성 증가

    '웹사용성(Web Usability)'은 사용자가 웹사이트를 사용하면서 얻는 경험적 만족도, 그리고 얼마나 웹사이트를 편리하고 정확하게 사용할 수 있는가에 대한 방법론 등을 가리킵니다. 인터넷이라는 복합적인 환경에서 웹사이트는 사용자들의 경험에 영향을 주는 많은 요소를 포함하고 있기 때문에, 웹사용성은 시스템 환경에도 많은 영향을 받게 된다.
    에스컬레이터, 리모콘..
  • 이용자 확대

    장애인/저연령층/고연령층/특정질병/저소득층/학습능력이 낮은사람등 정보 접근에 소외된 계층의 이용자 확대

    건강한 사람들만이 정보통신기술 발전을 편리한 기술로서 인식하고 있는 것은 아니다. 오히려 신체적 장애를 가진 분이나 고령자에게 정보통신기술 혜택은 더욱 절실할 것이다.
  • 소외계층 정보격차 해소로 평등한 기회 제공

    정보접근 취약 계층에 정보제공 기회를 균등하게 보장

  • 생산성 향상

    장애인도 사용할 수 있는 소프트웨어를 개발해 일반인과 동등한 업무처리가 가능하게 함으로써 얻어지는 생산성

  • 사회간접비용 절감

    거동이 불편한 노인이나 장애인도 쉽게 인터넷을 이용해 정보광장에 참여할 수 있는 환경을 제공함으로써 얻을 수 있는 사회간접비용 절감

  • 다양한 플랫폼/다양한 환겅조건 이용확대

    다른 기기에서의 접근 가능성 제고(palm,휴대폰,IE 외 브라우져 사용자)

    저사양 PC, 공공장소(공항, 및 영화관 등 시끄러운곳)

  • 기업이미지 홍보효과

    민간 기업의 경우, 기업의 사회적 책임이 중요하게 부각되고 있는 시점에서 기업의 주요홍보 수단으로 큰 역활을 할 수 있다.

  • 정부정책 부응에 따른 이미지 제고 효과

    한국형 웹 콘텐츠 접근성 지침을 준수 함으로 정부정책에 부응하면서 이미지 제고의 효과가 있다

  • 경량의 로딩속도

    구조와 표현의 분리로 HTML코드 양이 줄어들어 경량의 로딩속도로 빠른 서비스 제공

  • 웹사이트 제작 기간 단축

    디자인/UI개발/개발 작업의 분리로 병행 작업이 가능하여 웹사이트 제작 기간 단축

  • 유지보수 비용 감소

    코드의 재활용성이 높아 유지보수비용 절감되고 재생산성이 확대된다

  • 높은 호환성 및 운영비용 절감

    신기술과 새로운 OS, 브라우저 등의 사용자 환경이 바뀌더라도 호환성 유지가 가능하며 운영비용이 절감

  • 효율적인 정보 검색

    의미에 맞는 HTML 태그 사용으로 HTML이 명확하고 구조적이어서 가독성이 높아 다른 기계나 프로그램도 읽기 수월하여 정보에 대한 검색과 표현에 있어서 이롭다.

신고
Posted by ui5bbada



배가 산으로 간 까닭을 설명한 종혁씨의 사기성 멘트... 압권...


출처: 얼사마님.

신고
Posted by ui5bbada

웹 접근성 향상을 위한 웹 표준화 가이드

2. 접근성 향상 적용 과제

  1. 웹 표준 준수
  2. 구조,표현,행동 분리
  3. 최소한의 디버깅을 거쳐라.
  4. 효율적인 웹 개발 방법론을 가져라.
  5. 의미에 맞는 HTML 태그 사용 (가독성)
  6. 올바른 표(table) 사용
  7. 대체 수단 제공 (이미지,플래시,동영상,음성)
  8. 반복 네비게이션 링크
  9. 키보드로만 서비스 이용 가능
  10. 독립적인 링크 텍스트
  11. 웹 문서에는 독립적인 제목을 붙인다
  12. 양식 컨트롤과 양식 이름표를 명확히 짝짓는다.

2.6 올바른 표(table) 사용

2.6.1 리스트형 표 사용법

HTML 표(table) 모델은 제작자에게 데이터를 줄(low)과 컬럼(column)의 셀(cell)들에, 텍스트, 양식화 된 텍스트, 이미지, 연결, 폼(form), 폼 휠드(field), 다른 표(table), 등으로, 정돈 할 수 있게 한다.

  • 테이블은 레이아웃이 아닌 본래 목적에 맞게 표로만 사용한다.
  • summary,Caption에 표의 목적을 간단하게 기술하는 제목을 갖는다.
  • 제목은 th 에 내용은 td 에 넣는다.
  • 리스트형 표의 th 에는 scope="col" 을 넣는다.

2.6.2 Table layout vs CSS layout

Table layout
장점
FrontPage 나 Dreamwever 같은 위지윅(WISIWYG) 에디터에서 테이블로 개발하기가 매우 쉽다.
단점
표현데이타와 컨텐츠의 혼용 (페이지 크기를 불필요하게 증가)
사이트 재디자인시 많은 작업과 비용을 유발
사이트 전체의 일관성을 유지하는데 매우 힘들고 과도한 비용을 발생시킴
장애인,핸드폰,PDA..등에서 접근성을 떨어뜨린다.
프로그램에서 데이터를 알기 힘들고, pc이외의 기계에서 렌더의 어려움이있다.
내부 Td안의 데이터가 모두 로드 되기 전까지 전체를 표시하지 않아 속도가 느리다
CSS layout
장점
효율적인 마크업
페이지 용량감소
유지보수 편리 비용절감
이해하기 쉬운 구조
메인 컨텐츠를 먼저 보여주고 그래픽을 나중에 로드할 수 있게 한다.
HTML/텍스트 비율을 낮게 유지함으로써 로딩 시간을 감소시킨다.
리퀴드 디자인을 추구함으로써 사용성을 증가시킨다.
포지셔닝에 있어 극단적인 유연성을 가능하게 한다.
단점
어렵고 구현하는데 시간이 많이 소요

2.7 대체 수단 제공 (이미지,플래시,동영상,음성)

Flash

플러그인을 사용하는 경우 대체 콘텐츠를 제공해야 한다.

image

Alt, title, longdesc

iframe

title

frame

title,noframes

동영상

caption 지원

동영상 caption 지원


2.8 반복 네비게이션 링크

숨은 Text 링크를 사용하라

웹 콘텐츠는 반복적인 네비게이션 링크(repetitive navigation link)를 뛰어넘어 페이지의 핵심부분으로 직접 이동할 수 있도록 구성하여야 한다.

카페 탑


2.9 키보드로만 서비스 이용 가능

2.9.1 순서에 맞게 구조화

보통 마크업 구조상으로 보면 아레와 같이 분리되어 있어 텝메뉴 순서상으로도 카페>블로그>플래닛>포커스>랭킹... 순으로 되어 포커스가 카페 depth 안에 포함된 카테고리인지 인식 할 수가 없게 된다..

잘못된 소스

  • 카페
  • 블로그
  • 플래닛
  • 포커스
  • 랭킹
  • 서포터즈
  • 공식커뮤니티

아레와 같이 순서에 맞게 구조화 되면 올바르게 표현할수 있다

잘된 소스

  • 카페
    • 포커스
    • 랭킹
    • 서포터즈
    • 공식커뮤니티
  • 블로그
  • 플래닛
예제) 순서에 맞게 구조화된 문서

순서에 맞게 구조화된 GNB

2.9.2 마우스와 키보드 이벤트 처리기 대응

이벤트 처리기가 장치 독립적인지 확인하십시오. 이 이벤트 처리기는 필수적인 정보나 이 페이지를 사용하는 데 필요합니다. 이벤트 처리기를 "onfocus", "onblur" 및 "onselect"와 같은 장치 독립적인 처리기로 제한할 것을 고려하십시오. 장치 독립적인 특성을 사용해야 하는 경우 키보드 방식을 제공하십시오. 예를 들어, "onmousedown"의 경우 "onkeydown"도 지정하십시오. 마우스 좌표에 의존하는 이벤트 처리기는 장치가 독립적이지 않으므로 사용할 수 없습니다.

마우스와 키보드 이벤트 처리기 대응표
마우스 키보드
onmousedown onkeydown
onmouseup onkeyup
onclick onkeypress
onmouseover onfocus
onmouseout onblur

각각의 메뉴 링크에 onMouseOut, onMouseOver 이벤트만을 사용하여 키보드를 이용한 접근은 제한됩니다.
onFocus, onBlur를 추가하여 작성하면 이론적으로 최소의 키보드 접근이 가능하게 됩니다.
ondblclick, onmousemove 등에 상응하는 키보드 이벤트 처리기는 HTML 4.0 현재 존재하지 않으므로 그러한 이벤트 처리기는 되도록 사용을 피하는 것이 좋습니다.

예제) 키보드로 텝 메뉴 컨텐츠 구현

cssw 제거된 콘텐츠


2.10 독립적인 링크 텍스트

2.10.1 링크 텍스트 자체로서 독립적인 의미를 갖는다.

시각 장애인의 경우, 홈페이지를 순차적으로 읽어 주는 기계를 통해서 탐색하는데, 빠른 탐색을 위해 키보드의 Tab key로 링크에서 다음 링크로 건너 띄는 경우가 많이 있다. 그럴 때에 음성으로 그 링크의 성질을 설명해주는데 ‘여기’라고 나오면 도대체 그 링크가 어디로 연결될 지를 짐작 할 수 없다.
따라서 아래에 같이 링크 텍스트가 독립적으로도 의미를 가질 수 있도록 수정해야 한다.

좋지 않은 예
좋은 예

2.10.2 반복적인 이미지 링크도 구별되는 독립적인 의미를 갖는다.

"더보기", "자세히보기" 등 각 콘텐츠에 반복적으로 열람되는 이미지 링크 사용시 음성으로 링크가 구체적으로 어디로 연결될 지를 짐작 할 수 없다.
따라서 아래에 같이 링크 텍스트가 독립적으로도 의미를 가질 수 있도록 "000 더보기","000 자세히 보기"로 수정해야 한다.

사용자 삽입 이미지

더보기


2.11 웹 문서에는 독립적인 제목을 붙인다

웹문서 제목

일반인들의 사용성 측면, 검색 엔진의 효율성 측면에서 제목은 매우 중요하다. 또, 시각 장애인에게는 제목이 여러 문서를 구분하고, 현재 위치를 파악하고 앞으로 계속 탐색할 것인지 말 것인지 결정하는 가장 중요한 단서가 된다.
따라서 제목은 해당 문서의 내용을 대표할 수 있도록 정확하고 간결하게 작성해야 한다.

head테그안에서 title 선언시 주의사항

utf-8 인코딩 문서에서 head테그 맨 상단에 한글이 포함된 title 오면 IE 일부에서 문서가 하얗게 보여지는 현상이 일어난다.
따라서 head테그 맨 상단에 title선언보다 meta테그 인코딩 먼저와야 한다.

좋지 않은 예
좋은 예

2.12 양식 컨트롤과 양식 이름표

양식 컨트롤과 양식 이름표를 명확히 짝짓는다

좋지 않은 예
좋은 예

참고 출처:
  • 실전 웹 표준 가이드 : 한국소프트웨어진흥원
  • 소수 사용자를 위한 웹 접근성 : lg전자 global elearning group, 신승식
  • 공평한 인터넷 환경 제공을 위한 창의적 UI 발상 프로젝트 : Daum 커뮤니케이션 커뮤니티 UI팀 조제희
  • 웹 접근성 이해 : 한국정보문화 진흥원 접근기술 연구팀 현준호
신고
Posted by ui5bbada
2007.04.09 11:02

온톨로지(Ontology) 스크랩2007.04.09 11:02

온톨로지(Ontology)는 원래 사물의 존재 의미를 논의하는 철학적인 연구 영역을 뜻하는 말입니다. 온톨로지라는 단어 자체부터 실제라는 의미의 그리스어 `onto'와 학문 또는 강연 등의 의미를 갖는 `logia'의 합성어로부터 유래됐습니다.

그러나 최근의 시맨틱 웹, 지식공학, 인공지능, 자연어처리 등 정보기술 분야에서의 온톨로지는 각각의 지식(혹은 단어, 개념)이 전체 지식체계 중에서 어디에 위치하는지를 밝히는 연구 분야를 의미하는데요. 즉, 어떤 단어와 단어 사이의 상관관계를 보다 빠르고 편하게 검색할 수 있도록 돕는 연구 분야를 의미합니다.

미국 스탠포드 대학 인공지능 전문가인 탐 그루버는 인공지능분야에 있어서의 온톨로지는 컴퓨터로 하여금 인간의 지식체계를 갖도록 개념화시키는 작업이라 설명하고 있습니다.

신고
Posted by ui5bbada
 

파이어폭스의 인기가 전세계적으로 높아지고 있습니다만...

한글 및 기타 아시아권 언어입력시 이벤트 헨들러가 호출되지 않고 있는문제는 아직도 고쳐지고 있지 않습니다..

다들 아시죠???

우리가 흔히 쓰는 입력박스에서의 이벤트 헨들링 -(대표적으로 자동완성기능[서제스트])- 을 하고자 할때 한글을 입력하면 이벤트 헨들러가 호출되지 않는 치명적인 문제가 있습니다..

아래의 버그질라 링크를 보시면 한글 입력시 이벤트 헨들러를 호출할 수 있게끔 하는 작은 트릭을 경험해 보실 수 있습니다.

https://bugzilla.mozilla.org/attachment.cgi?id=240567

문제의 요지는 간단합니다... 한글을 입력할시 파이어폭스의 한글입력기는 글자 조합을 하기위해 value세팅과 이벤트 헨들러 호출을 정지 시킵니다.. 정확히 말해 onkeydown이나 onkeyup이벤트발생시 헨들러가 최초 한번은 호출됩니다. 그러나 한글 조합을 위해 value는 세팅되어 있지 않습니다. 이 문제를 피해가기 위해서는..

1. db라는 가상의 변수를 만듭니다.
2. 현재 입력필드의 value 값이 db의 값과 같은지를 비교합니다..
3-1. 다르다면 db값을 현재 value로 세팅하고 원래 하고자 했던 이벤트 헨들링을 합니다.
3-2. 같다면 이벤트 헨들링 코드를 실행하지 않고 넘어갑니다.
4. setTimeout을 이용하여 이벤트 헨들러 자체를 다시 부릅니다. 즉, 재귀적 호출법입니다. (recursive)

간단히 말해 setTimeout을 이용하여 재귀호출을 할시 브라우저 입장에서는 이벤트가 발생하여 헨들러가 호출되는것이 아닌 일반 함수의 실행으로 간주하게 됩니다. 그렇게하면 세팅된 value를 가지고 이벤트 헨들링을 할 수 있습니다.

재귀적 호출을 계속할 경우 CPU점유율 및 시스템이 불안해 지지 않냐.. 라는 의문을 가지는건 당연합니다. 그렇기 때문에 부담이되는 이벤트 헨들링 코드는 db에 현재 value를 세팅할때 (3-1)만 실행합니다.
이미 같다면 이벤트는 헨들링 된것이고 비교외에 아무것도 실행하지 않았기 때문에 커다란 부담이 되지 않습니다. 만약 그래도 불안하다면 특정동작시 setTimeout 했던것을 clear 하는 코드를 추가해주시면 훨신 안정적으로 돌릴 수 있습니다.. cpu점유율 및 다방면 테스트 결과 트릭을 쓰지 않았을 경우와 큰 차이가 없었습니다.


출처: http://taeks.tistory.com/entry/FireFox에서의-한글관련-이벤트-처리-트릭-트릭

신고
Posted by ui5bbada
2007.03.28 17:51

Browser check script 행동 : Javascript2007.03.28 17:51

var Browser = new Object();  
  Browser.isIE = (navigator.userAgent.toLowerCase().indexOf("msie")!=-1);
  Browser.isIE_SV1 = (navigator.userAgent.toLowerCase().indexOf("sv1")!=-1);
  Browser.isIE_SV2 = (navigator.userAgent.toLowerCase().indexOf("sv2")!=-1);
  Browser.isIE_7 = (navigator.userAgent.toLowerCase().indexOf("msie 7")!=-1);
  Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox")!=-1);
  Browser.isSafari = (navigator.userAgent.toLowerCase().indexOf("safari")!=-1);
  Browser.isOpera = (navigator.userAgent.toLowerCase().indexOf("opera")!=-1);
  Browser.isNetscape = (navigator.userAgent.toLowerCase().indexOf("netscape")!=-1);
  Browser.isEtc = (navigator.userAgent.toLowerCase().indexOf("gecko")!=-1 && navigator.userAgent.toLowerCase().indexOf("firefox")==-1 && navigator.userAgent.toLowerCase().indexOf("netscape")==-1 );
신고
Posted by ui5bbada
2007.03.28 17:49

이미지 resize script 행동 : Javascript2007.03.28 17:49

function checkImages() {
 var imgs = document.getElementById("thisContents").getElementsByTagName("IMG");
 for (var i=0; i  if (imgs[i].width >= 820) {
   imgs[i].width="820";
  }
 }
}
신고
Posted by ui5bbada

XHTML 1.0 Strict에서 사용할 수 없는 태그, 속성 입니다.

Strict 작업시에 참고하세요.


HTML Tag 잘못된 속성 대체 css
<body background="#ffffff" background-color:#ffffff
text  color:#333333;
link a:link 
vlink="#0000ff" a:visited 
<div align="left, right,center" text-align:left, right, center;
<table background="#ffffff" background-color:#ffffff
align="left, right,center" 사용 불가 
valign="top, middle" 사용 불가 
height="" 사용 불가 
<tr, td, th background="#ffffff" background-color:#ffffff
width="" height="" 사용 불가 
nowrap white-space:nowrap
<col , cogroup align="left, right,center"  
<img align="left, right,center" 사용 불가 
border="0" border:0px;
vspace="0" hspace="0" margin:0px;padding:0px;
name="" id=""
<object align="left, right,center" 사용 불가 
border="0" border:0px;
vspace="" hspace="" margin:0px;padding:0px;
<embed align="left, right,center" 사용 불가 
<p align="left, right,center" text-align:left, right, center;
<pre width="800" width :800px
<br clear="all" clear:both
<a target="_blank" 사용 불가 
<h1, ~ h6 align="left, right,center" text-align:left, right, center;
<dl, ol, ul compact line-height:1.6em;
start 사용 불가 
type  list-style:none
<li value 사용 불가 
<hr align="left, right,center" 사용 불가 
noshade 사용 불가 
size="1" margin-left:0px; margin-right:0px;
width="800" width :800px
<input align="left, right,center" 사용 불가 
<script language type/MIME type
<html version 사용 불가 
<caption align="left, right,center" 사용 불가 
<legend align="left, right,center" 사용 불가 
 


HTML4.0  비추천 Tag 변경
<applet!> object
<BASE> 기본url  
<BASEFONT SIZE="5"> body { font-size:12px;}
<center></center> text-align:center;
<dir> 디렉토리 목록 <ol> <ul>
<font ></font> font-size:12px;font-family:굴림
<iframe></iframe> 사용 불가 
<ISINDEX>
검색할 수 있는 색인
<input>
menu 메뉴목록 <ol> <ul>
<s> ,<strike> 취소선 텍스트 text-decoration:strike-through 
<u> 밑줄 친 글씨 text-decoration:underline 



출처: http://blog.daum.net/uidev/11369323
신고
Posted by ui5bbada
2007.03.27 18:42

Daum UI센터 UI개발팀 소개 동영상 Daum人2007.03.27 18:42

신고
Posted by ui5bbada


티스토리 툴바