인식의 용이성

적절한 대체 텍스트 제공

1) alt 제공

<img>, <input type="image">, <area> 의 alt에는 적절한 대체 텍스트를 제공한다.

canvas에 대체텍스트와 속성 추가

canvas에 role=“img”속성과 aria-label=“이미지 설명” 추가

2) IR 기법

특수문자, 기호 포함, 조직도, 차트 등 복잡한 콘텐츠의 경우 숨김 처리로 대체 텍스트를 제공한다.

			메뉴

			
.hide:not(caption){display:block;position:absolute;width:0;height:0;text-indent:-9999999px;overflow:hidden;}

/* table caption은 사파리에서 table-cell의 width가 동일하게 적용되는 오류가 생겨 따로 적용 */
caption.hide{position:static;width:0;height:0;text-indent:-9999px;}

3) 의미 없는 이미지

장식 또는 꾸밈 목적 등의 의미 없는 이미지는 대체 텍스트를 제공하지 않는다.

4) QR 코드 이미지

해당 링크를 알 수 있도록 대체 텍스트를 제공한다.

자막 제공

1) 멀티미디어

자막 또는 대본 또는 수화를 제공한다.

			
1. 유튜브 내용을 자막으로 제공
2. 유튜브 내용 중 텍스트가 들어간 이미지가 포함된 경우 문제 시, 유튜브 썸네일 클릭 시 유트브로 연결되도록 새창 팝업 처리

색에 무관한 콘텐츠 인식

콘텐츠는 색에 관계없이 인식될 수 있어야 한다.

1) 차트

색이 아닌 패턴, 굵기, 모양, 테두리 등의 다양한 방법으로 구분할 수 있도록 제공한다.

Chart 꺾은선 차트 first data, second data, third data

2) 버튼 선택 여부

색이 아닌 패턴, 굵기, 모양, 테두리 등의 다양한 방법으로 구분할 수 있도록 제공한다.

슬라이드 버튼
탭 버튼
페이지내이션

명확한 지시 사항 제공

지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.

텍스트 콘텐츠의 명도 대비

텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.

			Color Contrast Analyzer를 사용하여 명도대비 측정

https://www.tpgi.com/color-contrast-checker/

배경음 사용 금지

페이지 진입 시 자동 재생되는 3초 이상의 배경음 콘텐츠(동영상 포함)

콘텐츠 간의 구분

이웃한 콘텐츠는 구별될 수 있어야 한다.

페이지 타이틀 변경

페이지 내용에 맞게 적절한 페이지 타이틀을 제공해야 한다.

예시 페이지 : https://bric1.postech.ac.kr/bric/member/login.do

				
App.SetMemberPageTitle = function(){
	var self;
	var currentPageUrl, modeParam, urlParams, modeTitle;
	return {
		init: function() {
			self = this;

			function changeTitle() {
				var thisTabTtext = $('.member-tab').find('>ul > li.active > a').text();
				$(document).attr('title', thisTabTtext + ' 로그인' + modeTitle + ' | BRIC');
			}

			$(window).on('load', function() {
				currentPageUrl = window.location.search;

				urlParams = new URLSearchParams(currentPageUrl);

				modeParam = urlParams.get('mode');

				if(modeParam == 'id') {
					modeTitle = ' - 아이디 찾기';
					changeTitle();
				} else if(modeParam == 'pwd') {
					modeTitle = ' - 비밀번호 찾기';
					changeTitle();
				} else if(modeParam == null) {
					modeTitle = '';
					changeTitle();
				}

			});
			$(document).on('click', '.member-tab > ul > li > a', function() {
				changeTitle();
			});


		},
	};
}();