Revision 1133645 of ARIA

<p>접근가능한 리치&nbsp;인터넷 어플리케이션(<strong>ARIA</strong>,&nbsp;<span style="line-height:1.5">Accessible Rich Internet Applications)은&nbsp;</span><span style="line-height:1.5">웹 콘텐츠와 웹 어플리케이션(그 중에서도 특히 Ajax와 JavaScript를 사용하여 개발한 것들)을 제작할 때 적용할 수 있는&nbsp;장애인을 위한 접근성 향상 방법을 정의합니다</span><span style="line-height:1.5">. ARIA를 사용함으로써&nbsp;내비게이션 랜드마크,&nbsp;JavaScript 위젯, 서식(form)&nbsp;힌트,&nbsp;에러 메시지 그리고 실시간 콘텐츠 업데이트 등에 접근성을 부여할 수 있습니다.</span></p>

<p>ARIA는 일련의 특정한 접근성 관련 속성(attribute)로 이루어져 있으며&nbsp;어떠한 마크업에도 적용가능하나,&nbsp;특히&nbsp;HTML에&nbsp;최적화&nbsp;되어 있습니다.&nbsp;<span style="font-family:'Courier New','Andale Mono',monospace; line-height:normal">role&nbsp;</span>속성을 사용하여&nbsp;객체(article, alert, slider와 같은 것들)의 일반(general) 타입을 정의할 수 있습니다.&nbsp;이 외에도&nbsp;ARIA 속성을 추가로 사용하여<span style="line-height:1.5">&nbsp;서식에 관한 설명이나&nbsp;상태바(progressbar)의 현재 값을 제공하는 등&nbsp;</span><span style="line-height:1.5">유용한 프로퍼티들을 제공할 수 있습니다.</span></p>

<p>대부분의 상용&nbsp;브라우저들과 스크린리더 기기는 ARIA를 지원합니다. 그러나, 그 구현방식이 가지각색이며 설사 지원을 한다 하더라도, 오래된 기기 혹은 브라우저의 경우에는&nbsp;제대로 되지 않습니다. 애플리케이션의 기능을 우아하게 저하시키는 (degrades gracefully)&nbsp;"안전한" ARIA를 사용하거나, 사용자에게 기기를 최신 버전으로 업그레이드할 것을 요청하십시오.</p>

<div class="note">
<p><strong>Note</strong>: 다음 사용자들을 위해&nbsp;ARIA가 지금보다 좀 더 나아지도록&nbsp;도와주세요! 시간이 별로&nbsp;없다구요?&nbsp;제안하고자 하는 것이 있으면&nbsp;모질라&nbsp;<a href="https://lists.mozilla.org/listinfo/accessibility">접근성 메일링 리스트</a>나&nbsp;#accessibility <a href="https://wiki.mozilla.org/IRC">IRC channel</a>로 메일 보내주세요!</p>
</div>

<div class="row topicpage-table">
<div class="section">
<h3 id="ARIA_시작하기">ARIA 시작하기</h3>

<dl>
 <dt><a href="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets">ARIA 소개</a></dt>
 <dd>동적인 컨텐츠를&nbsp;ARIA를 적용해&nbsp;접근성을 갖추도록 하는&nbsp;방법에 대한&nbsp;소개한 글입니다. Gez Lemon이 2008년에 쓴&nbsp;ARIA 분야의 고전인&nbsp;<a class="external" href="https://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro</a>도 참조하십시오.</dd>
 <dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ">웹 애플리케이션과 ARIA에 대해&nbsp;자주 묻는 질문 모음(FAQ</a>)</dt>
 <dd>WAI-ARIA와 이것이 웹 애플리케이션에 접근성을 부여하는 데 왜 필요한지 묻는 질문들에 대한 답을 모아놓은 글입니다.</dd>
 <dt><a class="external" href="https://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">스크린 리더기에서 ARIA를 어떻게 사용하는지에&nbsp;대한 영상</a></dt>
 <dd>ARIA "적용 전", "적용 후" 영상을 비롯하여, 웹에서 볼 수 있는 실제 사용&nbsp;예제들과 그것보다&nbsp;간략화된 예시들을 볼 수 있습니다.</dd>
 <dt><a class="external" href="https://w3c.github.io/aria-in-html/">HTML에서 ARIA 사용하기</a></dt>
 <dd>개발자를&nbsp;위한&nbsp;실용&nbsp;가이드를 제공하는 글입니다. HTML 요소에 어떤 ARIA 속성들을 써야 하는지에 대해 제안하는 내용을 담고 있습니다.&nbsp;제안은 실제&nbsp;구현 상황을&nbsp;바탕으로 합니다.</dd>
</dl>

<h3 id="AIRA_심화">AIRA 심화</h3>

<dl>
 <dt><a class="external" href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">ARIA 랜드마크를 사용하여 페이지 탐색&nbsp;고도화</a></dt>
 <dd>스크린 리더 사용자들을 위해 ARIA 랜드마크를 사용하여&nbsp;웹 페이지의 탐색&nbsp;기능을 향상시키는 법을 소개해주는 좋은 글입니다.&nbsp;<a class="external" href="https://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">이와 더불어서 ARIA 구현 노트</a>&nbsp;및 실제 사이트에서의 활용 예시들을 참고하십시오&nbsp;(2011년 7월에 업데이트 되었음).</dd>
 <dt><a href="/en-US/docs/ARIA/forms">서식 접근성 향상하기</a></dt>
 <dd>동적인 콘텐츠만 ARIA를 사용할 수 있는것은 아닙니다! ARIA 속성을 추가하여 HTML 폼 접근성을 어떻게 향상시킬 수 있는지에 대해 알아봅시다.</dd>
 <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">활성 영역(Live regions) (개발&nbsp;진행중)</a></dt>
 <dd>활성 영역을 사용하면 스크린 리더기가 페이지 콘텐츠의 변경 내역을 다루는 데 도움이 됩니다.</dd>
 <dt><a class="external" href="https://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">ARIA 활성 영역을 사용하여 콘텐츠 변경 내역 알리기</a></dt>
 <dd>JAWS 스크린 리더 소프트웨어 개발자들이&nbsp;쓴 활성 영역에 대해 간략히&nbsp;요약해놓은&nbsp;글입니다. 파이어폭스에서 NVDA, 사파리에서 VoiceOver 사용시에도 활성 영역이 지원됩니다.</dd>
</dl>

<h3 id="스크립트_처리된_위젯에_ARIA_적용하기">스크립트 처리된 위젯에&nbsp;ARIA 적용하기</h3>

<dl>
 <dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">자바스크립트 위젯에&nbsp;키보드 탐색&nbsp;및 초점&nbsp;적용하기</a></dt>
 <dd>자바스크립트 위젯에&nbsp;접근성을 부여하기&nbsp;하기 위해서 해야 하는&nbsp;가장 첫번째 일은&nbsp;키보드를 사용하여&nbsp;위젯을 탐색 가능하게 만드는 것입니다. 이 글은 키보드 탐색 가능한 위젯을 만들기 위해&nbsp;거쳐야&nbsp;하는&nbsp;단계들에 대해 설명하는 글입니다.&nbsp;<a class="external" href="https://www.yuiblog.com/blog/2009/02/23/managing-focus/">Yahoo!에서 게시한&nbsp;초점&nbsp;관리 가이드</a>&nbsp;또한 좋은 참고 자료입니다.</dd>
 <dt><a class="external" href="https://access.aol.com/dhtml-style-guide-working-group/">키보드 탐색&nbsp;적용을 위한 스타일 가이드</a></dt>
 <dd>ARIA를 적용하다 보면 항상 일관성 있는 동작을 구현하는 것이 중요하다는 것을 깨닫게 됩니다.&nbsp;일관성 있는 동작을 구현해놓으면&nbsp;명백하게&nbsp;사용자에게&nbsp;최상의 환경을 제공해 줄 수 있습니다.&nbsp;이 글은 공통 위젯에서 사용하는 키보드 인터페이스에 대해 설명해주는 스타일 가이드 입니다.</dd>
</dl>

<h3 id="ARIA_자료">ARIA 자료</h3>

<dl>
 <dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview">위젯&nbsp;관련&nbsp;테크닉, 튜토리얼 및 예시 모음</a></dt>
 <dd>슬라이더나 메뉴 혹은 다른 위젯이 필요하시나요? 이 문서에서 관련 자료를 찾아보세요.</dd>
 <dt><a class="external" href="https://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="https://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">ARIA 사용이 가능한 자바스크립트 UI 라이브러리</a></dt>
 <dd>새로운 프로젝트를 시작해야 한다면 ARIA 지원 기능이 들어 있는&nbsp;UI 위젯 라이브러리를 사용해보세요. 주의할 점은 2009년에 쓴 글이므로 만약 업데이트가 발생한다면&nbsp;컨텐츠를 MDN 페이지로 옮겨야 합니다.</dd>
</dl>
</div>

<div class="section">
<h3 id="메일링_리스트">메일링 리스트</h3>

<dl>
 <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria">Free ARIA 구글 그룹&nbsp;</a></dt>
 <dd>ARIA에 대해 궁금한 점과&nbsp;ARIA 문서 내용을 보완하기 위한 제안을 낼&nbsp;수 있는 곳입니다.</dd>
</dl>

<h3 id="블로그">블로그</h3>

<p>각종 블로그에 게시된&nbsp;ARIA 관련&nbsp;정보는 조금만 시간이 지나도 예전&nbsp;내용이 되어버리는 경향이 있습니다. 그런가하면&nbsp;오늘날의&nbsp;ARIA를 위해 일하는&nbsp;개발자들이 쓴 훌륭한 글도 있습니다.</p>

<ul>
 <li><a class="external" href="https://www.paciellogroup.com/blog/archive/">Paciello Group</a></li>
 <li><a class="external" href="https://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></li>
</ul>

<h3 id="버그_수집하기">버그 수집하기</h3>

<p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">브라우저, 스크린 리더기, 자바스크립트 라이브러리에서 발생한 ARIA 버그를 모아주세요.</a></p>

<h3 id="예시">예시</h3>

<dl>
 <dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases">ARIA 예시 라이브러리</a></dt>
 <dd>ARIA 학습&nbsp;첫걸음을 떼기에 좋은, 가장 기본이 되면서도&nbsp;중요한&nbsp;예시 파일들을 모아놓았습니다.</dd>
 <dt>접근성을 보유한&nbsp;JS 위젯 라이브러리 데모</dt>
 <dd><a class="external" href="https://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="https://yuilibrary.com/gallery/">YUI</a></dd>
 <dt><a class="external" href="https://mail.yahoo.com">Yahoo! 메일</a></dt>
 <dd>데스크탑 앱과 거의 유사한 메일 앱인 Yahoo! 메일은&nbsp;접근성 구현이 아주 충실하게 되어 있습니다. 스크린 리더기 사용자인 마르코는&nbsp;<a class="external" href="https://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">Yahoo! 메일 사용후기</a>에서&nbsp;앞으로도 이렇게 훌륭한 접근성 구현을 지속해달라는 바람을 표현했습니다.</dd>
 <dt><a class="external" href="https://search.yahoo.com">Yahoo! 검색</a></dt>
 <dd>Yahoo! 개발팀은 ARIA가 가진 기능을&nbsp;최대한 활용하고 <a class="external" href="https://ycorpblog.com/2011/03/23/searchdirect/">그들만의 테크닉을 공유함으로써</a>&nbsp;고급 ARIA 기능 적용 사례에 한 획을 그었습니다. ARIA 랜드마크, 활성 영역 및 위젯을 적절히 조합하여 Yahoo! 검색 기능에 적용했습니다.</dd>
</dl>

<h3 id="표준화를_위한_노고">표준화를 위한 노고</h3>

<dl>
 <dt><a class="external" href="https://www.w3.org/WAI/intro/aria.php">W3C&nbsp;WAI-ARIA 활동 개요</a></dt>
 <dd>웹 접근성 개선안(WAI)을 따라서&nbsp;그동안 이루어진 WAI-ARIA 표준화 과정에 대해 서술한 검수판 개요 문서입니다.</dd>
 <dt><a class="external" href="https://www.w3.org/TR/wai-aria/">WAI-ARIA 스펙 문서</a></dt>
 <dd>참고용으로 삼기 좋은&nbsp;W3C 스펙 문서입니다. 지금 단계에서는 스펙 구현 상황이 불안정하기에 호환성 검사를 꼭 해야 합니다.</dd>
 <dt><a class="external" href="https://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA 사용 가이드</a></dt>
 <dd>
 <p>W3C WAI-ARIA 스펙 문서와 더불어, 다양한 브라우저 및 스크린 리더기 사용 환경에서 항상 동일한 ARIA 지원이 이루어지는&nbsp;장밋빛 미래를 표상하는&nbsp;모범 사례 모음 문서입니다. ARIA를 심층적으로 분석하는 내용을 포함하고 있습니다.</p>

 <p>지금으로써는&nbsp;ARIA 구현을 위해 호환성을 최대로 고려해야 합니다.&nbsp;현재 ARIA 구현 상태를 바탕으로 하는&nbsp;모범 사례에 관한 문서와 예시들을 사용하십시오.</p>
 </dd>
 <dt><a class="external" href="https://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt>
 <dd>Open AJAX 개발은 ARIA를 위한 개발자 도구, 샘플 파일 및 자동화 테스트를 중심적으로 다룹니다.</dd>
 <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">수정중: WCAG 2.0 ARIA 테크닉</a></dt>
 <dd>WAI-ARIA 사용자들은&nbsp;WCAG의 HTML &amp; WAI-ARIA 사용&nbsp;테크닉에 대해 전부 알려 달라고 요청하는데,&nbsp;그렇게 함으로써 각&nbsp;단체별로 ARIA를 적용한 자신들의 콘텐츠가 WCAG를 준수한다고 자신있게 주장할 수 있기 때문입니다. 법률이나 정책이 WCAG를 바탕으로 하고 있을 때 중요하게 살펴볼 만한 문서입니다.</dd>
</dl>
</div>
</div>

<h3 id="Related_Topics" name="Related_Topics">관련 주제</h3>

<p><a href="/en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript">JavaScript</a></p>