Web Accessibility Guide

웹접근성이란?

장애를 가진 사람과 장애를 가지지 않은 사람 모두가 동등하게 웹사이트를 이용할 수 있도록 보장하는 것이다.

웹 접근성 준수는 법적 의무사항이다.「국가정보화기본법」과 「장애인차별금지 및 권리구제 등에 관한 법률(이하 "장애인차별금지법")」등 법률에 명시된 의무사항으로 모든 웹사이트는 웹 접근성을 준수해야 한다.

 

장애유형의 이해

장애유형에 따라 상황 및 특징에 대한 이해와 그에 대한 보완 대책을 제공해 주어야 한다.

출처 : http://www.websoul.co.kr/accessibility/define.asp

웹접근성 향상의 기대 효과

✅ 장애인, 고령자 등을 포함한 사용자층 확대

장애인, 고령자 등과 같은 정보 소외 계층이 원하는 정보를 자유롭게 접근 및 이용할 수 있게 해주며, 이러한 잠재적인 계층을 사용자 계층으로 끌어내어 새로운 고객층을 발굴하는 기회로 확대될 수 있다.

✅ 규정과 법적 요구 사항에 대한 준수

2008년 4월 11일부터 시행된 「장애인차별금지 및 권리구제 등에 관한 법률(이하 "장애인차별금지법")」관련 규정을 준수할 수 있다.

✅ 다양한 환경, 새로운 기기에서의 이용

마우스 조작이 어려운 환경이나, 모바일과 같은 새로운 기기와의 호환성을 보장할 수 있으며, 다양한 OS 및 웹브라우저의 사용 범위가 확대된다.

✅ 개발 및 운용의 효율성 제고

- 웹사이트 기획 및 제작 단계에서부터 다양한 환경을 고려하여 진행되므로 제작 및 운용의 효율성을 높일 수 있다.

- 사회공헌 및 복지기업으로서의 기업 이미지 향상

- 민간 기업의 경우, 기업의 사회적 책임에 대한 중요도가 높아지고 있는 시점에서 기업의 이익을 사회 공헌 및 복지 향상에 사용하고, 책임감 있는 기업으로서의 이미지 향상 효과를 얻을 수 있다.

접근성 심사 기준 브라우저

접근성 심사 기준 브라우저는 Internet Explorer 최신 버전이다. 2020년 기준으로 웹 브라우저 이용률은 크롬(Chrome)이 가장 높지만, 정보에 취약한 계층 및 공공기관에서는 IE의 이용률이 높으므로, IE 기준으로 심사가 진행된다. 그러므로 접근성을 위한 사이트 개발 시 크로스브라우징 체크는 필수사항이다.

2022년 6월 이후로 접근성 심사 기준 브라우저가 IE에서 크롬(Chrome)으로 변경되었다고 한다!!

접근성 심사 검출 내용 살펴보기

실제 웹접근성 인증마크를 따야 하는 여러 프로젝트를 진행하면서 발생한 이슈들이다.

 

 

검출 이유 : 적절한 대체 텍스트 미제공

그래프 API를 사용하여 데이터를 표현하는 UI에서 이슈가 발생했다.그래프 API는 스크립트로 그래프를 그려주다보니 해당 내에 대체 텍스트가 삽입되지 못하는 경우가 있다. 이런 경우에는 해당 그래프 데이터를 엑셀 등의 파일로 제공하거나 동등한 수준의 데이터 표를 제공해주어야 한다.

 

처리 방안

프로젝트 당시에 디자인적으로 엑셀이나 데이터 표를 표현할 수 없는 상황이었기에 해당 이슈는 그래프 데이터 내용을 html태그로 작성하고, 스크린리더에서만 읽히도록 IR기법을 사용하여 처리하였다. 

---

검출 이유 : 초점 이동이 논리적이지 않음

페이지 로드 후 화면을 가리는 레이어 팝업이 뜨면, 가장 먼저 레이어 팝업에 초점이 가야하고, 팝업을 닫으면 레이어 팝업 제공 전의 콘텐츠 또는 영역으로 초점이 복귀되어야 한다. 팝업이 2개 이상이 뜰 경우, 하나의 팝업에 먼저 초점이 가고, 해당 팝업을 닫으면 그 다음 팝업으로 포커스가 가야한다.

해당 이슈는 2개 이상의 팝업에서 하나의 팝업에만 포커스가 가고, 해당 팝업을 닫으면 다음 팝업이 아닌 본문 콘텐츠로 포커스가 이동되어 다른 하나의 팝업에 접근이 불가하여 검출되었다.

 

처리 방안

페이지 로드 후 팝업의 개수 설정 및 초기화 후(let popCnt = 0), 팝업 닫기버튼 클릭 시 팝업의 개수가 하나씩 차감되도록 한다. 팝업 닫기 버튼을 클릭 시 실행되는 함수 popCloseMain( )내에 $('.popupClose').focus( );를 추가하여, 팝업을 닫았을 때, 다른 팝업의 닫기 버튼으로 초점이 강제 이동되게끔 구현하였다. 

---

검출 이유 : 초점 및 키보드의 위치를 나타내는 요소(포커스링)가 시각적으로 표시되지 않음

체크박스, 라디오버튼을 디자인적으로 커스터마이징하여 꾸미기 위해 브라우저의 기본 input요소의 스타일을 display:none;으로 숨기고, 디자인된 이미지를 노출시켰었다. input요소가 display:none;처리가 되어있다보니 포커스링이 보이지 않아 발생한 이슈이다.

 

처리 방안

기본 스타일 유지하되 사이즈를 작게 조정 후 디자인 스타일로 기본 스타일을 가림

input요소에 적용된 display:none;을 지우고 브라우저의 기본 스타일을 유지하되, 그 크기를 줄이고, 투명도를 주었다. 그 위에 디자인된 이미지를 올려 기존 브라우저의 스타일이 가려지게끔 처리하였다.

---

검출 이유 : 초점 및 키보드의 위치를 나타내는 요소(포커스링)가 시각적으로 표시되지 않음

이슈가 발생된 곳은 bxSlider 플러그인을 사용한 슬라이드이다. 슬라이드가 1개임에도 불구하고 슬라이드 전후로 포커스가 이동되는 현상으로 인해 발생하였다. 또한, 슬라이드 진입 시 현재 슬라이드가 아닌 이전 슬라이드부터 포커스가 잡혀 발생한 이슈이다. 

 

처리 방안

슬라이드가 무한 루프가 되도록 infiniteLoop : true로 설정하였었다. 그러다보니 전후에 슬라이드를 복제하게 된다. 현재 슬라이드와 감춰진 슬라이드를 구분하고, 탭 순서를 지정하는 tabindex 속성을 다르게 부여하는 방식으로 해결 방법을 모색하였다. 플러그인에서 aria-hidden 속성으로 노출된 슬라이드와 가려진 슬라이드를 구분하는 것을 파악하였고, 현재 보이는 슬라이드에는 tabindex:0을 부여하여 자연스럽게 포커스를 받게끔 하고, 노출되지 않은 슬라이드는 tabindex:-1을 부여하여 포커스를 받지 않게끔 구현하였다. 

 

슬라이드 UI는 접근성 심사 시 단골 손님으로 나올 정도로 흔히 발생되므로 슬라이드 구현 시 접근성 제어가 필수이다..!!

var mtSlider = $('#materialSd').bxSlider({
	auto: false,
	speed: 500,
	pager: false,
	controls: true,
	infiniteLoop: true,
	hideControlOnEnd: true,
	adaptiveHeight: true,
	ariaHidden: true,
	onSliderLoad: function(currentIdx){
		$('#materialSd').children('li').each(function(){
			if($(this).attr('aria-hidden') == 'false'){
				$(this).find('a').attr('tabindex','0');
			}else{
				$(this).find('a').attr('tabindex','-1');
			}
		}) 
	},
	onSlideAfter: function($element,oldIdx,newIdx){
		$('#materialSd').children('li').each(function(){
			if($(this).attr('aria-hidden') == 'false'){
				$(this).find('a').attr('tabindex','0');
			}else{
				$(this).find('a').attr('tabindex','-1');
			}
		})
 	}
});