Revision 529707 of ARIA

<p>리치 인터넷 어플리케이션 접근성 (<strong>ARIA</strong>,&nbsp;<span style="line-height: 1.5;">Accessible Rich Internet Applications)는&nbsp;</span><span style="line-height: 1.5;">(특히 AJAX와 JavaScript를 사용하여 개발하는)</span><span style="line-height: 1.5;">웹 콘텐츠와 웹 어플리케이션을 제작할 때 장애인을 위한 접근성 향상 방법을 정의하</span><span style="line-height: 1.5;">고 있습니다. 예를 들어, ARIA는 접근가능한 네비게이션에 표시를 한다거나, JavaScript 위젯 사용이나, form 힌트 및 에러 메시지 그리고 실시간 콘텐츠 업데이트 등을 사용할 수 있도록 합니다.</span></p>
<p>ARIA는 어떤 마크업 요소에도 추가 가능한 접근성 속성의 집합이지만, 특히 HTML에 최적화되어 있습니다.&nbsp;<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">role</span>속성은 객체(article, alert, slider와 같은 것들)의 제너럴 타입을 정의할 수 있습니다. 추가로 ARIA 속성들은<span style="line-height: 1.5;">&nbsp;form을 위한 설명이나 progressbar의 현재 값을 나타내어 주는 것과 같은&nbsp;</span><span style="line-height: 1.5;">다른 유용한 프로퍼티들을 제공합니다.</span></p>
<p>ARIA는 대부분의 유명 브라우저들과 스크린리더에서 지원합니다. 그러나, 구현방식이 가지각색이며 오래된 기술들이 그를 잘 지원하지 않거나 전체를 지원하지 않습니다. "안전한" ARIA를 우아하게 낮추거나, 유저들에게 새로운 기술로 업그레이드 할 것을 요구하는 것 중 하나를 사용하십시요.</p>
<p>다음 사람들을 위해 ARIA를 좋게 만들고 기고해주시길 바랍니다! 시간이 없으신가요? 여기 <a href="/Talk:en/ARIA">토론 페이지</a>에 의견을 추가해주셔도 됩니다.</p>
<table class="topicpage-table" style="line-height: 1.5;">
 <tbody>
  <tr>
   <td>
    <h3 id="Documentation" name="Documentation">ARIA 시작하기</h3>
    <dl>
     <dt>
      <a href="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="An overview of accessible web applications and widgets">ARIA를 소개합니다.</a></dt>
     <dd>
      ARIA를 이용한 접근 가능한 동적 콘텐츠의 제작 방법을 알려드립니다. 또한 2008년에&nbsp;<a class="external" href="https://dev.opera.com/articles/view/introduction-to-wai-aria/" style="line-height: 1.5;" title="https://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro by Gez Lemon</a>&nbsp;아티클도 볼 수 있습니다.</dd>
     <dt>
      <a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" title="https://developer.mozilla.org/en-US/docs/Accessibility/Web_applications_and_ARIA_FAQ">웹 어플리케이션과 ARIA FAQ</a></dt>
     <dd>
      WAI-ARIA에 대해 자주 하는 질문에 대한 답변과 웹 어플리케이션에 접근성이 필요한 이유에 대해 알려드립니다.</dd>
     <dt>
      <a class="external" href="https://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/" title="https://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">ARIA를 이용한 스크린 리더의 비디오</a></dt>
     <dd>
      <span style="line-height: 1.5;">See both real and simplfied examples from around the web, including "before" and "after" ARIA videos.&nbsp;</span></dd>
     <dt>
      <a class="external" href="https://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html">Using ARIA in HTML</a></dt>
     <dd>
      A practical guide for developers. It suggests what ARIA attributes to use on HTML elements. Suggestions are based on implementation realities.</dd>
    </dl>
    <h3 id="Simple_ARIA_Enhancements">간단한 ARIA 향상</h3>
    <dl>
     <dt>
      <a class="external" href="https://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/" rel="external" target="_blank" title="https://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">Enhancing Page Navigation with ARIA Landmarks</a></dt>
     <dd>
      A nice intro to using ARIA landmarks to improve web page navigation for screen reader users.&nbsp;<a class="external" href="https://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external" target="_blank" title="https://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">See also, ARIA landmark implementation notes</a>&nbsp;and examples on real sites (updated as of July '11).</dd>
     <dt>
      <a href="/en-US/docs/ARIA/forms" rel="internal" title="/en-US/docs/ARIA/forms">Improving Form Accessibility</a></dt>
     <dd>
      ARIA is not just for dynamic content! Learn how to improve accessibility of HTML forms using additional ARIA attributes.&nbsp;</dd>
     <dt>
      <a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">Live regions (work-in-progress)</a></dt>
     <dd>
      Live regions provide suggestions to screen readers about how to handle changes to the contents of a page.</dd>
     <dt>
      <a class="external" href="https://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm" rel="external" target="_blank" title="https://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">Using ARIA Live Regions to Announce Content Changes</a></dt>
     <dd>
      A quick summary of live regions, by the makers of JAWS screen reader software. Note that live regions are also supported by NVDA in Firefox, and VoiceOver with Safari (as of OS X Lion and iOS 5).</dd>
    </dl>
    <h3 id="ARIA_for_Scripted_Widgets">위젯을 위한 ARIA</h3>
    <dl>
     <dt>
      <a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">Keyboard Navigation and Focus for JavaScript Widgets</a></dt>
     <dd>
      The first step in developing an accessible JavaScript widget is to make it keyboard navigable. This article steps through the process. The&nbsp;<a class="external" href="https://www.yuiblog.com/blog/2009/02/23/managing-focus/" title="https://www.yuiblog.com/blog/2009/02/23/managing-focus/">Yahoo! focus management article</a>&nbsp;is a great resource as well.</dd>
     <dt>
      <a class="external" href="https://dev.aol.com/dhtml_style_guide" title="https://dev.aol.com/dhtml_style_guide">Style Guide for Keyboard Navigation</a></dt>
     <dd>
      A challenge with ARIA is getting developers to implement consistent behavior -- clearly best for users. This style guide describes the keyboard interface for common widgets.</dd>
    </dl>
    <h3 id="ARIA_Resources">ARIA 리소스</h3>
    <dl>
     <dt>
      <a href="/en-US/docs/Accessibility/ARIA/widgets/overview" title="en-US/docs/aria/widgets/overview">Widget Techniques, Tutorials, and Examples</a></dt>
     <dd>
      Need a slider, a menu, or another kind of widget? Find resources here.</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-Enabled JavaScript UI Libraries</a></dt>
     <dd>
      If you're starting a new project, choose a UI widget library with ARIA support already built-in. Warning: this is from 2009 -- content should be moved to an MDN page where it can be updated.</dd>
     <dt>
      <a class="external" href="https://dl.dropbox.com/u/573324/CSUN2012/index.html" title="https://dl.dropbox.com/u/573324/CSUN2012/index.html">Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 Workshop Materials</a></dt>
     <dd>
      Includes slide presentations and examples.</dd>
    </dl>
   </td>
   <td>
    <h3 id="Community" name="Community">메일링 리스트</h3>
    <dl>
     <dt>
      <a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria" title="https://groups.google.com/forum/#!forum/free-aria">Free ARIA Google Group</a></dt>
     <dd>
      A place to ask questions about ARIA, as well as make suggestions for improving the ARIA documentation found on these pages.</dd>
    </dl>
    <h3 id="Community" name="Community">블로그</h3>
    <p>ARIA information on blogs tends to get out of date quickly. Still, there is some great info out there from other developers making ARIA work today.</p>
    <p><a class="external" href="https://www.paciellogroup.com/blog/category/wai-aria/" title="https://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p>
    <p><a class="external" href="https://www.accessibleculture.org/tag/wai-aria/" title="https://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p>
    <p><a class="external" href="https://yaccessibilityblog.com/library/category/code/aria" title="https://yaccessibilityblog.com/library/category/code/aria">Yahoo! Accessibility</a></p>
    <h3 id="Filing_Bugs">버그 모음</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">File ARIA bugs on browsers, screen readers, and JavaScript libraries</a>.</p>
    <h3 id="Examples">예제</h3>
    <dl>
     <dt>
      <a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases" title="en-US/docs/ARIA/examples">ARIA Examples Library</a></dt>
     <dd>
      A set of barebones example files which are easy to learn from.</dd>
     <dt>
      <span class="external">Accessible JS Widget Library Demos</span></dt>
     <dd>
      <a class="external" href="https://dojotoolkit.org/widgets" title="https://dojotoolkit.org/widgets">Dojo</a>, <a class="external" href="https://hanshillen.github.com/jqtest/" title="https://hanshillen.github.com/jqtest/">jQuery</a>,&nbsp;<a class="external" href="https://wiki.fluidproject.org/display/fluid/Components" title="https://wiki.fluidproject.org/display/fluid/Components">Fluid</a>, <a class="external" href="https://yuilibrary.com/gallery/" title="https://yuilibrary.com/gallery/">YUI</a></dd>
    </dl>
    <dl>
     <dt>
      <a class="external" href="https://mail.yahoo.com" title="https://mail.yahoo.com">Yahoo! Mail</a></dt>
     <dd>
      Yahoo! puts it all together with Yahoo! Mail, a web app that almost looks like a native app. It works very well. As a&nbsp;<a class="external" href="https://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/" title="https://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">review of Yahoo! Mail</a>&nbsp;by screen reader Marco Zehe says, "Keep up the good work!".</dd>
    </dl>
    <dl>
     <dt>
      <a class="external" href="https://search.yahoo.com" title="https://search.yahoo.com">Yahoo! Search</a></dt>
     <dd>
      Yahoo! has done an amazing job of advancing ARIA here, by exercising ARIA's full capabilities and&nbsp;<a class="external" href="https://ycorpblog.com/2011/03/23/searchdirect/" title="https://ycorpblog.com/2011/03/23/searchdirect/">sharing their techniques</a>. Yahoo! Search uses a combination of ARIA landmarks, live regions, and widgets.</dd>
    </dl>
    <h3 id="Standardization_Efforts">표준화를 위한 노력</h3>
    <dl>
     <dt>
      <a class="external" href="https://www.w3.org/WAI/intro/aria.php" title="https://www.w3.org/WAI/intro/aria.php">WAI-ARIA Activities Overview at W3C</a></dt>
     <dd>
      Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)</dd>
     <dt>
      <a class="external" href="https://www.w3.org/TR/wai-aria/" title="https://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></dt>
     <dd>
      The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.</dd>
     <dt>
      <a class="external" href="https://www.w3.org/WAI/PF/aria-practices/" title="https://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt>
     <dd>
      Like the W3C WAI-ARIA specification, the official best practices represents a future ideal -- a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.<br />
      <br />
      For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.</dd>
     <dt>
      <a class="external" href="https://www.openajax.org/member/wiki/Accessibility" title="https://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt>
     <dd>
      The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.</dd>
     <dt>
      <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">Under Construction: WCAG 2.0 ARIA Techniques</a></dt>
     <dd>
      The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is mostly important when regulations or policies are based on WCAG.</dd>
    </dl>
   </td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <td colspan="2">
    <h3 id="Related_Topics" name="Related_Topics">관련 주제들</h3>
    <dl>
     <dd>
      <a href="/en-US/docs/Accessibility" title="en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></dd>
    </dl>
   </td>
  </tr>
 </tbody>
</table>
<p>&nbsp;</p>