웹접근성 디자인

웹표준/접근성 2012. 6. 20. 13:31

디자인

■ 디자인에 앞서 반드시 숙지해야 할 사항

1 . 색상으로 표현된 정보는 색상을 배제하여도 원하는 내용을 전달할 수 있어야 한다.

2 . 전경색과 배경색은 충분한 대비를 가지고 있어야 한다.

3 . 텍스트는 쉽게 읽을 수 있도록 충분한 크기로 제공되어야 한다. KADO의 품질마크 인증 기준에 의하면 판독하기 쉬운 텍스트의

충분한 최소 크기는 12px로 정의하고 있음.

4 . 이용에 시간제한이 있는 콘텐츠의 경우 경고 및 시간조절 기능을 제공하여야 한다.

5 . 팝업창을 불필요하게 사용하지 않아야 한다.

6 . 각 링크의 목표 위치를 명확하게 하여야 한다.

■ 색상으로 표현된 정보는 색상을 배제하여도 원하는 내용을 전달 할 수 있어야 함.

도형의 모양을 달리 하여 색 뿐만 아니라 도형의 모양으로 구분이 가능하게 함.

■ 텍스트는 쉽게 읽을 수 있도록 충분한 크기로 제공되어야 함.

KADO의 품질마크 인증 기준에 의하면 판독하기 쉬운 텍스트의 충분한 크기는 12px로 정의하고 있음.

위 그림은 텍스트 크기가 11px이므로 12px로 조정이 필요함.

■ 명도 대비는 최소 4.54:1을 유지해야 함.

배경색이 #ffffff 일 때 글자색은 최소 #767676보다 어두워야 4.54:1의 명도대비가 나옴.

■ Flash에서 텍스트가 포함된 버튼 심불과 무비클립 심볼에는 Accessibility Panel을 이용

하여 설명력 있는 대체 텍스트를 제공해야 함.

버튼 심볼이 존재하는 경우 탭의 이동순서를 고려하여 Tab index를 지정하도록 함. 로그인을 위한 인풋상자에는 ‘L’을 접긴키로 지정함.

■ Cross Browsing

웹 접근성에는 웹 브라우저에 상관없이 웹 콘텐츠를 이용할 수 있어야 한다는 요건이 있다. 즉, 다른 웹 브라우저로 웹 콘텐츠를 이용할 수 있느냐에 따라 웹 접근성 준수 여부를 판단한다. 이용할 수만 있다면 웹 브라우저 특성으로 인한 작은 차이는 문제가 없다. 접근성 인증을 위해 완벽한 Cross Browsing을 구현해야 하는 것은 아니기 때문에 기본 요건에 충실해 최대한 모든 웹 브라우저에서 콘텐츠를 이용할 수 있게 구현하면 된다.

국립국어원의 음성지원, 화면크기 확대/축소 등의 기능은 비록 시각장애인과 저시력자를 위한 기능이긴 하지만 익스플로러에서만 사용가능하므로 접근성에 어긋난다.

※ 아래의 대표적인 8개 웹 브라우저는 반드시 체크할 수 있도록 한다.

▷ 인터넷 익스플로러 6,7,8 / 파이어폭스 2,3 / 오페라 / 크롬 / 사파리

[출처] 웹디자인에 있어서 고려하고 숙지해야할 웹접근성에 대한 간략한 내용입니다.|작성자 즐거운일과 사람들

'웹표준/접근성' 카테고리의 다른 글

레이블과 타이틀, 새창 (0)	2015.08.21
접근성 툴 (0)	2015.07.07
접근성 모음 (0)	2012.10.09
디자인 명도대비 체크 (0)	2012.06.20
시각장애인 스크린리더 테스트 (0)	2011.06.15

:

디자인 명도대비 체크

웹표준/접근성 2012. 6. 20. 13:29

http://www.colorsontheweb.com/colorcontrast.asp

#333 정도가 #FFF와 딱 명도대비 4.5대1

명도 대비는 최소 4.54:1을 유지해야 함.

배경색이 #ffffff 일 때 글자색은 최소 #767676보다 어두워야 4.54:1의 명도대비가 나옴

[출처] 웹디자인에 있어서 고려하고 숙지해야할 웹접근성에 대한 간략한 내용입니다.|작성자 즐거운일과 사람들

'웹표준/접근성' 카테고리의 다른 글

레이블과 타이틀, 새창 (0)	2015.08.21
접근성 툴 (0)	2015.07.07
접근성 모음 (0)	2012.10.09
웹접근성 디자인 (0)	2012.06.20
시각장애인 스크린리더 테스트 (0)	2011.06.15

:

정렬알고리즘

script 2012. 6. 13. 17:10

for (var i=0;i<sort.length ;i++){
document.write(sort[i] + " ");
}
document.write("<br />")
</script>

'script' 카테고리의 다른 글

[Javascript　] IMG onerror 처리 (0)	2011.06.23
Method (0)	2011.04.20
배열 (0)	2011.04.19
(예제 2) switch (0)	2011.04.18
예제1 (0)	2011.04.18

:

하단 풋터고정

CSS 2012. 6. 7. 13:13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>NEW</title>
<style type="text/css">
* {

margin: 0;

}

html,body {
height:100%;

}
.wrapper {
min-height:100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer {

height: 4em;

background:red;

}
</style>

</head>

<body>

<div class="wrapper">
<p>Your website content here.</p>
</div>
<div class="footer">
<p>Copyright (c) 2011</p>
</div>
</body>
</html>

[출처] 하단 풋터고정하기|작성자 이슬

'CSS' 카테고리의 다른 글

One-Time Expression 한번만 실행시키자. (0)	2012.07.27
대체 텍스트기법 (0)	2012.06.27
스크립트 에디터 (0)	2012.05.23
CSS3로 만든 아이폰 (0)	2012.03.20
max-width:100% (0)	2012.01.03

:

스크립트 에디터

CSS 2012. 5. 23. 17:51

스크립트형 에디터를 넣을때 기존 css 와 에디터 css 가 충돌해서 view 화면에서 line-height가 어그러지는 경우가 있다.

보통 line-height에 단위값을 넣어주게 되는데 em, %등의 단위를 넣지 않은 기본 숫자는 글자의 배수로 표현되게 된다.

따라서 에디터에서의 충돌을 방지하기 위해서는 line-height 를 넣을때 기본 숫자로 common 파일을 셋팅하면 될듯하다.

1.2, 1.5, 1.8 을 제일 많이 쓴듯.

'CSS' 카테고리의 다른 글

대체 텍스트기법 (0)	2012.06.27
하단 풋터고정 (0)	2012.06.07
CSS3로 만든 아이폰 (0)	2012.03.20
max-width:100% (0)	2012.01.03
ie전용 핵 (0)	2011.12.23

:

반응형 웹디자인 참고

HTML 2012. 5. 23. 17:43

http://www.ttearth.com/

http://pr.hyundai.com/#/pages/main.aspx 크.....

http://www.hanb.co.kr/demo/1910/ex10/

책 참고

만들면서 배우는 HTML5 CSS3 jQuery 만들면 쉽다 만들면 재밌다 만들면 놀랍다

'HTML' 카테고리의 다른 글

on/off 버튼 (0)	2016.06.02
브라우저 창 늘림/줄임시 이미지/width값 밀림 현상 (1)	2011.09.30
dl, dt, dd 요소 (0)	2011.07.08
비디오 (0)	2011.05.12
펌] 폼(Form) 디자인 잘했다는 소리를 듣기 위한 방법론 (0)	2011.03.09

:

[퍼옴] 로딩바 사이트

diary 2012. 3. 21. 09:40

출처: http://rcnboys.blog.me/20132798254

1. http://www.ajaxload.info/

2. http://preloaders.net/

3. http://www.loadinfo.net/

4. http://www.webscriptlab.com/

5. http://developer.yahoo.com/yui/examples/container/panel-loading.html

6. http://mentalized.net/activity-indicators/

7. http://www.sanbaldo.com/wordpress/1/ajax_gif/

8. http://netlife.com.au/2007/02/22/more-ajax-spinners-aka-ajax-activity-indicators-ajax-loaders/

'diary' 카테고리의 다른 글

요즘 한계를 점점 넓히는 느낌이랄까... (0)	2011.05.18
이미지 낙관 만들어 주는 곳 (0)	2011.05.18
[퍼옴] 차세대 웹브라우저 전쟁 (0)	2011.04.18
css 코딩 정석?? (0)	2011.04.07
무료 다운로드 사이트 (0)	2011.03.25

:

CSS3로 만든 아이폰

CSS 2012. 3. 20. 10:03

출처: http://www.hongkiat.com/blog/coding-graphics-with-css3/

아이폰.html

CSS를 이렇게까지 활용할 수 있구나...대단하단 생각뿐이 안든다...

일단 시계부터 뜯어보았다. 어떻게 만들었을까...~

마크업은 이렇게 되어있다.

이번엔 css

ul { z-index: 2; position: relative; width: 76px; height: 76px; background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#e6e6e6), color-stop(1, #fff)); margin: 0 auto; list-style: none; -webkit-border-radius: 38px; -webkit-box-shadow: 0 -1px 0 rgba(0,0,0, 0.5), 0 1px 0 rgba(255,255,255, 1.0); }
ul li { text-shadow: 0 -1px 0 rgba(255,255,255, 0.5); }
li.hour, li.minute, li.second { width: 76px; height: 76px; position: absolute; }

li.hour span { margin: 35px 0 0 38px; border-style: solid; border-width: 3px 0 3px 16px; border-color: transparent #050506; }

#newyork   li.hour { -webkit-transform: rotate(-66deg); }

li.minute          { -webkit-transform: rotate(160deg); }
li.minute span { display: none; margin: 36px 0 0 38px; border-style: solid; border-width: 2px 0 2px 24px; border-color: transparent #050506; }
li.second span { margin: 37px 0 0 38px; width: 28px; height: 1px; background: #d20f11; }
li.pin { position: absolute; top: 34px; left: 34px; width: 4px; height: 4px; background: #d20f11; -webkit-border-radius: 4px; border: 2px solid #050506; }
li.one    { top: 8px; right: 20px; position: absolute; }
li.two    { top: 19px; right: 11px; position: absolute; }
li.three  { top: 33px; right: 5px; position: absolute; }
li.four   { bottom: 17px; right: 9px; position: absolute; }    
li.five   { bottom: 7px; right: 20px; position: absolute; }
li.six    { bottom: 3px; left: 35px; position: absolute; }
li.seven  { bottom: 7px; left: 20px; position: absolute; }
li.eight  { bottom: 17px; left: 10px; position: absolute; } 
li.nine   { top: 33px; left: 6px; position: absolute; }
li.ten    { top: 19px; left: 7px; position: absolute; }
li.eleven { top: 8px; left: 17px; position: absolute; }
li.twelve { top: 5px; left: 32px; position: absolute; }
li.glare { width: 76px; height: 76px; -webkit-border-radius: 38px; background: -webkit-gradient(radial, 50% 135%, 30, 50% 135%, 150, from(rgba(255,255,255, 0)), to(rgba(255,255,255, 0.7)), color-stop(50%, rgba(255,255,255, 0)), color-stop(50%, rgba(255,255,255, 0.3))); }

li.hour span, li.minute span, li.second span { display: block; }

여기서 재미있는것은 바늘모양을 만든 css! span을 블럭 시켜서 border-width값을 지정해주었다. border-width의 새로운 발견.....나머진 포지션 떡칠...노가다의 결정판.

'CSS' 카테고리의 다른 글

하단 풋터고정 (0)	2012.06.07
스크립트 에디터 (0)	2012.05.23
max-width:100% (0)	2012.01.03
ie전용 핵 (0)	2011.12.23
word-wrap (0)	2011.07.01

:

웹 접근성을 고려한 콘텐츠 제작 기법

standard guide 2012. 3. 13. 17:52

웹 접근성이란 어떠한 사용자(장애인, 고령자 포함), 어떠한 기술 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 비장애인과 동등하게 접근·이용할 수 있도록 보장해 주는 것이라 정의할 수 있다.

월드 와이드 웹 컨소시엄(W3C: World Wide Web Consortium)의 웹 접근성 이니셔티브(WAI: Web Accessibility Initiatives)에서는 웹 접근성을“장애인도 웹을 인식하고, 이해하며, 내비게이션하고, 상호작용할 수 있으며, 그들이 웹에 기여할 수 있는 것을 의미한다. 웹 접근성은 또한 나이가 들어감에 따라 능력이 변화하는 고령자를 포함한 다른 사람들도 혜택이 있다.”
(http://www.w3.org/WAI/intro/accessibility.php) 라고 정의하고 있다. WAI에서는 접근성의 4가지 핵심 원리로 인식의 용이성(perceivable), 운용의 용이성(operable), 이해의 용이성(understandable), 그리고 견고성(robust)을 제시하고 있으며, 장애인뿐만 아니라 고령자, 비장애인도 접근성의 대상이 됨을 함축하고 있다.

웹 접근성을 고려한 콘텐츠 제작 기법 v2.0(111.pdf

'standard guide' 카테고리의 다른 글

접근성 참고 (0)	2012.07.02
실전 웹표준 가이드 (0)	2010.04.06
웹표준을 시작하면서.. (0)	2010.04.01

:

폼 요소 선택자

jQuery 2012. 3. 13. 10:52

+= 왼쪽의 값에서 오른쪽을 더해서 왼쪽에 대입
-= 왼쪽의 값에서 오른쪽을 뺴서 왼쪽에 대입
*= 양쪽을 곱해서 왼쪽에 대입

:input
:text
:password
:radio
:checkbox
:submit
:image
:button
:file
:enabled
:disabled
:checked
:selected

1. 폼 요소 찾기/ 타입과 속성 알아보기

$(document).ready(function(){
  var result ="";
  //폼 요소가 있는 만큼 반복하자.
  //alert($(":input").size());
  $(":input").each(function(index){
   result += "태그명 : " + $(this).get(0).tagName //this.tabName
   + ", type 속셩명 : " + $(this).attr("type") + "\n";
  })
  alert(result);
});

<input type="text" name="" /><br />
<input type="radio" name="" /><br />
<input type="password" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="image" name="" /><br />
<input type="reset" name="" /><br />
<input type="submit" name="" /><br />
<button>버튼</button>

2. 폼 속성값 복사 (배송지 정보를 복사할때등..)

.silver {background:#ccc;}

$(document).ready(function(){
  //모든 텍스트박스의 배경을 silver로 설정
  $(":text").addClass("silver");
  //첫번째 텍스트박스의 값을 두번째 텍스트박스로 복사
  $("#btnCopy").click(function(){
   $("#txtID").val($("#txtUserID").val());
  });
});

아이디 : <input type="text" name="" id="txtUserID" /><br />

'jQuery' 카테고리의 다른 글

웹접근성에 맞는 탭메뉴 (0)	2012.07.02
jQuery IE 버전에 Placeholder 적용하기 (0)	2012.06.26
각종 예제 사이트 (0)	2011.07.11
JQuery mobile (0)	2011.07.07
배경색(투명) 깔고 위에 레이어 팝업 띄우기 (0)	2011.06.27

:

좌충우돌 웹퍼블리셔 일기

'분류 전체보기'에 해당되는 글 151건

웹접근성 디자인

'웹표준/접근성' 카테고리의 다른 글

디자인 명도대비 체크

'웹표준/접근성' 카테고리의 다른 글

정렬알고리즘

'script' 카테고리의 다른 글

하단 풋터고정

'CSS' 카테고리의 다른 글

스크립트 에디터

'CSS' 카테고리의 다른 글

반응형 웹디자인 참고

만들면서 배우는 HTML5 CSS3 jQuery 만들면 쉽다 만들면 재밌다 만들면 놀랍다

'HTML' 카테고리의 다른 글

[퍼옴] 로딩바 사이트

'diary' 카테고리의 다른 글

CSS3로 만든 아이폰

'CSS' 카테고리의 다른 글

웹 접근성을 고려한 콘텐츠 제작 기법

'standard guide' 카테고리의 다른 글

폼 요소 선택자

'jQuery' 카테고리의 다른 글

티스토리툴바