TIL 09 - 웹접근성 코드 리뷰

hojung choi·2021년 5월 27일

html / css / jquery

목록 보기

1/3

✅ 잊어버리기 전에 TIL에 기록해놓기
2년동안 퍼블리셔로 일을 해왔지만, 제대로 웹접근성에 대한 내 코드를 리뷰해본적은 없었다! 요근래 몇주간 계속 웹접근성 작업을 하였고, 지금까지 받았던 웹접근성 심사 결과와 코드를 정리 할 계획이다!

웹접근성

웹접근성이란?

웹 접근성(Web Accessibility) 이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것

출처 - Web Soul Lab

단순히 홈페이지를 못보는 사람이라고 생각하면 시각장애인만을 떠올리기 쉬운데
웹접근성은 시각장애인은 물론이고 청각장애, 지체장애, 언어 장애를 비롯한 모든 장애인을 고려하여 코딩을 해야한다.

코드 리뷰

클라이언트의 요청으로 웹접근성인증 마크를 받은 홈페이지다.
웹접근성 심사기관은 국내에 몇 곳이 있는걸로 알고있다.
그래서 심사기관에 따라 약간의 심사기준 차이가 있을 수 있다.

들어가기전에 앞서 웹접근성에서 기초적인 코딩들을 정리하고 가자!

input 태그 title
table caption 및 summary
a태그 title
img태그 alt
window.document.title

명도와 같은 디자인적 요소들은 언급하지 않겠다

👉🏻 gnb Header

var isTablet = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|Windows Phone)/);
	if( !isTablet ){
		$(".gnb").on("mouseenter", function(){
			$(this).addClass("view");
			return false;
		}).on("mouseleave", function(){
			$(this).removeClass("view");
			return false;

		});
		$(".gnb > li").on("focusin", function(){
			$(".gnb").addClass("view");
		}).on("focusout", function(){
			$(".gnb").removeClass("view");
		});
		
	}else{
		$(".gnb>li>a").on("click", function(){
			$(".gnb").addClass('view');
			return false;
		});
		$(document).click(function(e){
			if(e.target.id != 'gnb'){
				$(".gnb").removeClass('view');
			};			
		});
	}

기존에 쓰던 gnb스크립트를 버리고 새롭게 다시 짠 코드이다! 😵 (css 짜는데도 힘들었다 ㅠㅠ)
전체 메뉴를 탭으로 쉽게 이해 할 수 있게 대제목>소제목 순으로 탭을 이동시켰다. 또한 마지막 제목에서 탭을 누르게 되면 subm는 닫히게 된다.

👉🏻 tab

jQuery.fn.tabs = function(options) {
	var opts = jQuery.extend(options);
	var tabs = jQuery(this);
	var tabList = tabs.find('>ul>li');
	var tabCont = tabs.find('.content');
   
	function showTab() {
		t = jQuery(this).parent('li');
		if (!t.hasClass('active')) {
			tabList.removeClass('active');
			t.addClass('active');
			tabCont.hide();
			t.find('.content').show();
		}
	}

	function hideTab() {
		tabList.removeClass('active');
		tabCont.hide();
		activeTab();
	}

	function activeTab() {
		if(opts.t) {
			t = tabList.eq(opts.t-1); 
			t.addClass('active');
			t.find('.content').show();
		}
	}

	return this.each(function() {
		activeTab();
        	tabList.find('>a').click(showTab).focus(showTab);
		tabs.mouseleave(hideTab);
		tabList.find('>a').click(function(){
			return false;
		});

	});
}
jQuery('#mainPosts').tabs({t:1});

기존에 쓰던 tab은 ul>li로 tab-title을 잡고, tabcontent의 div를 만들어 작업했었다.
그렇게 하려고 보니.. 당연히 탭 포커스는 tab-title을 먼저 잡고 content를 잡게된다! 그런 뒤죽박죽을 막기위해 tab-content를 각각의 title안으로 넣어버렸고, 각각의 tab-title이 active를 가지게 되면 content가 표출되게 하였다.