🔵 부산광역시 홈페이지

• 사이트명: 부산시청 홈페이지 (메인)
• 작업기간: 2일
• 사용 언어 : HTML5, CSS3, JavaScript
• 라이브러리 : jQuery, Swiper
• 유형: PC 적응형

✅ Key Point

• Tab 키를 활용한 메뉴 이동
• CSS gradient 애니메이션 구현
• Swiper 라이브러리를 이용하여 배너 구현

Point 01 Tab 키를 활용한 메뉴 이동

🔍 Why?

웹 접근성을 고려하여 키보드만으로도 사이트 탐색이 가능해야 한다. 마우스를 사용할 수 없는 사용자도 tab키를 활용해 모든 메뉴를 이동할 수 있도록 구현하면 편의성이 향상된다.

$(".main_menu, .sub_menu").focusin(
		function () {
				$(this).addClass("active");
				$(".sub_list").stop().slideDown();
				$(".menu_bg").stop().slideDown();
				$('.menu_open_black').stop().fadeIn(500);
});

$(".main_menu, .sub_menu").focusout(
		function () {
				if ($(window).scrollTop() === 0) {
						$(this).removeClass("active");
		}
		$(".sub_list").stop().slideUp();
		$(".menu_bg").stop().slideUp();
		$('.menu_open_black').stop().fadeOut(500);
});

→ 일반적으로 header의 서브메뉴는 기본적으로 숨겨져 있으며, 마우스를 올려야만 나타난다. 이 경우 Tab 키로는 서브메뉴에 접근할 수 없기 때문에 키보드 사용자의 불편함이 발생한다. 이를 해결하기 위해 focusin과 focusout 이벤트를 활용하여, 메인 메뉴에 Tab 키로 포커스가 들어오면 서브메뉴가 자동으로 펼쳐지도록 구현하였다.