a11y

발표자 소개

안녕하세요. 멀더끙입니다.

(주)콘텐츠연합플랫폼 퍼블리셔

웹 접근성 아시죠?

훗.. 그 정도는 압니다

ARIA 적용해주세요~

그건 또 뭔가요!!???

WAI-ARIA

Web Accessibility Initiative
- Accessible Rich Internet Applications

RIA를 위한 접근성 권고안

"권고"라굽쇼?

WAI-ARIA 란?

defines a way to make Web content and Web applications more accessible to people with disabilities.
It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies
W3C - WAI-ARIA Overview

역할 (Role)

지금 바로 적용이 가능하다

적용하면 좋은게 있나?

사용자가 랜드마크 탐색을 통해 컨텐츠에 접근이 용이하다.

<div id="header" role="banner">
	<h1>pooq</h1>
	<div id="mainNav" role="navigation">
		<span>메인 메뉴</span>
		<ul>
			<li><a href="#">실시간TV</a></li>
			<li><a href="#">방송 VOD</a></li>
			.....
	</div>
	<form action="" role="search">
		<input type="text" name="keyword" id="keyword" />
		<button type="submit">검색</button>
	</form>
</div>
<div id="contents" role="main">
	<h2>방송 VOD 컨텐츠</h2>
	.....
</div>
<div id="recNotice" role="complementary">
	<h2>공지사항</h2>
	<a href="#">1월 27일 서비스 정기점검 공지</a>
</div>
<div id="footer" role="contentinfo">
	<h2>회사소개 및 이용 정보</h2>
	<ul>
		<li><a href="#">회사소개</a></li>
		<li><a href="#">이용약관</a></li>
		....
</div>

속성 (Properties) & 상태 (State)

상태는 요소의 상태를 나타내므로 자주 바뀌는 반면, 속성은 상대적으로 바뀌는 경우가 드물다

<ul aria-live="polite" aria-relevant="all" aria-atomic="false">
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

제법 유용한 ARIA Examples

aria-describedby

객체를 설명하는 요소의 ID를 설정

AS - IS

<input type="text" name="usrID" id="usrID" />
<span class="guide">* 아이디는 6 ~ 15자 이내의 영문,숫자로 작성해주세요</span>

TO - BE

<input type="text" name="usrId" id="usrId" aria-describedby="usrIdGuide" />
<span id="usrIdGuide" class="guide">* 아이디는 6 ~ 15자 이내의 영문,숫자로 작성해주세요</span>

role="alert"

중요한 메시지나 일시적으로 보여지는 정보를 제공

<input type="password" name="usrPwd" id="usrPwd" aria-describedby="tooltip" />
<span id="tooltip" class="guide">6~12자 이내로 영문, 숫자를 혼합하여 사용</span>
<span id="pwdFeedback" class="feedback" role="alert">유효하지 않은 비밀번호 입니다.</span>

$('#usrPwd').on('change', function(){
		var val = this.value.trim(),
			regExp = new RegExp(/(?=.{0,9}[0-9])(?=.{0,9}[a-z])([0-9a-zA-Z]{6,12})/);
		$('#pwdFeedback').remove();
		if(val !== '' && !regExp.test(val)){
			$('<span id="pwdFeedback" class="feedback" role="alert">유효하지 않은 비밀번호 입니다.</span>')
				.insertAfter('#tooltip');
			this.focus()
		}
});

aria-expanded

펼치거나 닫을 수 있는 상태 표현

<div class="terms">
	<h2 id="privTermLbl">개인정보 취급 방침</h2>
	<button type="button" aria-expanded="false" aria-controls="privTerm" class="btn-toggle">펼쳐보기</button>
	<blockquote id="privTerm"  aria-labelledby="privTermLbl" tabindex="0">
		...
	</blockquote>
</div>
<div class="terms">
	<h2 id="serviceTermLbl">서비스 이용약관</h2>
	<button type="button" aria-expanded="false" aria-controls="serviceTerm" class="btn-toggle">펼쳐보기</button>
	<blockquote id="serviceTerm"  aria-labelledby="serviceTermLbl" tabindex="0">
		...
	</blockquote>
</div>

if($targetElem.is(':visible')){
	$targetElem.slideUp(200);
	$(this).text('펼쳐보기').attr('aria-expanded', 'false')
}else{
	$targetElem.slideDown(200);
	$(this).text('접어두기').attr('aria-expanded', 'true')
}

마치며...

WAI-ARIA는 아직 완전히 지원되지는 않는다.

그러나 잘 지원되는 것들도 있다.

써먹을 수 있는 건 써먹어보자.

어렵다고 모른다고 버리지 말고

간단한 것부터 차근차근