티스토리 툴바

front-end 개발자로 살아가기...

http://www.apple.com/kr/iphone/features/

위 사이트처럼 페이지를 보다가 스크롤을 이동하면

어느 위치에 왔을때 모션이 동작하는 사이트들이 꽤 있다.

jquery를 이용해서 원하는 위치에 왔을때 클래스를 제어 하는 방식으로 만들어 봤다.

스크롤을 내리다가 해당컬러 박스 위치정도 오면 검은박스가 이동을 한다.

.sMove{padding: 500px 0;}
.c1{height:600px;background:#f9c4c4;}
.c2{height:600px;background:#c6c4f9;}
.c3{height:600px;background:#c4f9d8;}
.c4{height:600px;background:#f9f2c4;}

.box{width:100px;height:100px;background:#000;position: absolute;-webkit-transition:left 1s ease-out;margin-top:200px;}
.box.on{left:600px;-webkit-transition:left 1s ease-out;}
$(document).ready(function(){

	setTimeout(sMove, 500); 

	function sMove(){
		$(window).scroll(function(){
			
			if($(window).scrollTop() >= $('.c1').offset().top - 200){
				$('.c1 .box').addClass('on');
			}else{
				$('.c1 .box').removeClass('on');
			}
			if($(window).scrollTop() >= $('.c2').offset().top - 200){
				$('.c2 .box').addClass('on');
			}else{
				$('.c2 .box').removeClass('on');
			}
			if($(window).scrollTop() >= $('.c3').offset().top - 200){
				$('.c3 .box').addClass('on');
			}else{
				$('.c3 .box').removeClass('on');
			}
			if($(window).scrollTop() >= $('.c4').offset().top - 500){
				$('.c4 .box').addClass('on');
			}else{
				$('.c4 .box').removeClass('on');
			}
		});
	}
});
demo 보기


배너를 3초마다 롤링시킴. 시간은 js에서 변경 가능. 배너가 추가되도 해당 갯수만큼 바뀜.
var banNow = banOld = 0, banTime, total;

(function($){
	$(document).ready(function(){
		$('.v3Banner li:first').css({
			"left" : "0",
			"opacity" : "1"
		});
		banTime = setInterval("rollingBan()", 3000);

		$('.v3Banner li').hover(
			function() {
				if(banTime) {
					clearInterval(banTime);
				}
			},
			function() {
				if(banTime) {
					clearInterval(banTime);
				}

			banTime = setInterval("rollingBan()", 3000);
			}
		);
	})
})(window.jQuery);

function rollingBan()
{
	total = $('.v3Banner li').length;
	banNow = (banOld + 1) % total;

	$('.v3Banner li:eq(' + banOld + ')').animate({
		left: "-300px",
		opacity: 0
	}, 800 );
	$('.v3Banner li:eq(' + banNow + ')').animate({
		left: "0",
		opacity: 1
	}, 800 );

	banOld = banNow;
}
demo 보기



요즘 접근성 관련 업무들이 많아지면서


탭메뉴가 있는 컨텐츠의 마크업도 많이 달라지고 있다.


예전에는 탭과 컨텐츠 영역을 분리해서 작업을 많이 했지만


그렇게 되면 탭키로만 이용을 할때 논리적 흐름에 맞지 않아서 접근성 평가때 지적이 나오곤 한다.




위 이미지 처럼 메뉴와 컨텐츠를 한세트로 마크업 해야 하고


마우스 클릭이 아닌 탭키로도 탭을 변경이 가능 해야 한다


demo 보기


 

 

이쪽 분야는 매년 트랜드가 바뀐다.

한때는 웹표준과 web2.0 이 트랜드였고

작년에는 모바일과 반응형웹이 트랜드였고

올해는 장애인 차별법에 따른 웹접근성이 트랜드인 듯 하다.

어떻게 보면 당연했던건데 법으로 강하게 나오니 규모가 큰 사이트는 이제서야

부랴부랴 대응하고 있는 상황이고

KT에서도 올레닷컴을 웹접근성 인증마크를 따려고 엄청 노력중이다 계열사랑 협력사들 불러서 매번 교육도 실시하고 있다.

KTH에서 운영하는 올레존쪽도 수십페이지에 달하는 가이드를 맨날 보면서 개선하려고 노력중인 상황이다.

대략 아는 부분들만 조금 정리해서 올려봐야겠다.

 

 

테이블 관련

  • 데이터 테이블: caption(표의제목), summary(내용요약), th 필수
  • 레이아웃 테이블은 caption, summary 넣지말것.
  • caption은 display:none을 사용해도 됨.
  • summary로 요약할 내용이 생각 안나면 th 내용만 나열하면 됨.(예:번호,제목,날짜가 있는 테이블입니다.)

 

대체텍스트

 

  • 의미있는 이미지는 대체 텍스트 필수 의미 없는 경우는 그냥 alt="" 으로 처리.
  • 이미지내에 보이는 텍스트들은 최대한 전부 alt에 넣어줌.
  • 이미지맵 img, area모두 대체텍스트 제공.
  • alt와 title은 같지 않음. alt는 대체 텍스트 title은 부가설명.
  • 내용이 많은 이미지는 IR기법, Longdesc사용, alt 사용해도 됨.
  • longdesc 는 txt파일이던 html이던 상관없음. 가급적 절대경로 사용.
  • IR기법 사용시 display:none은 절대 사용하지 말 것.

 

레이블

 

  • 레이블 사용시 id값과 for값이 일치 해야 함
  • id, for값 대신 필드에 title 값으로 설명을 넣는 방식도 괜찮음
  • input태그를 구체적으로 설명하는 title을 제공해야 함.
  • select box는 목적에 맞게 타이틀을 제공
  • input의 disable은 스크린 리더도 잘 인식함.
  • 클릭용도로 label 을 사용할때는 id,for를 사용하지 않고 radio나 checkbox에 title로 설명을 넣어주면 됨.

 

키보드 접근

 

  • 약관같은 스크롤영역 (div영역에 tabindex="0" 제공, div 대신에 textarea 제공)
  • img에 onclick 사용하면 안됨.
  • 레이어 닫혔을땐 원래 자리로 포커스를 돌려주는 함수를 넣어줌.
  • 같은 링크면 블럭으로 묶어서 링크제공(불필요한 탭이동을 방지)

 

페이지

 

  • frame title 꼭 필요.(빈프레임, 개발용프레임도 title이 필요함.)
  • 팝업 타이틀 제공
  • 사용자가 요구하지 않은 기능실행하면 안됨.
  • 자동팝업은 가급적 사용하지 않는게 맞음.
  • 사용자 의도에 의해서 띄워지는 팝업은 괜찮음.
  • 새창열림이면 반드시 새창열림이라고 title로 제공
  • target="_blank" 속성이 있으면 스크린리더에서 알아서 새창열림을 알려주기 때문에 title에 새창열림을 따로 표기할 필요가 없음. 
  • 포커스 자동 이동시 쉬프트탭으로 돌아가서도 수정이 가능해야 함.
  • 셀렉트 박스에서 선택만으로 페이지가 이동하면 안됨. 선택 후 별도 버튼을 눌렀을시에 이동하도록(onchange 이벤트 조심)

 

'포트폴리오 > PC Web' 카테고리의 다른 글

올레 혜택존 웹접근성 작업  (0) 2013/03/21
114전국전화 소개페이지  (0) 2013/03/07
티비토커스 PC버전  (0) 2013/03/07
올레맵  (0) 2013/03/07
Snapstyle 소개 사이트  (0) 2013/03/07
파란 초기화면 개편  (0) 2013/03/07
자동차를 클릭해서 컨트롤할 대상으르 지정한 뒤
상단 화살표를 이용해서 margin값 변경으로 자동차 위치를 이동시킴.
Vroum
yellow car

top bottom left right
(function($){
	
	var $control,$redCar, $yeCar, disX, disY, $target, changeTarget;
	
	$control = $('#control');
	$redCar = $('.red');
	$yeCar = $('.yellow');
	disX=disY=100;

	changeTarget = function(){
		$target = $(this);
	}

	$redCar.on('click', changeTarget);
	$yeCar.on('click', changeTarget);
	$redCar.trigger('click');

	$control.on('click','img',function(){
		switch(this.alt) {
			case 'top':
				$target.css('margin-top','-='+disY+'px');
			break;
			case 'left':
				$target.css('margin-left','-='+disX+'px');
			break;
			case 'right':
				$target.css('margin-left','+='+disX+'px');
			break;
			case 'bottom':
				$target.css('margin-top','+='+disY+'px');
			break;
		}
	});

})(window.jQuery);
demo 보기