참고 사이트

http://nuli.navercorp.com/sharing/blog/post/1132726

1. 레이어 띄우면서 레이어에 tabindex=0 주고 focus 시키고 removeAttr tabindex
처음 포커스는 레이어가 뜨는 순간 레이어의 내용을 읽어주게끔 위해.

Remove하는 이유는 다시 tab 탐색시 포커스가 되지 않게 하기위해.. Div는 원래 포커스 안가니까...

2. 레이어 내부에서 tab(shift+tab 포함) 루프.. Alert/confirm/새창 모두 tab은 루프됨. 기본 Script alert. Confirm. 새창팝업과 ux/ui 유지..

$(document).on('keydown', '.pop_container .ui_btn_close', function (e) {
		var isShift = window.event.shiftKey ? true : false;

		if(isShift && (e.keyCode == 9)){
			return;
		}else if(event.keyCode == 9){
			$('.pop_container').focus();
			return false;
		} //end if
	});

3. 닫기버튼 누를경우 opener로 재포커스.2번과동일 사유.

4. 레이어 내에서 esc누를경우. 닫기버튼 누른것과 동일 기능. 기본 alert. Confirm이 esc누르면 닫히기 때문..

5. 레이어 상단/하단에 ???레이어시작/???레이어끝.. 이런식으로 숨김텍스트로 넣어서 스크린리더기 사용자가 가상 뷰 포인터로 레이어 영역을 빠져나가려 할때 알수 있게 해줌..

6. 레이어가 떴을때.. 레이어 바깥부분을 클릭하면 레이어가 닫히게 처리(alert. Confirm 창이 창을 닫지 않으면 바닥 컨트롤이 안되는 ux 유지..& 중복으로 레이어가 뜰수 있는 혼란한 상황방지..) 이건 일반 비장애 사용자를 위한 기능이죠.. 영국 abilitynet 권고로 작업.

7. 레이어 opener에 title 새창 추가

이정도 해서.... W3c wcag2.0 기준 AA

HTML

<div class="btntype">
	<a href="#" class="area" onclick="return false;">취소</a>
	<var class="bar"></var>
	<a href="#" class="area" onclick="return false;">확인</a>
</div>

CSS

.btntype {display: table;}
.btntype .area {display: table-cell; width:50%;}
.btntype .bar {display:block; width:4px;}

HTML

<div class="pdOpt">
	<span class="item">
		<span class="label"><span>브라운 라쿤 트리밍 퀄티드 롱</span></span>
		<span class="color"></span>
		<span class="size">FREE</span>
	</span>
	<span class="item">
		<span class="label"><span>상의</span></span>
		<span class="color"></span>
		<span class="size">45F</span>
	</span>
</div>

CSS

.pdOpt {display:table; width:auto; margin-top:8px;}
.pdOpt .item {display:table-row;}
.pdOpt .item > span {display: table-cell;}