WAI-ARIA로 사이트에 웹 접근성 추가하기

From. 반응형 웹디자인

WAI-ARIA의 주 목적은 웹 접근성 보장을 위해 동적인 콘텐츠를 만들 때 생기는 문제를 해결하는 데 있다. WAI-ARIA는 역할과 상태 정보, 사용자 정의 위젯(웹 애플리케이션에서 동적인 부분)의 속성을 기술하는 수단을 제공하며, 보조적인 기술을 사용하는 사용자들이 이를 인식하고 사용할 수 있게 해준다.

예를 들어, 위젯이 지속적으로 업데이트되는 주가를 표시하고 있다면 맹인 사용자는 이를 어떻게 알 수 있을까? WAI-ARIA는 이런 문제를 해결하기 위해 만들어 졌다. ARIA를 완벽하게 구현하는 일은 이 책의 범위 밖이다(ARIA에 관한 자세한 정보는 http://www.w3.org/WAI/intro/aria를 확인한다). 그러나 HTML5로 작성된 사이트에서 사용자에게 보조 기술을 제공할 수 있도록 ARIA의 일부를 쉽게 구현할 수 있다.

고객을 위해 웹사이트를 만들 때, 접근성을 지원할 시간이나 예산이 충분하지 않은 경우가 종종 있다(안타깝게도 전혀 고려하지 않는 경우도 많다). 그러나 ARIA의 랜드마크 역할(landmark role)을 사용하면 HTML5 시맨틱의 단점 일부를 보완하고 WAI-ARIA를 지원하는 스트린 리더가 다른 화면 영역을 쉽게 변경하도록 할 수 있다.



ARIA의 랜드마그 역할

ARIA 랜드마크 역할의 구현은 반응형 웹 디자인과 관련이 없다. 그러나 일부 기능의 추가는 상대적으로 간단해서(또한 추가 노력 없이 유효한 HTML5다), 지금부터 작성하는 모든 HTML5 웹 페이지에 사용할 만한 충분한 이유가 된다. 그럼 잡담은 그만하고, 어떻게 동작하는지 살펴보자.

새로 작성한 HTML5 내비게이션 영역을 살펴보자.

								<nav> 
									<ul>
										<li><a href="#">Why?</a></li>
										<li><a href="#">Synopsis</a></li>
										<li><a href="#">Stills/Photos</a></li>
										<li><a href="#">Videos/clips</a></li>
										<li><a href="#">Quotes</a></li>
										<li><a href="#">Quiz</a></li>
									</ul>
								</nav> 	
						

다음 코드와 같이 랜드마크 역할 속성을 추가함으로써 WAI-ARIA를 지원하는 스크린 리더가 이 영역을 쉽게 이동하도록 만들 수 있다.ㄴ

								<nav role="navigation"> 
									<ul>
										<li><a href="#">Why?</a></li>
										<li><a href="#">Synopsis</a></li>
										<li><a href="#">Stills/Photos</a></li>
										<li><a href="#">Videos/clips</a></li>
										<li><a href="#">Quotes</a></li>
										<li><a href="#">Quiz</a></li>
									</ul>
								</nav> 	
						

얼마나 쉬운가? 문서 구조에 사용할 수 있는 랜드마크 역할의 속성 값은 다음과 같다.

  • application: 웹 애플리케이션에 사용되는 영역을 지정
  • banner: 특정 문서가 아닌 전체 사이트 영역을 지정. 예를 들어 사이트의 헤더나 로고
  • complementary: 페이지의 메인 섹션을 보완하는 영역을 지정. '그리고 우승자는 아니다...' 사이트에서는 UNSUNG HEROES 와 OVERHYPED NONSENSE 영역을 complementary로 고려할 만하다.
  • contentinfo: 메인 콘텐츠의 정보를 지정. 예를 들어 페이지 하단의 저작권 정보 표시.
  • form:웹 폼을 지정. 검색 엔진일 경우에는 대신 search를 사용.
  • main:페이지의 메인 콘텐츠를 지정.
  • navigation: 현재 문서나 관련된 문서의 내비게이션 링크를 지정
  • search: 검색을 수행하는 영역을 정의


ARIA 더 살펴보기
ARIA의 역할은 랜드마크 역할을 지정하는 데만 국한되지 않는다. 역할의 전체 목록과 그 설명은 http://www.w3.org/TR/wai-aria/roles#role_definitions를 참고한다.

'그리고 우승자는 아니다...'의 마그업을 적합한 ARIA 랜드 마크 역할로 확장하면 다음과 같다.

							<!DOCTYPE html>
							<html lang="en" manifest="offline.manifest">
							<head>
							<meta charset=utf-8>
							<meta name="viewport"  content="width=device-width,initial-scale=1.0" />
							<title>And the winner isn't…</title>
							<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
							<link href="css/main.css" rel="stylesheet" />

							</head>

							<body>

							<div id="wrapper"> 
								<!-- the header and navigation -->
								<header role="banner">
									<div id="logo">And the winner is<span>n't...</span></div> 
									<nav role="navigation"> 
										<ul>
											<li><a href="#">Why?</a></li>
											<li><a href="#">Synopsis</a></li>
											<li><a href="#">Stills/Photos</a></li>
											<li><a href="#">Videos/clips</a></li>
											<li><a href="#">Quotes</a></li>
											<li><a href="#">Quiz</a></li>
										</ul>
									</nav> 	
								</header> 
								<!-- the content -->
								<div id="content" role="main">							
									<article>
										<header>An article about HTML5</header>
										<nav>
											<a href="1.html">related link 1</a>
											<a href="2.html">related link 2</a>
										</nav>
										<footer>This was an article by Ben Frain</footer>
									</article>
									<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />
									<h1>Every year <em>when I watch the Oscars I'm annoyed…</em></h1>
									<p>that films like <b>King Kong</b>, <b>Moulin Rouge</b> and <b>Munich</b> get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p>
									<p><i>We’re here to put things right.</i></p>
								<a href="#">these should have won &raquo;</a>	
								</div>
								<!-- the sidebar -->
								<aside>
									<section role="complementary">
										<div class="sideBlock unSung">
											<h1>Unsung heroes...</h1>
											<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
											<a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a>
										</div>
									</section>
									<section role="complementary">
										<div class="sideBlock overHyped">
											<h1>Overhyped nonsense...</h1>
											<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
											<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
										</div>
									</section>
								</aside> 
								<!-- the footer -->
								<footer role="contentinfo"> 
									<p>Note: our opinion is absolutely correct. You are wrong, even if you think you are right. That’s a fact. Deal with it.</p>
								</footer> 

							</div> 
							</body>
							</html>
						

NVDA(NonVisual Desktop Access)를 이용한 디자인 무료 테스트
윈도우 플랫폼에서 개발하고 스크린 리더에서 ARIA로 의미가 향상된 디자인을 테스트하고 싶다면, NVDA를 사용해 보자. NVDA는 http://www.nvda-project.org/에서 무료로 구할 수 있다.

이 WAI-ARIA의 간단한 소개는 보조 기술을 사용하는 사람들을 위해 일부 기능을 지원하는 일이 얼마나 쉬운지 보여줬다. 다음 HTML5 프로젝트에서 WAI-ARIA를 사용해 프로젝트를 향상하는 방안을 고려해보기 바란다.

ARIA 역할 스타일링
여타 속성과 마찬가지로 속성 선택자를 통해 ARIA의 역할에 스타일을 직접 적용할 수 있다. 예를 들어 다음과 같이 navigation 역할에 CSS 규칙을 추가할 수 있다.

nav[role="navigation"] {}