드롭 다운 메뉴 키보드 접근 시에도 드롭 다운 되도록 제공

해당 요소에 초점이 가면 메뉴가 열리고 메뉴 마지막요소에 초점이 가거나 닫기 버튼에 Enter 누를 때 메뉴가 닫히도록 적용.

				
$('.btn-menu-close').on('click', function (e){ //버튼으로 영역 닫기
	e.preventDefault();
	closeMenu();
});	
$headerWrap.on('mouseleave', function(){ //해당영역에서 마우스리브할 때 영역 닫기
	closeMenu();
}); 
$(window).resize(function () { //리사이즈시 닫기
	closeMenu();
});
if(depth3Show == true) { //3depth메뉴 노출 여부
	$gnbBox.find('>li').last().find($gnbDepth03).find('> li').last().on('focusout', function(){//키보드로 마지막 리스트에 포커스가 갈경우 영역 닫기
		closeMenu();
	});
} else {
	$gnbBox.find('>li').last().find($gnbDepth02).find('> li').last().on('focusout', function(){//키보드로 마지막 리스트에 포커스가 갈경우 영역 닫기
		closeMenu();
	});
}
function closeMenu() {
	$gnbBox.find('> li').removeClass('active');
	$('body').removeClass('gnb-open');
}
				
			

자동 롤링 콘텐츠 마우스 오버 시 전체 콘텐츠 노출 : 키보드 접근 시에도 전체 콘텐츠가 노출되도록 제공한다.

마우스 오버 시 레이어 노출되는 툴팁 레이어팝업일 경우 키보드 접근 시에도 동작 가능 해야 함, 클릭 시 레이어 노출되는 툴팁 레이어팝업일 경우에는 키보드 엔터로 동작

이미지 또는 초점을 받을 수 없는 요소에 마우스 이벤트 적용 : 키보드로도 운용 가능하도록 해당 요소에 css cursor:pointer;적용, click, focus이벤트를 적용하거나 초점을 받을 수 있는 요소(a, button)로 제공한다. a링크 요소에는 href가 항상 적용되어 있어야 함

일반 컨텐츠 내 dt에 click이벤트를 적용하여 키보드로 동작하지 않았기에 dt의 span안에 a태그를 동적으로 생성하여 접근성 적용

				
//-----------------------------------------------------------------------------------------
//QnA
//-----------------------------------------------------------------------------------------  
App.Qna = function(){
	var self;
	return {
		init: function(){
			self = this;
			/* 접근성 focus 적용에 따른 a태그 추가 */
			$('.qna-wrap .qna-box dt span').each(function(){
				var innerTxt = $(this).text()
				if($(this).parents('.qna-wrap .qna-box').hasClass('on')){
					$(this).html('' + innerTxt +"");
				}else{
					$(this).html('' + innerTxt +"");
				}
			});
			$('.qna-box dt').on('click', function() {
				$(this).parent().toggleClass('on');
				$(this).next().slideToggle();

				if($(this).parent('.qna-box').hasClass('on')){
					$(this).find('a').attr('title', '답변 닫기');
				}else{
					$(this).find('a').attr('title', '답변 열기');
				}
			})

			$('.qna-box:eq(0) dt').trigger('click');

		}
	}
}();				
				
			

마우스오버나 클릭해야 보이는 텍스트는 스크린리더에서 읽히지 않음

					

	

		
	
	

		facebook
		


			
영남대, 고령화 대사질환 예방·치료 국가사업 이끈다! 과기부·한국연구재단 선도연구센터지원사...
				

	               2022.06.24
			
		
	
					
					
				

해결방안 2 : 텍스트가 마우스 오버하지 않아도 보이도록 노출

지도에 포커스 되면 [지도 건너뛰기]가 먼저 나오도록 스크립트를 적용

				

	지도 건너뛰기
	

		지도 삽입
	
			

				
			

초점은 논리적 순서로 이동하도록 제공한다. (좌에서 우, 상에서 하)

swiper 플러그인 사용시, loop: true 사용 제한

loop: true로 설정시 swiper-slide-duplicate가 첫번재 슬라이드 이전에 생성되어 키보드로 이동시 불필요한 키보드 접근이 발생한다.

레이어 팝업 노출 시 레이어 내부로 초점이 이동한 후 닫는 경우에는 다시 레이어를 노출시킨 컨트롤로 초점이 이동하도록 제공한다. 닫기 버튼으로 닫는 경우에는 닫기 버튼을 클릭하지 않을 시에 레이어팝업의 첫번째 요소에 초점이 가도록 적용필요

				
//------------------------------------------------------
//레이어팝업 
//------------------------------------------------------  
App.layerPopup = function () {
	var self
	var settings // 초기값 세팅
	var $selector;
	var popupWrap, openBtn, closeBtn, toolTip, activeClass, scrollFix, scrollContent, speed;
	var openPopup, popupAccess, closePopup;
	return {
	// 레이어 팝업 웹 접근성 준수 (포커스 이동)
	popupAccess: function (selector, returnElement) {
		var popupChildEl = $(selector).children('div')

		$(selector).before('
');
		$(selector).find(':last').addClass('last').attr({
			'tabIndex': 0
		});
		$(selector).append('');
		$(selector).attr({
			'tabIndex': 0
		}).focus();

		/* 포커스 이동 */
		$(selector).find('a.return').on('focus', function () {
			$(selector).focus();
		});
		$('.popup-layer-mask').on('focus', function () {
			$(selector).find('.last').focus();
		});

		/* 닫기 */
		$(selector).find('.' + closeBtn).on('click', function () {  
			var closePopupEl = $(this).closest('.' + popupWrap);
			popupClose(closePopupEl);   
			self.closePopup(closePopupEl);

		});
		/* keyboard enter로 팝업 닫기 */
		$(selector).find('.' + closeBtn).keydown(function (e) {
			var enterClosePopupEl = $(this).closest('.' + popupWrap);
			if (e.keyCode == 13) {
				popupClose(enterClosePopupEl);
				self.closePopup(enterClosePopupEl);
				$(returnElement).focus(); 
			}
		});
		/* 영역 외 클릭시 팝업 닫기 */
		$('html').click(function(e) {      
			if(!$(e.target).data('popup-type') || $(e.target).hasClass(popupWrap)){	
				if($(selector).is(':visible')){
					popupClose();   
					self.closePopup(selector);
				}
			}

		}); 
		/* 영역외 클릭 닫기 버블링 막기 */
		$(popupChildEl).click(function(e){
			e.stopPropagation();
		});
		/* ESC로 팝업 닫기 */
		$(document).keydown(function (e) {
			if (e.keyCode == 27){
				if($(selector).is(':visible')){
					popupClose();
					$('.' + popupWrap).removeClass(activeClass).fadeOut(speed);	
				}
			}
		});

		// 레이어팝업 닫기
		function popupClose(removeElement) {

			$(returnElement).focus();
			$(removeElement).prev('.popup-layer-mask').remove();
			$(removeElement).find('a.return').remove();

		}
	},
  }
}();
				
			

초점이 논리적 순서로 이동하는 선에서 tabindex 사용을 제한한다.

					
/* 웹 접근성 관련 title 적용 */
$('.main-content-box05 .main-tab-box ul li').removeAttr('aria-label');
$('.main-content-box05 .main-tab-box ul li').removeAttr('role');
$('.main-content-box05 .main-tab-box ul li').removeAttr('tabindex');
$('.main-content-box05 .main-tab-box ul li.swiper-pagination-bullet-active a').attr('title', '선택됨');					
					
				

체크박스, 라디오박스 초점 이동 및 선택

checked 시 input에 css 적용

			
				

	
	적용
	
	미적용

			
		  

			
.b-s-chk .b-radio{display:inline-block;margin:5px;width:20px;height:20px;border:1px solid #d2d2d2;background:#fff;border-radius:50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;cursor:pointer;}
.b-s-chk .b-radio:checked{border-color:#5570fc;background:#5570fc url(../img/board/ico-check01.png) no-repeat center center/12px;}
.b-s-chk .b-radio + label{display:inline-block;padding:0 10px 0 0;font-size:1rem;line-height:1;vertical-align:middle;cursor:pointer;}
.b-s-chk .b-chk{display:inline-block;margin:5px;width:20px;height:20px;border:1px solid #d2d2d2;background:#fff;border-radius:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;cursor:pointer;}
.b-s-chk .b-chk:checked{border-color:#5570fc;background:#5570fc url(../img/board/ico-check01.png) no-repeat center center/12px;}
.b-s-chk .b-chk + label{display:inline-block;padding:0 10px 0 0;font-size:1rem;line-height:1;vertical-align:middle;cursor:pointer;}

			
		  

특정 요소 키보드 탭 이용 포커스 시 fixed header에 해당 요소가 가려지는 문제

아래의 코드는 특정 영역의 요소를 포커스로 이동한 후 마지막에 포커싱 되어야 하는 요소(.btn-more)가 영역의 위쪽에 위치하고 있을 때 header에 가려지는 문제를 해결하는 코드이다.

				
App.ScrollToFocusedEl = function () {
	var self;
	return{
		init:function(){
			self = this;

			if($('.sub-main-container .btn-more').length > 0) {
				$('.sub-main-container .btn-more').on('focus', function() {
					var scrollTop = $(window).scrollTop();
					var headerH = $('.header-wrap').outerHeight();
					var gnbBgH = $('.gnb-bg').outerHeight();
					var totalH = headerH + gnbBgH;
					var elTop = $(this).offset().top;

					if(scrollTop > (elTop - headerH)) {
						$(window).scrollTop(elTop - totalH)
					}
				})
			}
		},
	}
}();
				
				

자동으로 변경되는 콘텐츠는 반드시 이전, 다음, 정지 기능을 제공하거나 마우스와 키보드 초점을 받고 있는 동안 콘텐츠가 변경되지 않도록 제공해야 함

영남대학교 YU 스토리 영역에 마우스 엔터, 포커스인 될 때 자동으로 움직이는 Interval을 정지 시킴

$('.main-sns-swiper').on('mouseenter focusin', function() { clearInterval(flowCarousel); });

페이지 최상단 스킵 네비게이션

스킵 네비게이션으로 해당 영역으로 이동했을 때, 전체 영역에 포커싱이 되면 안되고 해당 영역의 첫번째 요소에 포커싱이 되어야 한다.

			

	
본문 바로가기
	
주메뉴 바로가기