diff options
Diffstat (limited to 'files/ko/web/accessibility')
14 files changed, 1703 insertions, 0 deletions
diff --git a/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html new file mode 100644 index 0000000000..8c53f2148f --- /dev/null +++ b/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -0,0 +1,222 @@ +--- +title: An overview of accessible web applications and widgets +slug: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +--- +<p>웹은 변화하고 있습니다. 페이지 중심의 정적이던 사이트들은 동적으로 변화하고 있고, 데스크톱 웹 어플리케이션들이 JS와 AJAX를 중점으로 사용하며 제작되고 있습니다. 디자이너들은 새로운 위젯들과 컨트롤을 한결같이 JavaScript, HTML, CSS를 조합해서 만들고 있습니다. 이런 변화는 사용성과 반응형 향상에는 극적으로 도움을 주지만, 또 다른 많은 유저들은 접근성 격차로 인해 제약이 발생하는 리스크도 안고 있습니다. JavaScript는 스크린리더 같은 보조기술을 사용하는 유저들이 접근하기 힘들다고 알려져 있었습니다. 하지만 현재는 다양한 사용자가 접근할 수 있는 동적 웹 어플리케이션을 만들 수 있습니다.</p> + +<h2 id="문제">문제</h2> + +<p>대부분의 자바스크립트 개발도구는 데스크톱 인터페이스의 동작을 유사하게 만들 수 있도록 클라이언트-사이드 위젯 라이브러리를 제공하고 있습니다. Slider, Menu bar, Filelist View 등을 JavaScript, CSS, HTML을 이용해서 만들 수 있습니다. HTML4 명세가 나왔을 때는 HTML 태그에서 이런 위젯들의 설명이 제공되지 않았으며, 개발자들은 보통 <div>나 <span>같은 것들을 활용하여 개발하였습니다. 이런 시대의 결과로 데스크톱 위젯들은 충분한 정보를 제공하지 못하였으며 이는 기술적으로 전혀 도움이 되지 않았습니다. 동적 콘텐츠는 이유가 어떻든 스크린을 보지 못하는 사람에게 문제가 되었습니다. 주식 시세 표시 위젯, 트위터 라이브 피드 갱신, 프로그레스바 같은 것들을 보조공학기술(AT)로 인식하지 못하는 경우가 많았습니다. <a href="/en/ARIA" style="line-height: 1.5;" title="ARIA">ARIA</a><span style="line-height: 1.5;">가 필요한 이유가 여기에 있습니다. </span></p> + +<p><em>Example 1: 탭 위젯을 ARIA 레이블링 없이 만든 마크업. 마크업에서 위젯의 폼과 동작에 대해 설명하고 있지 않습니다.</em></p> + +<pre class="brush: html"><code><!-- 탭 위젯을 위한 코드입니다. 어떻습니까? 마크업만 보고서 가늠이 되나요? --> +<ol> + <li id="ch1Tab"> + <a href="#ch1Panel">Chapter 1</a> + </li> + <li id="ch2Tab"> + <a href="#ch2Panel">Chapter 2</a> + </li> + <li id="quizTab"> + <a href="#quizPanel">Quiz</a> + </li> +</ol> + +<div> + <div id="ch1Panel">Chapter 1 content goes here</div> + <div id="ch2Panel">Chapter 2 content goes here</div> + <div id="quizPanel">Quiz content goes here</div> +</div></code></pre> + +<p><em>Example 2: 탭 위젯의 렌더링 화면. 유저는 비주얼로 확인 가능하지만, 보조기술과 같은 기계들은 읽지 못합니다.</em><br> + <img alt="Screenshot of the tabs widget" class="default internal" src="/@api/deki/files/4926/=Tabs_Widget.png"></p> + +<h2 id="ARIA">ARIA</h2> + +<p><strong style="line-height: 1.5;">Accessible Rich Internet Applications(</strong><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>)는 W3C의 <a class="external" href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a>에서 제작하고, 스크린리더 같은 보조기기에서 필요한 정보들을 추가하는 방법을 제공합니다. ARIA는 마크업에서 특별한 속성을 추가하여 개발자들이 위젯의 디테일한 정보를 제공할 때 사용합니다. 동적 웹 어플리케이션에서 찾을 수 있는 데스크톱 스타일 콘트롤과 표준 HTML 태그 사이에 있는 차이를 채우기 위해, ARIA는 친숙한 UI 위젯의 동작 상태(state)와 역할(Role)에 대한 설명을 제공합니다.</p> + +<p>ARIA는 다른 타입의 속성 세개 roles, states, properties를 분할하여 정의하고 있습니다. Roles는 slider, menu bar, dialog와 같은 HTML4에서 사용하지 못하는 위젯을 설명합니다. Properties는 드래그가 가능하다는 것이나, 요소가 필요하다는 것이나, 팝업이 뜨는 것과 같은 위젯의 특징에 대해 설명합니다. State는 요소의 현재 상태에 대해 설명합니다. 이 정보는 보조기기에서 요소의 접근이 불가하거나, 숨겨져 있는 상태라는 것을 명시합니다.</p> + +<p><span style="line-height: 1.5;">ARIA attributes are designed to be interpreted automatically by the browser and translated to the operating system's native accessibility APIs. When ARIA is present, assistive technologies are able to recognize and interact with custom JavaScript controls in the same way that they do with desktop equivalents. This has the potential for providing a much more consistent user experience than was possible in the previous generation of web applications, since assistive technology users can apply all of their knowledge of how desktop applications work when they are using web-based applications.</span></p> + +<p><em>Example 3: Markup for the tabs widget with ARIA attributes added.</em></p> + +<pre class="brush: html"><code><!-- Now *these* are Tabs! --></code> +<code><!-- We've added role attributes to describe the tab list and each tab. --></code> +<code><ol role="tablist"></code> +<code> <li id="ch1Tab" <span style="color: #ff0000;">role="tab"</span>> + <a href="#ch1Panel">Chapter 1</a> + </li> + <li id="ch2Tab" <span style="color: #ff0000;">role="tab"</span>> + <a href="#ch2Panel">Chapter 2</a> + </li> + <li id="quizTab" <span style="color: #ff0000;">role="tab"</span>> + <a href="#quizPanel">Quiz</a> + </li> +</ol> + +<div> + <!-- Notice the role and aria-labelledby attributes we've added to describe these panels. --> + <div id="ch1Panel" <span style="color: #ff0000;">role=”tabpanel” aria-labelledby="ch1Tab"</span>>Chapter 1 content goes here</div> + <div id="ch2Panel" <span style="color: #ff0000;">role=”tabpanel” aria-labelledby="ch2Tab"</span>>Chapter 2 content goes here</div> + <div id="quizPanel" <span style="color: #ff0000;">role=”tabpanel” aria-labelledby="quizTab"</span>>Quiz content goes here</div> +</div></code> +</pre> + +<p>ARIA는 Firefox, Safari, Opera, Chrome 및 Internet Explorer를 포함한 모든 주요 브라우저의 최신 버전에서 지원됩니다. 오픈 소스 NVDA(NonVisual Desktop Access) 및 Orca 스크린 리더와 같은 많은 보조 기술도 ARIA를 지원합니다. 점차적으로 jQuery UI, YUI, Google Closure, Dojo Dijit과 같은 JavaScript 위젯 라이브러리에 ARIA 마크 업도 포함됩니다.</p> + +<h3 id="Presentational_changes">Presentational changes</h3> + +<p>Dynamic presentational changes include using CSS to change the appearance of content (such as a red border around invalid data, or changing the background colour of a checked checkbox), as well as showing or hiding content.</p> + +<h4 id="State_changes">State changes</h4> + +<p>ARIA provides attributes for declaring the current state of a UI widget. Examples include (but are certainly not limited to):</p> + +<ul> + <li><strong>aria-checked</strong>: indicates the state of a checkbox or radio button</li> + <li><strong>aria-disabled</strong>: indicates that an element is visible, but not editable or otherwise operable</li> + <li><strong>aria-grabbed</strong>: indicates the 'grabbed' state of an object in a drag-and-drop operation</li> +</ul> + +<p>(For a full list of ARIA states, consult the <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties" title="http://www.w3.org/TR/wai-aria/states_and_properties">ARIA list of states and properties</a>.)</p> + +<p>Developers should use ARIA states to indicate the state of UI widget elements and use CSS attribute selectors to alter the visual appearance based on the state changes (rather than using script to change a class name on the element).</p> + +<p>The Open Ajax Alliance website provides <a class="external" href="http://www.oaa-accessibility.org/example/25/" title="http://www.oaa-accessibility.org/example/25/">an example of CSS attribute selectors based on ARIA states</a>. The example shows a WYSIWYG editor interface with a dynamic menu system. Items currently selected in a menu, such as the font face, are visually distinguished from other items. The relevant parts of the example are explained below.</p> + +<p>In this example, the HTML for a menu has the form shown in Example 1a. Note how, on lines 7 and 13, the <strong>aria-checked</strong> property is used to declare the selection state of the menu items.</p> + +<p><em>Example 1a. HTML for a selectable menu (adapted from <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> + +<pre class="deki-transform"><ul id="fontMenu" class="menu" role="menu" aria-hidden="true"> + <li id="sans-serif" + class="menu-item" + role="menuitemradio" + tabindex="-1" + aria-controls="st1" + aria-checked="true">Sans-serif</li> + <li id="serif" + class="menu-item" + role="menuitemradio" + tabindex="-1" + aria-controls="st1" + aria-checked="false">Serif</li> + ... +</pre> + +<p>The CSS that is used to alter the visual appearance of the selected item is shown in Example 1b. Note that there is no custom classname used, only the status of the <strong>aria-checked</strong> attribute on line 1.</p> + +<p><em>Example 1b. Attribute-based selector for indicating state <em>(from <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></em></p> + +<pre class="deki-transform">li[aria-checked="true"] { + font-weight: bold; + background-image: url('images/dot.png'); + background-repeat: no-repeat; + background-position: 5px 10px; +} +</pre> + +<p>The JavaScript to update the <strong>aria-checked</strong> property has the form shown in Example 1c. Note that the script only updates the <strong>aria-checked</strong> attribute (lines 3 and 8); it does not need to also add or remove a custom classname.</p> + +<p><em>Example 1c. JavaScript to update the aria-checked attribute </em><em> <em>(based on <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>)</em></em><em><em><em>.</em></em></em></p> + +<pre class="deki-transform">var processMenuChoice = function(item) { + // 'check' the selected item + item.setAttribute('aria-checked', 'true'); + // 'un-check' the other menu items + var sib = item.parentNode.firstChild; + for (; sib; sib = sib.nextSibling ) { + if ( sib.nodeType === 1 && sib !== item ) { + sib.setAttribute('aria-checked', 'false'); + } + } +}; +</pre> + +<h4 id="Visibility_changes">Visibility changes</h4> + +<p>When content visibility is changed (i.e. an element is hidden or shown), developers should change the <strong>aria-hidden</strong> property value. The techniques described above should be used to declare CSS to visually hide an element using <code>display:none</code>.</p> + +<p>The Open Ajax Alliance website provides <a class="external" href="http://www.oaa-accessibility.org/example/39/" title="http://www.oaa-accessibility.org/example/39/">an example of a tooltip that uses <strong>aria-hidden</strong> to control the visibility of the tooltip</a>. The example shows a simple web form with tooltips containing instructions associated with the entry fields. The relevant parts of the example are explained below.</p> + +<p>In this example, the HTML for the tooltip has the form shown in Example 2a. Line 9 sets the <strong>aria-hidden</strong> state to <code>true</code>.</p> + +<p><em>Example 2a. HTML for a tooltip (adapted from <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> + +<pre class="deki-transform"><div class="text"> + <label id="tp1-label" for="first">First Name:</label> + <input type="text" id="first" name="first" size="20" + aria-labelledby="tp1-label" + aria-describedby="tp1" + aria-required="false" /> + <div id="tp1" class="tooltip" + role="tooltip" + aria-hidden="true">Your first name is a optional</div> +</div> +</pre> + +<p>The CSS for this markup is shown in Example 2b. Note that there is no custom classname used, only the status of the <strong>aria-hidden</strong> attribute on line 1.</p> + +<p>Example 2b. <em>Attribute-based selector for indicating state <em>(from <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></em></p> + +<pre class="deki-transform">div.tooltip[aria-hidden="true"] { + display: none; +} +</pre> + +<p>The JavaScript to update the <strong>aria-hidden</strong> property has the form shown in Example 2c. Note that the script only updates the <strong>aria-</strong><strong>hidden</strong> attribute (line 2); it does not need to also add or remove a custom classname.</p> + +<p><em>Example 2c. JavaScript to update the aria-checked attribute </em><em> <em>(based on <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>)</em></em><em><em><em>.</em></em></em></p> + +<pre class="deki-transform">var showTip = function(el) { + el.setAttribute('aria-hidden', 'false'); +}</pre> + +<h3 id="Role_changes">Role changes</h3> + +<div class="note">Under construction</div> + +<p>ARIA allows developers to declare a semantic role for an element that otherwise offers incorrect or no semantics. For example, when an unordered list is used to create a menu, the {{ HTMLElement("ul") }} should be given a <strong>role</strong> of <code>menubar</code> and each {{ HTMLElement("li") }} should be given a <strong>role</strong> of <code>menuitem</code>.</p> + +<p>The <strong>role</strong> of an element should not change. Instead, remove the original element and replace it with an element with the new <strong>role</strong>.</p> + +<p>For example, consider an "inline edit" widget: a component that allows users to edit a piece of text in place, without switching contexts. This component has a "view" mode, in which the text is not editable, but is activatable, and an "edit" mode, in which the text can be edited. A developer might be tempted to implement the "view" mode using a read-only text {{ HTMLElement("input") }} element and setting its ARIA <strong>role</strong> to <code>button</code>, then switching to "edit" mode by making the element writable and removing the <strong>role</strong> attribute in "edit" mode (since {{ HTMLElement("input") }} elements have their own role semantics).</p> + +<p>Do not do this. Instead, implement the "view" mode using a different element altogether, such as a {{ HTMLElement("div") }} or {{ HTMLElement("span") }} with a <strong>role</strong> of <code>button</code>, and the "edit" mode using a text {{ HTMLElement("input") }} element.</p> + +<h3 id="Asynchronous_content_changes">Asynchronous content changes</h3> + +<div class="note">Under construction. See also <a href="/en/ARIA/Live_Regions" title="Live Regions">Live Regions</a></div> + +<h2 id="Keyboard_navigation">Keyboard navigation</h2> + +<p>Often times developers overlook support for the keyboard when they create custom widgets. To be accessible to a variety of users, all features of a web application or widget should also be controllable with the keyboard, without requiring a mouse. In practice, this usually involves following the conventions supported by similar widgets on the desktop, taking full advantage of the Tab, Enter, Spacebar, and arrow keys.</p> + +<p>Traditionally, keyboard navigation on the web has been limited to the Tab key. A user presses Tab to focus each link, button, or form on the page in a linear order, using Shift-Tab to navigate backwards. It's a one-dimensional form of navigation—forward and back, one element at a time. On fairly dense pages, a keyboard-only user often has to press the Tab key dozens of times before they can access the section they need. Implementing desktop-style keyboard conventions on the web has the potential to significantly speed up navigation for many users.</p> + +<p>Here's a summary of how keyboard navigation should work in an ARIA-enabled web application:</p> + +<ul> + <li>The Tab key should provide focus to the widget as a whole. For example, tabbing to a menu bar should put focus on the menu's first elem</li> + <li>The arrow keys should allow for selection or navigation within the widget. For example, using the left and right arrow keys should move focus to the previous and next menu items</li> + <li>When the widget is not inside a form, both the Enter and Spacebar keys should select or activate the control</li> + <li>Within a form, the Spacebar key should select or activate the control, while the Enter key should submit the form's default action.</li> + <li>If in doubt, mimic the standard desktop behavior of the control you are creating.</li> +</ul> + +<p>So, for the Tabs widget example above, the user should be able to navigate into and out of the widget's container (the <ol> in our markup) using the Tab and Shift-Tab keys. Once keyboard focus is inside the container, the arrow keys should allow the user to navigate between each tab (the <li> elements). From here, conventions vary from platform to platform. On Windows, the next tab should automatically be activated when the user presses the arrow keys. On Mac OS X, the user can press either Enter or the Spacebar to activate the next tab. An in-depth tutorial for creating <a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a> describes how to implement this behavior with JavaScript.</p> + +<p>For more detail about desktop-style keyboard navigation conventions, a comprehensive <a class="external" href="http://dev.aol.com/dhtml_style_guide" title="http://dev.aol.com/dhtml_style_guide">DHTML style guide</a> is available. It provides an overview of how keyboard navigation should work for each type of widget supported by ARIA. The W3C also offers a helpful <a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">ARIA Best Practices</a> document that includes keyboard navigation and shortcut conventions for a variety of widgets. </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en/ARIA" title="ARIA">ARIA</a></li> + <li><a href="/en/Accessibility/Web_applications_and_ARIA_FAQ" title="Web applications and ARIA FAQ">Web applications and ARIA FAQ</a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></li> + <li><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">WAI-ARIA Best Practices</a></li> + <li><a class="external" href="http://dev.aol.com/dhtml_style_guide" title="http://dev.aol.com/dhtml_style_guide">DHTML Style Guide</a></li> +</ul> diff --git a/files/ko/web/accessibility/aria/aria_live_regions/index.html b/files/ko/web/accessibility/aria/aria_live_regions/index.html new file mode 100644 index 0000000000..c609e9698f --- /dev/null +++ b/files/ko/web/accessibility/aria/aria_live_regions/index.html @@ -0,0 +1,255 @@ +--- +title: ARIA live regions +slug: Web/Accessibility/ARIA/ARIA_Live_Regions +translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions +--- +<p>JavaScript를 이용하면, 전체 페이지를 다시 로드할 필요 없이 페이지의 일부를 동적으로 변경하는 것이 가능합니다. 예를 들면, 검색 결과 리스트를 즉시 업데이트 하거나, 사용자 상호 작용이 필요 없는 경고 또는 알림을 표시합니다. 이러한 변경사항들은 일반적으로 페이지를 볼 수 있는 사용자에게 시각적으로 분명하게 보이지만, 보조과학기술 사용자들에겐 분명하지 않을 수 있습니다. ARIA live regions은 이 간격을 메우고, 보조과학기술에 의해 발표될 수 있는 방식으로 동적 컨텐츠 변화들을 프로그래밍 방식으로 노출할 수 있는 방법을 제공합니다.</p> + +<div class="note"> +<p><strong>Note</strong>: 보조과학기술은 live region 컨텐츠에 <em>동적인 </em>변화를 발표할 것입니다.</p> + +<p>Including an <code>aria-live</code> attribute or a specialized live region <code>role</code> (such as <code>role="alert"</code>) on the element you want to announce changes to works as long as you add the attribute before the changes occur — either in the original markup, or dynamically using JavaScript.</p> +</div> + +<h2 id="간단한_live_regions"><span class="mw-headline" id="Live_Region_State">간단한 live regions</span></h2> + +<p>페이지를 재로드 없이 업데이트 되는 동적 컨텐츠는 일반적으로 영역 또는 위젯입니다. 대화형 컨텐츠가 아닌 단순 컨텐츠 변경은 live regions 으로 표시해야만 합니다. 아래는 관련 ARIA live region 속성에 관한 리스트와 설명입니다.</p> + +<ol> + <li><code><strong>aria-live</strong></code>: <code>aria-live=POLITENESS_SETTING</code>는 스크린 리더가 live regions에 대한 업데이트를 처리할때 우선 순위를 설정하는 데 사용되며, 가능한 세팅으로 <code>off</code>, <code>polite<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">, </span></font></code><code>assertive</code>가 있습니다. 기본 설정은 <code>off</code>입니다. 이 속성은 단연코 가장 중요합니다.</li> + <li> + <p class="comment"><code><strong>aria-controls</strong></code>: The <code>aria-controls=[IDLIST]</code> is used to associate a control with the regions that it controls. Regions are identified just like an <code>id</code> in a <code>div</code>, and multiple regions can be associated with a control using a space, e.g. <code>aria-controls="myRegionID1 myRegionsID2"</code>.</p> + + <div class="warning">Not known if the aria-controls aspect of live regions is implemented in current ATs, or which. Needs research.</div> + </li> +</ol> + +<p>Normally, only <code>aria-live="polite"</code> is used. Any region which receives updates that are important for the user to receive, but not so rapid as to be annoying, should receive this attribute. The screen reader will speak changes whenever the user is idle.</p> + +<p>For regions which are not important, or would be annoying because of rapid updates or other reasons, silence them with <code>aria-live="off"</code>.</p> + +<h3 id="Dropdown_box_updates_useful_onscreen_information">Dropdown box updates useful onscreen information</h3> + +<p>A website specializing in providing information about planets provides a dropdown box. When a planet is selected from the dropdown, a region on the page is updated with information about the selected planet.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><fieldset> + <legend>Planet information</legend> + <label for="planetsSelect">Planet:</label> + <select id="planetsSelect" aria-controls="planetInfo"> + <option value="">Select a planet&hellip;</option> + <option value="mercury">Mercury</option> + <option value="venus">Venus</option> + <option value="earth">Earth</option> + <option value="mars">Mars</option> + </select> + <button id="renderPlanetInfoButton">Go</button> +</fieldset> + +<div role="region" id="planetInfo" aria-live="polite"> + <h2 id="planetTitle">No planet selected</h2> + <p id="planetDescription">Select a planet to view its description</p> +</div> + +<p><small>Information courtesy <a href="https://en.wikipedia.org/wiki/Solar_System#Inner_Solar_System">Wikipedia</a></small></p> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">const PLANETS_INFO = { + mercury: { + title: 'Mercury', + description: 'Mercury is the smallest and innermost planet in the Solar System. It is named after the Roman deity Mercury, the messenger to the gods.' + }, + + venus: { + title: "Venus", + description: 'Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.' + }, + + earth: { + title: "Earth", + description: 'Earth is the third planet from the Sun and the only object in the Universe known to harbor life.' + }, + + mars: { + title: "Mars", + description: 'Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System after Mercury. In English, Mars carries a name of the Roman god of war, and is often referred to as the "Red Planet".' + } +}; + +function renderPlanetInfo(planet) { + const planetTitle = document.querySelector('#planetTitle'); + const planetDescription = document.querySelector('#planetDescription'); + + if (planet in PLANETS_INFO) { + planetTitle.textContent = PLANETS_INFO[planet].title; + planetDescription.textContent = PLANETS_INFO[planet].description; + } else { + planetTitle.textContent = 'No planet selected'; + planetDescription.textContent = 'Select a planet to view its description'; + } +} + +const renderPlanetInfoButton = document.querySelector('#renderPlanetInfoButton'); + +renderPlanetInfoButton.addEventListener('click', event => { + const planetsSelect = document.querySelector('#planetsSelect'); + const selectedPlanet = planetsSelect.options[planetsSelect.selectedIndex].value; + + renderPlanetInfo(selectedPlanet); +}); +</pre> + +<p>{{EmbedLiveSample('Dropdown_box_updates_useful_onscreen_information', '', 350)}}</p> + +<p>As the user selects a new planet, the information in the live region will be announced. Because the live region has <code>aria-live="polite"</code>, the screen reader will wait until the user pauses before announcing the update. Thus, moving down in the list and selecting another planet will not announce updates in the live region. Updates in the live region will only be announced for the planet finally chosen.</p> + +<p>Here is a screenshot of VoiceOver on Mac announcing the update (via subtitles) to the live region:</p> + +<p><img alt="A screenshot of VoiceOver on Mac announcing the update to a live region. Subtitles are shown in the picture." src="https://mdn.mozillademos.org/files/15815/Web_Accessibility_ARIA_ARIA_Live_Regions.png" style="height: 573px; width: 800px;"></p> + +<h2 id="Preferring_specialized_live_region_roles">Preferring specialized live region roles</h2> + +<p>In the following well-known predefined cases it is better to use a specific provided "live region role":</p> + +<table style="width: 100%;"> + <thead> + <tr> + <th scope="col">Role</th> + <th scope="col">Description</th> + <th scope="col">Compatibility Notes</th> + </tr> + </thead> + <tbody> + <tr> + <td>log</td> + <td>Chat, error, game or other type of log</td> + <td>To maximize compatibility, add a redundant <code>aria-live="polite"</code> when using this role.</td> + </tr> + <tr> + <td>status</td> + <td>A status bar or area of the screen that provides an updated status of some kind. Screen reader users have a special command to read the current status.</td> + <td>To maximize compatibility, add a redundant <code>aria-live="polite"</code> when using this role.</td> + </tr> + <tr> + <td>alert</td> + <td>Error or warning message that flashes on the screen. Alerts are particularly important for client side validation notices to users. (TBD: link to ARIA form tutorial with aria info)</td> + <td>To maximize compatibility, some people recommend adding a redundant <code>aria-live="assertive"</code> when using this role. However, adding both <code>aria-live</code> and <code>role="alert"</code> causes double speaking issues in VoiceOver on iOS.</td> + </tr> + <tr> + <td>progressbar</td> + <td>A hybrid between a widget and a live region. Use this with aria-valuemin, aria-valuenow and aria-valuemax. (TBD: add more info here).</td> + <td></td> + </tr> + <tr> + <td>marquee</td> + <td>for text which scrolls, such as a stock ticker.</td> + <td></td> + </tr> + <tr> + <td>timer</td> + <td>or any kind of timer or clock, such as a countdown timer or stopwatch readout.</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Advanced_live_regions">Advanced live regions</h2> + +<p>(TBD: more granular information on the support of the individual attributes with combinations of OS/Browser/AT).</p> + +<p>General support for Live Regions was added to JAWS on version 10.0. In Windows Eyes supports Live Regions since version 8.0 "for use outside of Browse Mode for Microsoft Internet Explorer and Mozilla Firefox". NVDA added some basic support for Live Regions for Mozilla Firefox back in 2008 and was improved in 2010 and 2014. In 2015, basic support was also added for Internet Explorer (MSHTML).</p> + +<p>The Paciello Group has some <a href="https://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/">information about the state of the support of Live Regions </a>(2014). Paul J. Adam has researched<a href="http://pauljadam.com/demos/aria-atomic-relevant.html"> the support of Aria-Atomic and Aria-Relevant</a> in particular. </p> + +<ol> + <li><code><strong>aria-atomic</strong></code>: The <code>aria-atomic=BOOLEAN</code> is used to set whether or not the screen reader should always present the live region as a whole, even if only part of the region changes. The possible settings are: <code>false</code> or <code>true</code>. The default setting is <code>false</code>.</li> + <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute"><strong>aria-relevant</strong></a></code>: The <code>aria-relevant=[LIST_OF_CHANGES]</code> is used to set what types of changes are relevant to a live region. The possible settings are one or more of: <code>additions</code>, <code>removals</code>, <code>text</code>, <code>all</code>. The default setting is: <code>additions text</code>.</li> + <li><code><strong>aria-labelledby</strong></code>: The <code>aria-labelledby=[IDLIST]</code> is used to associate a region with its labels, similar to aria-controls but instead associating labels to the region. and label identifiers are separated with a space.</li> + <li><code><strong>aria-describedby</strong></code>: The <code>aria-describedby=[IDLIST]</code> is used to associate a region with its descriptions, similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space.</li> +</ol> + +<h3 id="Advanced_use_case_Clock"><span class="mw-headline" id="Use_Case:_Clock">Advanced use case: Clock</span></h3> + +<p>As an illustration of <code>aria-atomic</code>, consider a site with a simple clock, showing hours and minutes. The clock is updated each minute, with the new remaining time simply overwriting the current content.</p> + +<pre class="notranslate"><div id="clock" role="timer" aria-live="polite"></div> +</pre> + +<pre class="brush: js notranslate">/* basic JavaScript to update the clock */ + +setInterval(function() { + var now = new Date(); + document.getElementById('clock').innerHTML = "Time: " + now.getHours() + ":" + ("0"+now.getMinutes()).substr(-2); +}, 60000); +</pre> + +<p>The first time the function executes, the entirety of the string that is added will be announced. On subsequent calls, only the parts of the content that changed compared to the previous content will be announced. For instance, when the clock changes from "17:33" to "17:34", assistive technologies will only announce "4", which won't be very useful to users.</p> + +<p>One way around this would be to first clear the contents of the live region, and then inject the new content. However, this can sometimes be unreliable, as it's dependent on the exact timing of these two updates.</p> + +<p><code>aria-atomic="true"</code> ensures that each time the live region is updated, the entirety of the content is announced in full (e.g. "Time: 17:34").</p> + +<pre class="notranslate"><div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div> +</pre> + +<div class="note"> +<p><strong>Note</strong>: As observed, setting/updating the innerHTML again would cause the whole text to be read again, whether or not you set aria-atomic="true", so the above Clock example does not work as expected.</p> +</div> + +<p class="syntaxbox">A working example of a simple year control for better understanding:</p> + +<pre class="syntaxbox notranslate"><div id="date-input"> + <label>Year: + <input type="text" id="year" value="1990" onblur="change(event)"/> + </label> +</div> + +<div id="date-output" aria-live="polite"> + The set year is: + <span id="year-output">1990</span> +</div></pre> + +<p class="syntaxbox"></p> + +<pre class="syntaxbox notranslate">function change(event) { + var yearOut = document.getElementById("year-output"); + switch (event.target.id) { + case "year": + yearOut.innerHTML = event.target.value; + break; + default: + return; + } +};</pre> + +<p class="syntaxbox"></p> + +<p>Without <code>aria-atomic="true" </code>the screenreader announces only the changed value of year.</p> + +<p>With <code>aria-atomic="true"</code>, the screenreader announces "The set year is: <em>changedvalue</em>"</p> + +<h3 id="Advanced_use_case_Roster"><span class="mw-headline" id="Use_Case:_Roster">Advanced use case: Roster</span></h3> + +<p>A chat site would like to display a list of users currently logged in. Display a list of users where a user's log-in and log-out status will be reflected dynamically (without a page reload).</p> + +<pre class="notranslate"><ul id="roster" aria-live="polite" aria-relevant="additions removals"> + <!-- use JavaScript to add remove users here--> +</ul> +</pre> + +<p>Breakdown of ARIA live properties:</p> + +<ul> + <li><code>aria-live="polite"</code> indicates that the screen reader should wait until the user is idle before presenting updates to the user. This is the most commonly used value, as interrupting the user with "assertive" might interrupt their flow.</li> + <li><code>aria-atomic</code> is not set (<code>false</code> by default) so that only the added or removed users should be spoken and not the entire roster each time.</li> + <li><code>aria-relevant="additions removals"</code> ensures that both users added or removed to the roster will be spoken.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles">ARIA roles</a></li> +</ul> diff --git a/files/ko/web/accessibility/aria/aria_techniques/index.html b/files/ko/web/accessibility/aria/aria_techniques/index.html new file mode 100644 index 0000000000..c628a228e1 --- /dev/null +++ b/files/ko/web/accessibility/aria/aria_techniques/index.html @@ -0,0 +1,213 @@ +--- +title: 'ARIA 사용하기: 규칙, 상태, 속성' +slug: Web/Accessibility/ARIA/ARIA_Techniques +tags: + - ARIA + - Accessibility + - Overview + - Reference +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +--- +<p class="summary">ARIA defines semantics that can be applied to elements, with these divided into <strong>roles</strong> (defining a type of user interface element) and <strong>states</strong> and <strong>properties</strong> that are supported by a role. Authors must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element). Addition of ARIA semantics only exposes extra information to a browser's accessibility API, and does not affect a page's DOM.</p> + +<h2 id="Roles">Roles</h2> + +<h3 id="Widget_roles">Widget roles</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role" title="Using the button role">Button</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role" title="Using the checkbox role">Checkbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">Gridcell</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="Using the Link role">Link</a></li> + <li>Menuitem</li> + <li>Menuitemcheckbox</li> + <li>Menuitemradio</li> + <li>Option</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radio</a></li> + <li>Scrollbar</li> + <li>Searchbox</li> + <li>Separator (when focusable)</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li> + <li>Spinbutton</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role">Switch</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">Tab</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">Tabpanel</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">Textbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">Treeitem</a></li> +</ul> +</div> + +<h3 id="Composite_roles">Composite roles</h3> + +<p>The techniques below describe each composite role as well as their required and optional child roles.</p> + +<div class="index"> +<ul> + <li>Combobox</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role">Grid</a> (including <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a>, <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a>, rowheader, columnheader roles)</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox </a> (including option role)</li> + <li>Menu</li> + <li>Menubar</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radiogroup (see radio role)</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">Tablist</a> (including <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a> and <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a> roles)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">Tree</a></li> + <li>Treegrid</li> +</ul> +</div> + +<h3 id="Document_structure_roles">Document structure roles</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Application_Role">Application</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Article_Role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">Article</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Cell_Role">Cell</a></li> + <li>Columnheader</li> + <li>Definition</li> + <li>Directory</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Document_Role">Document</a></li> + <li>Feed</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Figure_Role">Figure</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">Group</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role">Heading</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img">Img</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">List</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Listitem_role">Listitem</a></li> + <li>Math</li> + <li>None</li> + <li>Note</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">Presentation</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role">Row</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">Rowgroup</a></li> + <li>Rowheader</li> + <li>Separator</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role">Table</a></li> + <li>Term</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">Textbox</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">Toolbar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">Tooltip</a></li> +</ul> +</div> + +<h3 id="Landmark_roles">Landmark roles</h3> + +<div class="index"> +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">Banner</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">Complementary</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">Contentinfo</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">Form</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role">Main</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">Navigation</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role">Region</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">Search</a></li> +</ul> +</div> + +<h3 id="Live_Region_Roles">Live Region Roles</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role">Alert</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="Using the Log role">Log</a></li> + <li>Marquee</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">Status</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/ARIA_timer_role">Timer</a></li> +</ul> +</div> + +<h3 id="Window_Roles">Window Roles</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">Alertdialog</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role">Dialog</a></li> +</ul> +</div> + +<h2 id="States_and_properties">States and properties</h2> + +<h3 id="Widget_attributes">Widget attributes</h3> + +<div class="index"> +<ul> + <li>aria-autocomplete</li> + <li>aria-checked</li> + <li>aria-current</li> + <li>aria-disabled</li> + <li>aria-errormessage</li> + <li>aria-expanded</li> + <li>aria-haspopup</li> + <li>aria-hidden</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li> + <li>aria-level</li> + <li>aria-modal</li> + <li>aria-multiline</li> + <li>aria-multiselectable</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li> + <li>aria-placeholder</li> + <li>aria-pressed</li> + <li>aria-readonly</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li> + <li>aria-selected</li> + <li>aria-sort</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li> +</ul> +</div> + +<h3 id="Live_region_attributes">Live region attributes</h3> + +<div class="index"> +<ul> + <li>aria-live</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute">aria-relevant</a></li> + <li>aria-atomic</li> + <li>aria-busy</li> +</ul> +</div> + +<h3 id="Drag_drop_attributes">Drag & drop attributes</h3> + +<div class="index"> +<ul> + <li>aria-dropeffect</li> + <li>aria-dragged</li> +</ul> +</div> + +<h3 id="Relationship_attributes">Relationship attributes</h3> + +<div class="index"> +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li> + <li>aria-colcount</li> + <li>aria-colindex</li> + <li>aria-colspan</li> + <li>aria-controls</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li> + <li>aria-details</li> + <li>aria-errormessage</li> + <li>aria-flowto</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li> + <li>aria-owns</li> + <li>aria-posinset</li> + <li>aria-rowcount</li> + <li>aria-rowindex</li> + <li>aria-rowspan</li> + <li>aria-setsize</li> +</ul> +</div> + +<h3 id="MicrosoftEdge-specific_properties">MicrosoftEdge-specific properties</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Web/API/x-ms-aria-flowfrom">x-ms-aria-flowfrom</a> {{Non-standard_Inline}}</li> +</ul> +</div> diff --git a/files/ko/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/ko/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html new file mode 100644 index 0000000000..d667416f9d --- /dev/null +++ b/files/ko/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html @@ -0,0 +1,66 @@ +--- +title: aria-label 속성 사용 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +tags: + - ARIA + - Accessibility + - aria-label +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +--- +<p><span class="seoSummary"><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" rel="external" title="https://www.w3.org/TR/wai-aria/#aria-label"><code>aria-label</code></a> 속성은 현재 요소에 레이블을 정의하기 위해서 사용합니다. 텍스트 레이블이 화면에 표시되지 않을 때에 사용하세요. 만약에 요소에 레이블을 정의하는 화면에 보이는 텍스트가 있다면 <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a>을 대신 사용하세요</span></p> + +<p>이 속성은 일반적인 HTML 요소와 함께 사용할 수 있습니다. ARIA <code>role</code> 이 적용된 요소에만 한정되지 않습니다.</p> + +<h3 class="editable" id="값">값</h3> + +<p>문자열</p> + +<h3 class="editable" id="사용자_에이전트와_보조도구에_대한_영향"><span>사용자 에이전트와 보조도구에 대한 영향</span></h3> + +<div class="editIcon"> +<h3 class="editable" id="sect1"><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute?action=edit&sectionId=3" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> +</div> + +<div class="note"><strong>참고:</strong> 보조기기가 이 기술을 처리하는 방법에 대한 의견에는 차이가 있을 수 있습니다. 위에서 제공하는 정보는 그러한 의견 중 하나일 뿐 규범이 아닙니다. </div> + +<h2 id="예">예</h2> + +<div id="section_5"> +<h4 id="예_1_다수의_레이블">예 1: 다수의 레이블</h4> + +<p>아래의 예제에서 버튼은 X가 가운데있는 전형적인 "닫기" 버튼처럼 스타일됩니다. 버튼의 목적이 대화상자를 닫는 것임을 암시하는 것이 없으므로 보조기기에 레이블을 제공하기 위해 <code>aria-label</code> 를 사용합니다.</p> +</div> + +<pre class="deki-transform"><span class="tag"><button aria-label=<span class="str">"Close"</span> onclick=<span class="str">"myDialog.close()"</span>></span>X<span class="tag"></button></span> +</pre> + +<h4 id="동작하는_예">동작하는 예:</h4> + +<p> </p> + +<h3 id="주의">주의</h3> + +<ul> + <li>레이블에 대한 가장 일반적인 접근성 API 매핑은 접근 가능한 이름 프로퍼티입니다.</li> + <li><code>aria-label</code>이 포함된 속성을 대부분의 자동 번역 서비스는 무시합니다. </li> +</ul> + +<h3 id="Used_by_ARIA_roles">Used by ARIA roles</h3> + +<p>베이스 마크업의 모든 요소</p> + +<h3 id="관련된_ARIA_기술">관련된 ARIA 기술</h3> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> +</ul> + +<h3 id="적합성">적합성</h3> + +<p class="comment">TBD: 일반적인 UA와 AT 제품 조합을 위한 서포트 정보를 추가합니다.</p> + +<h3 id="추가_리소스">추가 리소스</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" title="https://www.w3.org/TR/wai-aria/#aria-label">WAI-ARIA specification for aria-label</a></li> +</ul> diff --git a/files/ko/web/accessibility/aria/forms/alerts/index.html b/files/ko/web/accessibility/aria/forms/alerts/index.html new file mode 100644 index 0000000000..072f9443b7 --- /dev/null +++ b/files/ko/web/accessibility/aria/forms/alerts/index.html @@ -0,0 +1,146 @@ +--- +title: Alerts +slug: Web/Accessibility/ARIA/forms/alerts +tags: + - ARIA + - Forms + - Web + - 접근성 +translation_of: Web/Accessibility/ARIA/forms/alerts +--- +<h2 id="문제점">문제점</h2> + +<p>엑세스 가능한 오류 검사를 포함하고 싶은 폼, 예를 들어 콘택트 폼이 있습니다. 자주 있는 문제점으로는 Email이 유효하지 않거나, 이름 필드에 성이나 이름이 포함되지 않은 것이 있습니다.</p> + +<h2 id="폼">폼</h2> + +<p>우선 <a href="https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/forms/Basic_form_hints#Required_and_invalid_fields" title="/en/Web/Accessibility/ARIA/forms/Basic_form_hints"><code>aria-required</code> 기술</a>을 읽지 않았다면 먼저 읽어주세요. 여기서는 그것의 확장된 내용을 다룹니다. </p> + +<p>여기에 샘플 폼이 있습니다:</p> + +<pre class="brush: html"> <form method="post" action="post.php"> + <fieldset> + <legend>Please enter your contact details</legend> + <label for="name">Your name (required):</label> + <input name="name" id="name" aria-required="true"/> + <br /> + <label for="email">E-Mail address (required):</label> + <input name="email" id="email" aria-required="true"/> + <br /> + <label for="website">Website (optional):</label> + <input name="website" id="website"/> + </fieldset> + <label for="message">Please enter your message (required):</label> + <br /> + <textarea name="message" id="message" rows="5" cols="80" + aria-required="true"></textarea> + <br /> + <input type="submit" name="submit" value="Send message"/> + <input type="reset" name="reset" value="Reset form"/> + </form> +</pre> + +<h2 id="유효성_검사_및_사용자에게_알림"><span class="mw-headline" id="Checking_for_validity_and_notifying_the_user">유효성 검사 및 사용자에게 알림</span></h2> + +<p>폼 유효성 검사는 여러 단계로 구성됩니다. :</p> + +<ol> + <li>Email 또는 입력한 이름이 유효한지 확인하십시오. 각 필드는 유효성 검사를 통과하기 위해 충족되어야 하는 일련의 기준이 있습니다. 이 예제를 단순화하기 위해, Email에 '@' 마크가 있는지 이름에는 적어도 하나의 문자가 포함되어 있는지를 확인할 것입니다. </li> + <li>만약 위의 기준이 충족되지 않으면, 필드의 <code>aria-invalid</code> 속성에 “<code>true</code>” 값이 주어질 것입니다.</li> + <li>기준이 충족되지 않으면 경고를 통해 사용자에게 알립니다. JavaScript의 ‘<code>alert</code>’ function을 사용하는 대신 아림을 위해 간단한 WAI-ARIA 위젯을 사용할 것입니다. 이것은 사용자에게 에러를 알려주지만, Javascript의 기본 ‘<code>alert</code>’ function의 “<code>onblur</code>”로 인해 발생하는 포커스 손실 없이 계속해서 폼을 수정할 수 있게 해줍니다. </li> +</ol> + +<p>아래의 예제는 “<code>head</code>” 의 닫는 태그를 삽입하는 Javascript 코드입니다.:</p> + +<pre class="brush: js"> <script type="application/javascript"> + function removeOldAlert() + { + var oldAlert = document.getElementById("alert"); + if (oldAlert){ + document.body.removeChild(oldAlert); + } + } + + function addAlert(aMsg) + { + removeOldAlert(); + var newAlert = document.createElement("div"); + newAlert.setAttribute("role", "alert"); + newAlert.setAttribute("id", "alert"); + var msg = document.createTextNode(aMsg); + newAlert.appendChild(msg); + document.body.appendChild(newAlert); + } + + function checkValidity(aID, aSearchTerm, aMsg) + { + var elem = document.getElementById(aID); + var invalid = (elem.value.indexOf(aSearchTerm) < 0); + if (invalid) { + elem.setAttribute("aria-invalid", "true"); + addAlert(aMsg); + } else { + elem.setAttribute("aria-invalid", "false"); + removeOldAlert(); + } + } + </script> +</pre> + +<h2 id="checkValidity_함수"><span class="mw-headline" id="The_checkValidity_function"><code>checkValidity</code> 함수</span></h2> + +<p>Javascript에서 폼 유효성 검사에 사용되는 기본 메소드는 <code>checkValidity</code> 함수입니다. 이 메소드는 세 개의 파라미터를 가집니다: 유효성 검사를 할 <code>input</code>의 ID, 유효성을 확인하기 위해 검색할 검색어, alert에 삽입할 에러 메시지입니다.</p> + +<p>유효성을 확인하기 위해, 이 함수는 <code>input</code>의 값 <code>indexOf</code>가 -1보다 큰지 확인합니다. 검색어를 찾을 수 없을 때 <code>-1</code> 혹은 그보다 작은 값을 반환합니다. </p> + +<p>만약에 값이 유효하지 않다면 이 함수는 2가지 작업을 수행합니다. </p> + +<ol> + <li>요소의 <code>aria-invalid</code> 속성을 “<code>true</code>”로 설정합니다. 이 속성은 사용자에게 여기에 유효하지 않은 값이 있다는 것을 알립니다. </li> + <li><code>addAlert</code> 함수를 호출하여 제공된 에러 메시지와 함께 alert을 추가합니다. </li> +</ol> + +<p>검색어가 발견되면 <code>aria-invalid</code> 속성은 “<code>false</code>”로 재설정됩니다. 또한 남아있는 모든 alert가 제거됩니다. </p> + +<h2 id="addAlert_함수"><span class="mw-headline" id="The_addAlert_function"><code>addAlert</code> 함수</span></h2> + +<p>이 함수는 일단 오래된 alert을 제거합니다. 이 함수는 간단합니다. : id가 “<code>alert</code>”인 요소를 찾고, 발견되면 <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/Document_Object_Model">document object model</a>.에서 해당 요소를 제거합니다. </p> + +<p>다음으로 함수는 alert 테스트를 저장할 <code>div</code> 요소를 만듭니다. 그 <code>div</code>요소는 “<code>alert</code>”이라는 ID를 갖습니다. 그리고 “alert”이라는 role을 갖습니다. 이름에 "aria"가 없지만 사실은 ARIA에서 만들어진 것입니다. role이 간소화를 위해 단순히 HTML로 이식된 <a class="external text" href="http://www.w3.org/TR/xhtml-role/" title="XHTML Role Attribute Module">XHTML Role Attribute Module</a>에 기반하기 때문입니다.</p> + +<p>텍스트가 <code>div</code> 요소에 추가되고 <code>div</code> 요소는 문서에 추가됩니다. </p> + +<p>이 <code>div</code> 요소가 나타나면 Firefox는 보조기기에 "alert" 이벤트를 발생시킵니다. 대부분의 스크린 리더는 자동으로 그것을 주워서 읽습니다. 이건 암호 저장 여부를 묻는 Firefox의 알림 표시 줄과 비슷합니다. 방금 만든 alert에는 버튼이 없으므로 단순히 무엇이 문제인지만을 알려줍니다. </p> + +<h2 id="“onblur”_이벤트_수정하기"><span class="mw-headline" id="Adding_the_magic_to_the_.E2.80.9Conblur.E2.80.9D_event">“<code>onblur</code>” 이벤트 수정하기</span></h2> + +<p>이제 남은 것은 이벤트 핸들러를 추가하는 것뿐입니다. 우리는 Email과 이름에 대한 두개의 인풋을 다음과 같이 변경해야합니다. :</p> + +<pre class="brush: html"> <input name="name" id="name" aria-required="true" + onblur="checkValidity('name', ' ', 'Invalid name entered!');"/> + <br /> + <input name="email" id="email" aria-required="true" + onblur="checkValidity('email', '@', 'Invalid e-mail address');"/> +</pre> + +<p><strong>예제 테스트하기</strong></p> + +<p>만약 Firefox 3 와 현재 지원되는 스크린 리더를 사용하고 있다면 다음을 시도해보세요.:</p> + +<ol> + <li>이름에 성만을 입력해보세요. 탭을 하면 유효하지 않은 이름을 입력했다는 알림을 들을 수 있을 겁니다. shift-tab을 눌러서 돌아간 다음 에러를 수정할 수 있습니다. </li> + <li>"@"없이 Email 주소를 입력해보세요. 탭을 해서 필드를 벗어나면 유효하지 않은 Email을 입력했다는 알림을 들을 수 있을 겁니다. </li> +</ol> + +<p>두 경우 모두 필드로 포커스가 돌아가면 스크린 리더는 해당 필드가 유효하지 않음을 알려주어야 합니다. JAWS 9는 이것을 지원하지만, JAWS 8는 지원하지 않습니다. 그렇기때문에 이것은 스크린 리더 버전에 따라서 동작하지 않을 수 있습니다. </p> + +<h2 id="자주_하는_질문">자주 하는 질문</h2> + +<dl> + <dt>Q. 왜 label에 “<code>(required)</code>” 를 넣고 일부 input에 <code>aria-required</code> 속성을 넣었나요?</dt> + <dd>A. 만약 이게 실제 폼이고 아직 ARIA를 지원하지 않는 브라우저에서 사이트를 방문한 경우에도 이것이 필수 입력란임을 알려주는 것이 좋습니다. </dd> + <dt>Q. 왜 유효하지 않은 필드로 자동 포커스되도록 하지 않나요?</dt> + <dd>A. 왜냐하면 Windows API 사양 및 기타 사양에 따라 허용되지 않기 때문입니다. 또한, 사용자 상호작용 없이 포커스를 자주 이동하는 것은 좋지 않습니다. </dd> +</dl> + +<div class="warning">TBD: 이건 다시 생각해봅시다. 개인적으로 키보드 트랩을 발생시키지 않는다면 포커스를 설정하는 것이 좋을 것 같습니다.</div> diff --git a/files/ko/web/accessibility/aria/forms/basic_form_hints/index.html b/files/ko/web/accessibility/aria/forms/basic_form_hints/index.html new file mode 100644 index 0000000000..f3757219ab --- /dev/null +++ b/files/ko/web/accessibility/aria/forms/basic_form_hints/index.html @@ -0,0 +1,116 @@ +--- +title: 기본적인 폼 힌트 +slug: Web/Accessibility/ARIA/forms/Basic_form_hints +tags: + - ARIA + - Forms + - 접근성 +translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints +--- +<p><span class="seoSummary">전통적인 HTML 폼 관련 요소를 사용하여 폼을 구현할 때 컨트롤에 레이블을 지정하고 레이블을 컨트롤과 명시적으로 연결하는 것이 중요합니다.</span> 스크린 리더 사용자가 페이지를 탐색할 때, 스크린 리더는 폼 컨트롤을 알려주지만, 레이블과 폼이 직접적으로 연결되지 않으면 스크린 리더는 어떤 레이블이 적절한지 알 방법이 없습니다. </p> + +<p>아래의 예는 레이블이 있는 간단한 폼을 보여줍니다. 각{{ HTMLElement("input") }} 요소는 <code>id</code>를 가지고 있고, 각{{ HTMLElement("label") }} 요소는 자신과 연결된 {{ HTMLElement("input") }}의 id를 나타내는 <code>for</code> 속성을 가지고 있습니다.</p> + +<pre class="brush: html"><form> + <ul> + <li> + <input id="wine-1" type="checkbox" value="riesling"/> + <label for="wine-1">Berg Rottland Riesling</label> + </li> + <li> + <input id="wine-2" type="checkbox" value="pinot-blanc"/> + <label for="wine-2">Pinot Blanc</label> + </li> + <li> + <input id="wine-3" type="checkbox" value="pinot-grigio"/> + <label for="wine-3">Pinot Grigio</label> + </li> + <li> + <input id="wine-4" type="checkbox" value="gewurztraminer"/> + <label for="wine-4">Gewürztraminer</label> + </li> + </ul> +</form> +</pre> + +<h2 id="Labeling_with_ARIA" name="Labeling_with_ARIA">ARIA로 라벨링 하기</h2> + +<p>HTML {{ HTMLElement("label") }} 요소는 폼 관련 요소로 적당하지만, 많은 폼 컨트롤은 {{ HTMLElement("div") }}나 {{ HTMLElement("span") }}를 사용한 동적인 Javascript 위젯으로 구현되어있습니다. W3C의 <a href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a>에서 만들어진 <a href="https://www.w3.org/WAI/standards-guidelines/aria/" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, <strong>Accessible Rich Internet Applications</strong> 사양은 이러한 경우를 위해 <code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby">aria-labelledby</a></code> 속성을 제공하고 있습니다.</p> + +<p>아래의 예에서는 순서 없는 리스트를 사용하여 구현한 라디오 버튼 그룹을 보여주고 있습니다. 3행의 {{ HTMLElement("ul") }} 요소에 <code>aria-labelledby</code> 속성에 라디오 그룹의 레이블인 {{ HTMLElement("h3") }} 요소의 <code>id</code> <code>rg1_label</code>을 설정했습니다. </p> + +<pre class="brush: html"><h3 id="rg1_label">Lunch Options</h3> + +<ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label"> + <li id="r1" tabindex="-1" role="radio" aria-checked="false"> + <img role="presentation" src="radio-unchecked.gif" /> Thai + </li> + <li id="r2" tabindex="-1" role="radio" aria-checked="false"> + <img role="presentation" src="radio-unchecked.gif" /> Subway + </li> + <li id="r3" tabindex="0" role="radio" aria-checked="true"> + <img role="presentation" src="radio-checked.gif" /> Radio Maria + </li> +</ul> +</pre> + +<h2 id="Describing_with_ARIA" name="Describing_with_ARIA">ARIA로 설명하기</h2> + +<p>폼 컨트롤을 가끔 label 외에 추가설명이 있는 경우가 있다. ARIA는 <code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby">aria-describedby</a></code> 속성을 사용하여 설명을 컨트롤과 직접 연관시킵니다. </p> + +<p>아래 예제는 {{ HTMLElement("div") }} 안의 문장이 {{ HTMLElement("button") }} 요소를 설명하는 것을 보여줍니다. {{ HTMLElement("button") }}의 <code>aria-describedby</code> 속성은 {{ HTMLElement("div") }}의 <code>id</code>를 참조합니다. </p> + +<pre class="brush: html"><button aria-describedby="descriptionRevert">Revert</button> +<div id="descriptionRevert">Reverting will undo any changes that have been made + since the last save.</div></pre> + +<div class="note"> +<p><strong>Note</strong>: <code>aria-describedby</code> 속성은 폼 컨트롤 외에도 다른 용도로 사용됩니다. </p> +</div> + +<h2 id="Required_and_invalid_fields" name="Required_and_invalid_fields">필수 필드와 유효하지 않은 필드 </h2> + +<div class="note"> +<p><strong>Note</strong>: 현재는 전 세계 사용자의 97%가 <code>required</code>를 사용할 수 있으므로 <code>required</code>와 <code>aria-required</code> 모두를 사용하는 것은 더는 권장하지 않습니다.</p> +</div> + +<p>일반적으로 웹 개발자는 필수 필드와 유효하지 않은 필드를 나타내기 위해서 시각적인 방법을 사용합니다. 보조 기술(ATs)은 언제나 표시된 것을 통해서 정보를 추측하지는 않습니다. ARIA 는 폼 컨트롤의 필수나 유효하지 않음을 나타내는 속성을 제공합니다. </p> + +<ul> + <li>AT에 폼을 완료하기 위한 필수요소임을 알리기 위해<strong> <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required">aria-required</a></strong> 속성을 폼에 적용할 수 있습니다. </li> + <li>데이터 필드에 올바르지 않은 데이터가 있는 것을 AT에 알리기 위해<strong> <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid">aria-invalid</a></strong> 상태를 적용하는 것으로 사용자는 올바르지 않은 데이터를 입력했다는 것을 알 수 있습니다. </li> +</ul> + +<p>아래의 예제는 세 개의 필드가 있는 간단한 폼을 보여줍니다. 4행과 12행에서는 <code>aria-required</code> 속성이 true(레이블 옆에 별표와 함께)로 설정되어 name과 email 필드가 필수임을 나타냅니다. 두 번째 예제는 email 형식을 검증하고 그 결과에 따라서 email 필드(HTML 12행)의 (요소를 시각적으로 변경하는 것과 함께) <code>aria-invalid</code> 속성을 설정하는 Javascript 스니펫입니다. </p> + +<pre class="brush: html"><form> + <div> + <label for="name">* Name:</label> + <input type="text" value="name" id="name" aria-required="true"/> + </div> + <div> + <label for="phone">Phone:</label> + <input type="text" value="phone" id="phone" aria-required="false"/> + </div> + <div> + <label for="email">* E-mail:</label> + <input type="text" value="email" id="email" aria-required="true"/> + </div> +</form></pre> + +<p>폼 항목의 유효성을 검사하는 스크립트는 다음과 같습니다. </p> + +<pre class="brush: js">var validate = function () { + var emailElement = document.getElementById(emailFieldId); + var valid = emailValid(formData.email); // returns true if valid, false otherwise + + emailElement.setAttribute("aria-invalid", !valid); + setElementBorderColour(emailElement, valid); // sets the border to red if second arg is false +}; +</pre> + +<h2 id="Providing_Helpful_Error_Messages" name="Providing_Helpful_Error_Messages">유용한 오류 메시지 제공</h2> + +<p><a href="/en-US/docs/aria/forms/alerts" title="aria/forms/alerts">ARIA alerts to enhance forms</a> 사용법을 읽으세요.</p> + +<p>폼 접근성을위한 ARIA 사용에 대한 자세한 지침은 <a href="http://www.w3.org/TR/wai-aria-practices/" title="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a> 문서를 참조하세요. </p> diff --git a/files/ko/web/accessibility/aria/forms/index.html b/files/ko/web/accessibility/aria/forms/index.html new file mode 100644 index 0000000000..a9028b2416 --- /dev/null +++ b/files/ko/web/accessibility/aria/forms/index.html @@ -0,0 +1,17 @@ +--- +title: Forms +slug: Web/Accessibility/ARIA/forms +tags: + - ARIA + - 접근성 +translation_of: Web/Accessibility/ARIA/forms +--- +<p>아래의 페이지에서는 Web Form의 접근성을 향상시키는 여러 가지 테크닉을 소개합니다. </p> + +<ul> + <li><a href="/en/Accessibility/ARIA/Basic_form_hints" title="Basic form hints">Basic form hints</a>: 무효 값 혹은 필수 필드에 힌트나 설명을 추가합니다. </li> + <li><a href="/en/Accessibility/ARIA/forms/alerts" title="alerts">Alerts</a>: 클라이언트 측의 검증에서 발생한 에러 메시지를 표시하기 위해 alert를 사용합니다. </li> + <li><a href="/en/Accessibility/ARIA/forms/Multipart_labels" title="https://developer.mozilla.org/en/aria/forms/Multipart_labels">Multi-part labels</a>: 각 폼 안의 컨트롤로 복잡한 폼 레이블을 사용합니다.</li> +</ul> + +<p>유사한 콘텐츠를 다루고 있는 <a class="external" href="https://web.archive.org/web/20120801225355/http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html" title="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html">Yahoo! article on form validation and ARIA</a> 도 봐주세요.</p> diff --git a/files/ko/web/accessibility/aria/index.html b/files/ko/web/accessibility/aria/index.html new file mode 100644 index 0000000000..c1c77f78f4 --- /dev/null +++ b/files/ko/web/accessibility/aria/index.html @@ -0,0 +1,131 @@ +--- +title: ARIA +slug: Web/Accessibility/ARIA +tags: + - ARIA + - Accessibility + - HTML + - 웹 접근성 + - 접근성 +translation_of: Web/Accessibility/ARIA +--- +<p><strong>접근가능한 리치 인터넷 어플리케이션</strong>(Accessible Rich Internet Applications, <strong>ARIA</strong>)은 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우)에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 말합니다.</p> + +<p>ARIA는 HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공합니다. 예를 들어 ARIA는 HTML4에서의 탐색 랜드마크, JavaScript 위젯, 폼 힌트 및 오류 메시지, 실시간 콘텐츠 업데이트 등을 접근 가능한 형태로 제공합니다.</p> + +<div class="blockIndicator warning"> +<p>여기 등장하는 많은 위젯은 나중에 HTML5로 통합됐으므로, 구현하려는 기능을 가진 요소가 존재한다면 <strong>개발자는 되도록 의미를 가진 HTML을 ARIA보다 선호해야 합니다</strong>. 몇 가지 예시로, 네이티브 요소는 키보드 접근성, 역할, 상태를 내장하고 있습니다. 그러나 ARIA를 쓰기로 결정했다면 브라우저 동작 방식을 따라 하는 건 개발자의 책임입니다.</p> +</div> + +<p>다음은 진행 표시줄 위젯의 마크업입니다.</p> + +<pre class="brush: html"><div id="percent-loaded" role="progressbar" aria-valuenow="75" + aria-valuemin="0" aria-valuemax="100"> +</div> +</pre> + +<div class="hidden"> +<p>This progress bar is built using a <code><div></code>, which has no meaning. Unfortunately, there isn't a more semantic tag available to developers in HTML 4, so we need to include ARIA roles and properties. These are specified by adding attributes to the element. In this example, the <code>role="progressbar"</code> attribute informs the browser that this element is actually a JavaScript-powered progress bar widget. The <code>aria-valuemin</code> and <code>aria-valuemax</code> attributes specify the minimum and maximum values for the progress bar, and the <code>aria-valuenow</code> describes the current state of it and therefore must be kept updated with JavaScript.</p> + +<p>Along with placing them directly in the markup, ARIA attributes can be added to the element and updated dynamically using JavaScript code like this:</p> + +<pre class="brush: js"><code>// Find the progress bar <div> in the DOM. + var progressBar = document.getElementById("percent-loaded");</code> + +<code>// Set its ARIA roles and states, +// so that assistive technologies know what kind of widget it is.</code> + progressBar.setAttribute("role", "progressbar"); + progressBar.setAttribute("aria-valuemin", 0); + progressBar.setAttribute("aria-valuemax", 100); + +// Create a function that can be called at any time to update +// the value of the progress bar. + function updateProgress(percentComplete) { + progressBar.setAttribute("aria-valuenow", percentComplete); + }</pre> + +<div class="note"> +<p>Note that ARIA was invented after HTML4, so does not validate in HTML4 or its XHTML variants. However, the accessibility gains it provides far outweigh any technical invalidity.</p> + +<p>In HTML5, all ARIA attributes validate. The new landmark elements (<code><main></code>, <code><header></code>, <code><nav></code> etc) have built-in ARIA roles, so there is no need to duplicate them.</p> +</div> +</div> + +<h2 id="지원">지원</h2> + +<p>다른 웹 기술과 마찬가지로, ARIA 역시 환경 별 지원 수준에 차이를 보입니다. 지원 수준은 사용자의 운영 체제 및 사용하는 브라우저, 그리고 연결된 보조 기술마다 다릅니다. 게다가 각각의 버전 또한 영향을 줍니다. 오래된 소프트웨어 버전은 특정 ARIA 역할을 지원하지 않거나, 부분적으로만 지원하거나, 잘못된 기능을 가지고 있을 수 있습니다.</p> + +<p>또 다른 중요한 점은, 보조 기술에 의존하는 사용자 일부가 컴퓨터 및 브라우저 상호작용 기능을 잃어버릴까 두려워 소프트웨어 업그레이드를 주저할 수 있다는 점을 인지하는 것입니다. 그러므로 가능한 한 보조 기술이 훨씬 넓게 지원하는, <a href="/ko/docs/Learn/Accessibility/HTML">의미를 가진 HTML 요소</a>를 사용하는 편이 좋습니다.</p> + +<p>마지막으로 작성한 ARIA을 실제 보조 기술로 시험하는 것도 필요합니다. 브라우저 에뮬레이터와 시뮬레이터가 전체 테스트에 효율적인 도구가 아니듯, 유사 보조 기술만으로는 완벽한 지원을 장담하기엔 부족합니다.</p> + +<section id="sect1"> +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="자습서">자습서</h2> + +<dl> + <dt><a href="/ko/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets">ARIA 소개</a></dt> + <dd>동적인 컨텐츠를 ARIA를 적용해 접근성을 갖추도록 하는 방법에 대한 소개한 글입니다. Gez Lemon이 2008년에 쓴 ARIA 분야의 고전인 <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro</a>도 참조하십시오.</dd> + <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">스크린 리더기에서 ARIA를 어떻게 사용하는지에 대한 영상</a></dt> + <dd>ARIA "적용 전", "적용 후" 영상을 비롯하여, 웹에서 볼 수 있는 실제 사용 예제들과 그것보다 간략화된 예시들을 볼 수 있습니다.</dd> + <dt><a class="external" href="https://w3c.github.io/using-aria/">ARIA 사용하기</a></dt> + <dd>개발자를 위한 실용 가이드를 제공하는 글입니다. HTML 요소에 어떤 ARIA 속성들을 써야 하는지에 대해 제안하는 내용을 담고 있습니다. 제안은 실제 구현 상황을 바탕으로 합니다.</dd> +</dl> + +<h2 id="간단한_ARIA_향상">간단한 ARIA 향상</h2> + +<dl> + <dt><a class="external" href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">ARIA 랜드마크를 사용하여 페이지 탐색 고도화</a></dt> + <dd>스크린 리더 사용자들을 위해 ARIA 랜드마크를 사용하여 웹 페이지의 탐색 기능을 향상시키는 법을 소개해주는 좋은 글입니다. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">이와 더불어서 ARIA 구현 노트</a> 및 실제 사이트에서의 활용 예시들을 참고하세요. (2011년 7월에 업데이트됨)</dd> + <dt><a href="/ko/docs/ARIA/forms">폼 접근성 향상하기</a></dt> + <dd>ARIA는 동적 콘텐츠만을 위한 것이 아닙니다! ARIA 특성을 사용해 HTML 폼의 접근성을 높이는 방법을 알아보세요.</dd> +</dl> + +<h2 id="스크립트_처리된_위젯을_위한_ARIA">스크립트 처리된 위젯을 위한 ARIA</h2> + +<dl> + <dt><a class="external" href="/ko/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">JavaScript 위젯에 키보드 탐색 및 초점 적용하기</a></dt> + <dd>{{htmlelement("input")}}, {{htmlelement("button")}} 등 내장 요소는 기본적으로 키보드를 지원합니다. {{htmlelement("div")}}와 ARIA로 특정 요소를 흉내 낸다면, 그 위젯도 키보드를 지원하도록 해야 합니다.</dd> + <dt><a href="/ko/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">실시간 영역</a></dt> + <dd>실시간 영역은 페이지 콘텐츠에 가해지는 변경점을 접근성 보조 기술이 어떻게 처리해야 하는지 제안합니다.</dd> + <dt><a class="external" href="https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm">ARIA 실시간 영역으로 콘텐츠 변경 알리기</a></dt> + <dd>JAWS 스크린 리더 소프트웨어의 개발진이 실시간 영역에 대해 요약한 글입니다.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="표준화를_위한_노고">표준화를 위한 노고</h2> + +<dl> + <dt><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 명세</a></dt> + <dd>W3C 명세입니다.</dd> + <dt><a class="external" href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA 작성 안내서</a></dt> + <dd> + <p>흔히 쓰이는 위젯을 ARIA스럽게 만드는 방법에 대한 공식 안내서로, 훌륭한 자원입니다.</p> + </dd> +</dl> + +<h2 id="비디오">비디오</h2> + +<p>다음 발표 비디오는 ARIA를 이해할 수 있는 훌륭한 방법입니다.</p> + +<p><a href="https://www.youtube.com/watch?v=qdB8SRhqvFc">ARIA, Accessibility APIs and coding like you give a damn! – Léonie Watson</a></p> + +<h2 id="버그_제출">버그 제출</h2> + +<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">브라우저, 스크린 리더, JavaScript 라이브러리의 ARIA 버그 제출하기</a></p> +</div> +</div> +</section> + +<h2 id="Related_Topics" name="Related_Topics">관련 주제</h2> + +<p>{{glossary("Accessibility", "접근성")}}, {{glossary("AJAX")}}, <a href="/ko/docs/JavaScript">JavaScript</a></p> + +<section id="Quick_Links"> +<ol> + <li><a href="/ko/docs/Web/Guide">웹 개발</a></li> + <li><a href="/ko/docs/Mozilla/Accessibility">접근성과 Mozilla</a></li> +</ol> +</section> diff --git a/files/ko/web/accessibility/aria/roles/dialog_role/index.html b/files/ko/web/accessibility/aria/roles/dialog_role/index.html new file mode 100644 index 0000000000..90fc507652 --- /dev/null +++ b/files/ko/web/accessibility/aria/roles/dialog_role/index.html @@ -0,0 +1,158 @@ +--- +title: 'ARIA: dialog role' +slug: Web/Accessibility/ARIA/Roles/dialog_role +tags: + - ARIA + - Web Development + - 접근성 +translation_of: Web/Accessibility/ARIA/Roles/dialog_role +--- +<p>{{draft()}}</p> + +<p>\{{ariaref}}</p> + +<p><span class="seoSummary"><code><a class="external" href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#dialog" title="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog">dialog</a></code> 역할(role)은 HTML 기반의 애플리케이션의 다이얼로그 또는 콘텐츠를 분리하는 창 또는 다른 웹 애플리케이션의 UI 혹은 페이지를 마크업하는데 사용됩니다. 다이얼로그는 일반적으로 오버레이를 사용하여 페이지 위에 표시됩니다. 다이얼로그는 비모달(non-modal) (열린 이후에도 다이얼로그 바깥의 콘텐츠와 상호작용할 수 있습니다) 또는 모달(오로지 다이얼로그 콘텐츠와 상호작용할 수 있습니다) 형태일 수 있습니다.</span></p> + +<pre class="brush: html"><div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>> + <h2 <strong>id="dialog1Title"</strong>>귀하의 개인정보가 성공적으로 갱신되었습니다.</h2> + <p <strong>id="dialog1Desc"</strong>> + <a href="/account">개인정보 관리</a> 페이지에서 언제든지 개인정보를 수정할 수 있습니다. + </p> + <button>닫기</button> +</div></pre> + +<h2 id="설명">설명</h2> + +<p>다이얼로그 요소를 마크업하는 것은 보조 기술(Assistive Technology)이 다이얼로그의 콘텐츠가 그룹하 되어 페이지의 나머지 콘텐츠와 분리됨을 식별하는 것을 돕습니다. 하지만, 단순히 <code>role="dialog"</code>를 추가하는 것으로 다이얼로그의 접근성을 높이지 못합니다. 추가적으로 다음 항목들이 충족되어야 합니다:</p> + +<ul> + <li>다이얼로그의 레이블이 올바르게 지정되어야 합니다.</li> + <li>키보드 포커스가 올바르게 관리되어야 합니다.</li> +</ul> + +<p>아래 섹션들은 이 두가지 요구 사항을 어떻게 만족시킬 수 있을지 설명합니다.</p> + +<h4 id="레이블링">레이블링</h4> + +<p>다이얼로그 요소 자체가 포커스를 가질 필요는 없지만, 여전히 레이블링을 할 필요가 있습니다. 다이얼로그에 주어진 레이블은 다이얼로그 내 상호작용 가능한 컨트롤들에 contextual information를 제공합니다. 예를 들어, 다이얼로그의 레이블은 내부의 컨트롤들의 레이블의 그롭화된 레이블처럼 작동합니다. (<code><legend></code> 요소가 내부의 <code><fieldset></code> 요소에 그룹화된 레이블을 제공하는 것과 비슷합니다)</p> + +<p>만약 다이얼로그가 이미 눈에 보이는 타이틀바를 가지고 있다면, 그 안속의 텍스트는 다이얼로그를 레이블하는데 사용될 수 있습니다. 이를 이루기 위해 <code>role="dialog"</code> 속성을 가진 요소에 <code>aria-labelledby</code> 속성을 사용합니다. 또한, 만약 다이얼로그에 제목 외의 추가적인 설명 텍스트가 있다면, 그 텍스트는 <code>aria-describedby</code> 속성을 사용하여 다이얼로그에 관련되게 만들 수 있습니다. 이러한 방법은 아래 코드를 통해 확인하실 수 있습니다:</p> + +<pre class="brush: html"><div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>> + <h2 <strong>id="dialog1Title"</strong>>귀하의 개인정보가 성공적으로 갱신되었습니다.</h2> + <p <strong>id="dialog1Desc"</strong>> + <a href="/account">개인정보 관리</a> 페이지에서 언제든지 개인정보를 수정할 수 있습니다. + </p> + <button>닫기</button> +</div></pre> + +<p> </p> + +<div class="note">비가상 모드에서 작동하는 스크린 판독기에 의해 인지되기 위해서는 다이얼로그 제목과 설명 텍스트가 포커스가 가능하지 않아야 한다는 점을 유의하십시오. ARIA 다이얼로그 역할과 레이블링 기술은 다이얼로그로 포커스가 이동하였을 때 스크린 판독기가 다이얼로그의 정보를 인지할 수 있도록 합니다.</div> + +<h4 id="Focus_management_포커스_관리">Focus management 포커스 관리</h4> + +<p>다이얼로그는 키보드 포커스를 관리하는 방법에 대한 특별한 요구 사항이 있습니다.</p> + +<ul> + <li>다이얼로그는 최소한 한 개 이상의 포커스 가능한 컨트롤이 있어야 합니다. 대부분의 다이얼로그는 "닫기", "확인" 또는 "취소"와 같은 버튼들이 존재합니다. 더 나아가 폼 또는 탭 같은 위젯 컨테이너 등 얼마든지 포커스 가능한 요소들을 가질 수 있습니다.</li> + <li>다이얼로그가 화면에 나타났을 때, 다이얼로그 안의 기본 포커스 가능한 컨트롤로 키보드 포커스를 이동시켜야 합니다. 예를 들어 간단한 메시지만을 제공하는 다이얼로그라면 "확인" 버튼이, 폼을 제공하는 다이얼로그의 경우는 폼의 첫 번째 필드가 기본으로 포커스 될 것입니다.</li> + <li>다이얼로그가 닫힌 이후, 키보드 포커스는 다이얼로그를 열기 전에 있었던 곳으로 다시 이동해야 합니다. 그렇지 않으면 포커스가 페이지의 첫 번째 부분으로 초기화될 수 있습니다.</li> + <li>대부분의 다이얼로그는 탭 순서가 <em>감싸지길</em> 기대합니다. 이는 사용자가 다이얼로그 안의 마지막 포커스 가능한 요소에 도달했을 때, 탭을 누르면 첫 번째 포커스 가능한 요소로 포커스가 이동하길 원합니다. 즉, 탭 순서는 다이얼로그 안에 갇혀 있어야 합니다. (<em>역자 : "Focus Trap"으로 관련 자료들을 열람하실 수 있습니다</em>)</li> + <li>만약 다이얼로그가 움직이거나 크기가 변경될 수 있는 경우, 마우스를 사용하는 사용자가 수행하는 동작을 키보드를 사용하는 사용자도 거의 비슷하게 조작할 수 있도록 보장하십시오. 비슷하게, 만약 다이얼로그가 툴바 또는 context menus 처럼 특별한 기능을 제공하는 경우, 이들 또한 키보드 사용자에 의해서도 접근 가능하고 조작이 가능해야 합니다.</li> + <li>다이얼로그는 모달 또는 비모달일 수 있습니다. 만약 모달 다이얼로그가 화면에 나타나면, 다이얼로그 밖의 페이지 콘텐츠들과 상호작용하는 것은 불가능합니다. 다른 말로, 모달 다이얼로그가 나타나 있는한 메인 애플리케이션의 UI 또는 페이지 콘텐츠는 일시적으로 비활성화 상태여야 합니다. 비모달 다이얼로그는 열러 있는 동안에도 다이얼로그 바깥의 콘텐츠들과 상호작용이 가능합니다. 비모달 다이얼로그를 위해서 열려 있는 다이얼로그와 메인 페이지간에 포커스를 이동시킬 수 있는 전역 키보드 단축키가 필요하다는 점을 유의하십시오.</li> +</ul> + +<p> </p> + +<h3 class="highlight-spanned" id="관련된_ARIA_역할_상태_및_속성"><span class="highlight-span">관련된 ARIA 역할, 상태 및 속성</span></h3> + +<dl> + <dt><code><span class="highlight-span">aria-labelledby</span></code></dt> + <dd><span class="highlight-span">다이얼로그에 label을 하려면 이 속성을 사용하십시오. 보통, 다이얼로그의 제목 요소의 id값이 aria-labelledby 속성의 값이 됩니다.</span></dd> + <dt><code>aria-describedby</code></dt> + <dd>다이얼로그의 콘텐츠를 묘사하기 위해 이 속성을 사용하십시오.</dd> +</dl> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology">Possible effects on user agents and assistive technology </h3> + +<p>When the <code>dialog</code> role is used, the user agent should do the following:</p> + +<ul> + <li>Expose the element as a dialog in the operating system's accessibility API.</li> +</ul> + +<p>When the dialog is correctly labeled and focus is moved to a control inside the dialog, screen readers should announce the dialog's accessible role, name and optionally description before announcing the focused element. </p> + +<div class="note"><strong>Note:</strong> Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.</div> + +<h3 id="예제">예제</h3> + +<h4 id="예제_1_폼을_포함하는_다이얼로그">예제 1: 폼을 포함하는 다이얼로그</h4> + +<pre class="brush: html"> <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> + <h2 id="dialog1Title">구독하기</h2> + <p id="dialog1Desc">우리는 이 정보를 제 3자에게 제공하지 않습니다.</p> + <form> + <p> + <label for="firstName">이름</label> + <input id="firstName" type="text" /> + </p> + <p> + <label for="lastName">성</label> + <input id="lastName" type="text"/> + </p> + <p> + <label for="interests">관심분야</label> + <textarea id="interests"></textarea> + </p> + <p> + <input type="submit" value="정보 저장하기"/> + </p> + </form> + </div></pre> + +<h4 id="Example_2_A_dialog_based_on_a_Fieldset_as_fallback_content">Example 2: A dialog based on a Fieldset as fallback content</h4> + +<p>To support browsers or AT products that do not support ARIA mark up, it's also possible to use apply the dialog markup to a fieldset element as fallback content. This way the dialog title will still be announced correctly:</p> + +<pre class="brush: html"><strong><fieldset role="dialog"</strong> aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> + <strong><legend></strong> + <span id="dialog1Title">Your personal details were successfully updated.</span> + <span id="dialog1Desc">You can change your details at any time in the user account section.</span> + </legend> + + <button>Close</button> +</fieldset></pre> + +<h4 id="작업된_예제">작업된 예제:</h4> + +<ul> + <li><a class="external" href="http://jqueryui.com/demos/dialog/" title="http://jqueryui.com/demos/dialog/">jQuery-UI Dialog</a></li> +</ul> + +<h3 id="Notes">Notes </h3> + +<div class="note"><strong>Note:</strong> While it is possible to prevent keyboard users from moving focus to elements outside of the dialog, screen reader users may still be able to navigate that content virtually to use their screen reader's virtual cursor. Because of this, dialogs are considered to be a special case of the application role: They are expected to be navigated by screen reader users in a non-virtual navigation mode.</div> + +<h3 id="사용되는_ARIA_속성">사용되는 ARIA 속성</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#dialog" title="http://www.w3.org/TR/wai-aria/roles#dialog">dialog</a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">aria-labelledby</a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a></li> +</ul> + +<h3 id="관련된_ARIA_기술">관련된 ARIA 기술 </h3> + +<ul> + <li><a href="/en/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alertdialog role">Using the alertdialog role</a></li> +</ul> + +<h3 id="Compatibility">Compatibility</h3> + +<p class="comment">TBD: Add support information for common UA and AT product combinations</p> + +<h3 id="Additional_resources">Additional resources</h3> + +<p> </p> diff --git a/files/ko/web/accessibility/aria/roles/index.html b/files/ko/web/accessibility/aria/roles/index.html new file mode 100644 index 0000000000..3b92115b59 --- /dev/null +++ b/files/ko/web/accessibility/aria/roles/index.html @@ -0,0 +1,78 @@ +--- +title: WAI-ARIA Roles +slug: Web/Accessibility/ARIA/Roles +tags: + - ARIA + - Accessibility + - NeedsTranslation + - Rôles + - TopicStub +translation_of: Web/Accessibility/ARIA/Roles +--- +<p class="summary">This page lists reference pages covering all the WAI-ARIA roles discussed on MDN. For a full list of roles, see <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">Using ARIA: Roles, States, and Properties</a></p> + +<p>{{SubpagesWithSummaries}}</p> + +<div class="hidden"> +<p>Please claim the role you want to work on by adding your name after the role's name: (old pages are linked from <a href="/en-US/docs/">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques</a>). Ones for which the first draft is completed have been removed from the below list.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">alertdialog</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Banner_Role">banner</a> </li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Combobox_Role">Combobox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Command_Role">Command</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">Columnheader </a>(Estelle)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">complementary</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Composite_Role">composite</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Definition_Role">Definition</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Directory_Role">Directory</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Feed_Role">Feed</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">Gridcell</a> (Eric E)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Group_Role">Group</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Input_Role">input</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Landmark_Role">landmark</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Link_Role">Link</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Listbox_Role">listbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Log_Role">Log</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Marquee_Role">Marquee</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Math_Role">math</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menu_Role">menu</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menubar_Role">menubar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuiitem_Role">Menuitem</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemcheckbox_Role">Menuitemcheckbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemradio_Role">Menuitemradio</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/None_Role">none</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Note_Role">note</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Option_Role">Option</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Presentation_Role">presentation</a> </li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Progressbar_Role">Progressbar</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radio_Role">Radio</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radiogroup_Role">radiogroup</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Range_Role">range</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_Role">region</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Roletype_Role">roletype</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">rowheader</a>(Estelle)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Scrollbar_Role">Scrollbar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Searchbox_Role">searchbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Section_Role">section</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Sectionhead_Role">sectionhead</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Select_Role">select</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Separator_Role">separator</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Slider_Role">Slider</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Spinbutton_Role">Spinbutton</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Status_Role">Status</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Structure_Role">structure</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_role">tab</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (Michiel)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">Tabpanel</a> (Michiel)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Term_Role">term</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Time_Role">Timer</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Toolbar_Role">toolbar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">Tooltip</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">Tree</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">Treeitem</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Widget_Role">widget</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Window_Role">window</a></li> +</ul> +</div> diff --git a/files/ko/web/accessibility/index.html b/files/ko/web/accessibility/index.html new file mode 100644 index 0000000000..9faf5ccaa5 --- /dev/null +++ b/files/ko/web/accessibility/index.html @@ -0,0 +1,49 @@ +--- +title: 접근성 +slug: Web/Accessibility +tags: + - Accessibility + - 접근성 +translation_of: Web/Accessibility +--- +<p><span class="seoSummary">웹 개발에서의 접근성은 사람들의 능력이 어느정도 제한되어 있더라도 가능한 많은 사람들이 웹사이트를 사용 할 수 있도록 하는것 입니다. 여기서 우리는 접근할 수 있는 콘텐츠 개발에 관한 정보를 제공 합니다.</span></p> + +<p>"접근성은 장애인을 돕기 위한 '휠체어접근' 과 같은 시설이나 편의 시설을 설명하는 데 가장 많이 사용됩니다. 이것은 점저 감판, 휠체어 경사로, 보행자 교차점에서의 오디오 신호등, 보행로 등고선, 웹 사이트 디자인 등으로 확장될 수 있습니다." <a class="external" href="http://en.wikipedia.org/wiki/Accessibility">Wikipedia entry for Accessibility</a></p> + +<p>"그들의 하드웨어, 소프트웨어, 언어, 문화, 위치 또는 신체적 혹은 정신적 능력이 무엇이든지 간에, 웹은 근본적으로 모든 사람들을 위해 일하도록 설계되어 있습니다. 웹이 이 목표를 달성할 때, 다양한 범위의 청각, 움직임, 시각, 인지 능력을 가진 사람들에게 접근할 수 있습니다." <a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Accessibility</a></p> + +<div class="cleared topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> + +<dl> + <dt><a href="/en-US/docs/Accessibility/Web_Development" title="Accessibility Web Development">Web development</a></dt> + <dd>접근성 세계에서 웹 개발 문제를 강조하기 위해 지정된 문서 모음 입니다.</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a></dt> + <dd>HTML문서를 좀 더 쉽게 접근 할 수 있는 방법을 배우기 위해 사용할 수 있는 문서 모음 입니다.</dd> + <dt><a href="/en-US/docs/Accessibility/AT_Development" title="AT Development">Assistive technology (AT) development</a></dt> + <dd>AT 개발자를 위한 기사 모음 입니다.</dd> + <dt><a href="/en-US/docs/Web/Accessibility/Mobile_accessibility_checklist">Mobile accessibility checklist</a></dt> + <dd>모바일 앱 개발자에 대한 접근성 요구 사항을 간략하게 확인할 수 있는 문서 모음 입니다.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility" title="/en-US/docs/tag/Accessibility">View all articles about Accessibility...</a></span></p> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">웹 개발자들을 위한 도구</h2> + +<ul> + <li><a class="external" href="http://www.standards-schmandards.com/projects/fangs/">Fangs screen reader emulator</a></li> + <li><a class="external" href="https://addons.mozilla.org/firefox/addon/claws/">Claws screen reader emulator</a></li> +</ul> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility:Tools" title="en-US/docs/tag/Accessibility:Tools">View All...</a></span></p> + +<h2 class="Tools" id="Tools" name="Tools">기타 유용한 사이트</h2> + +<ul> + <li><a class="external" href="https://support.mozilla.org/kb/accessibility-features-firefox-make-firefox-and-we">Screen reader list</a></li> +</ul> +</div> +</div> diff --git a/files/ko/web/accessibility/mobile_accessibility_checklist/index.html b/files/ko/web/accessibility/mobile_accessibility_checklist/index.html new file mode 100644 index 0000000000..6a9a73cdbe --- /dev/null +++ b/files/ko/web/accessibility/mobile_accessibility_checklist/index.html @@ -0,0 +1,106 @@ +--- +title: 모바일 접근성 점검항목 +slug: Web/Accessibility/Mobile_accessibility_checklist +translation_of: Web/Accessibility/Mobile_accessibility_checklist +--- +<div class="summary"> +<p>이 문서는 모바일 앱 개발자를 위한 접근성 요구 사항에 대한 간결한 체크리스트를 제공한다. 더 많은 패턴이 발생할수록 지속적으로 진화하려는 의도다.</p> +</div> + +<h2 id="색">색</h2> + +<ul> + <li>색상 대비는 반드시 WCAG 2.0 AA 레벨 요건을 준수해야 한다: + <ul> + <li>일반적인 크기의 텍스트(18pt 보다 작거나 14pt 볼드체)는 4.5:1</li> + <li>큰 크기의 텍스트(적어도 18pt 보다 크거나 14pt 볼드체)는 3 :1</li> + </ul> + </li> + <li>색상을 통해 전달되는 정보는 반드시 다른 수단으로도 제공되어야 한다(링크 등에 대한 밑줄 텍스트).</li> +</ul> + +<h2 id="가시성"> 가시성</h2> + +<ul> + <li>opacity:0, z-index 깊이 조정 및 화면 밖 배치와 같은 콘텐츠 숨기기 기법은 단순히 가시성을 처리하기 위해서만 사용되어서는 안 된다.</li> + <li> + <p>현재 가시화된 화면 이외의 모든 것은 반드시 진정으로 보이지 않아야 한다(특히 여러 개의 카드가 있는 단일 페이지 앱에 관련됨).</p> + + <ul> + <li><code>hidden</code> 속성 또는 <code>visibility</code> 또는 <code>display</code> 스타일 속성값을 <strong>이용</strong>해야 한다.</li> + <li>불가피한 경우를 제외 하고 <code>aria-hidden</code> <strong>속성을 사용해서는 안된다.</strong></li> + </ul> + </li> +</ul> + +<h2 id="초점">초점</h2> + +<ul> + <li> + <p>모든 활성화 가능한 요소는 <strong>초점 가능해야 한다.</strong></p> + + <ul> + <li> + <p>링크, 버튼 및 양식 필드와 같은 표준 control들는 기본적으로 초점을 맞출 수 있다.</p> + </li> + <li> + <p>비표준 control들은 반드시 버튼, 링크 또는 체크박스와 같은 적절한 <a href="http://www.w3.org/TR/wai-aria/roles">ARIA Role</a> 역할이 할당되어야 한다.</p> + </li> + </ul> + + <p>초점은 논리적이고 일관된 방식으로 다루어야 한다.</p> + </li> +</ul> + +<h2 id="텍스트_동등성">텍스트 동등성</h2> + +<ul> + <li> + <p>앱 내 모든 엄격하지 않은 현재 텍스트 요소에 대해 동일한 의미의 텍스트가 제공되어야 한다.</p> + + <ul> + <li><em>alt 와</em> <em>title 속성은 적절하게 사용되어야 한다.</em> ( 스티브 폴크너의 <a href="http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute</a> 위한 좋은 가이드 보기.)</li> + <li>위 속성을 사용하기 어려운 경우 <code>aria-label</code>, <code>aria-labelledby</code>, or <code>aria-describedby 등과 같은 </code><a href="http://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header">ARIA Properties</a> 를 사용하세요</li> + </ul> + </li> + <li>텍스트 이미지 사용은 가급적 자제 해야 한다.</li> + <li>모든 form 콘트롤 요소는 스크린 리더 사용자를 위해 lable 요소를 가져야 한다. </li> +</ul> + +<h2 id="처리_상태">처리 상태</h2> + +<ul> + <li> + <p>라디오 버튼 및 체크박스와 같은 표준 제어장치는 운영체제가 취급한다. 그러나 다른 사용자 정의 제어의 경우, <code>aria-checked</code>, <code>aria-disabled</code>, <code>aria-selected</code>, <code>aria-expanded</code>, and <code>aria-pressed</code>과 같은 <a href="http://www.w3.org/TR/wai-aria/states_and_properties#attrs_widgets_header">ARIA States</a>를 통해 상태 변경이 제공되어야 한다.</p> + </li> +</ul> + +<h2 id="방향">방향</h2> + +<ul> + <li>콘텐츠는 특수한 경우를 제외하고 가로 또는 세로 방향등 단일 방향으로 제한해서는 안된다. <a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html">WCAG 2.1: Orientation</a> + + <ul> + <li>특수한 경우는 피아노 앱이나 은행 수표 앱 같은 경우가 있다.</li> + </ul> + </li> +</ul> + +<h2 id="General_Guidelines">General Guidelines</h2> + +<ul> + <li>An app title <strong>MUST</strong> be provided.</li> + <li>Headings <strong>MUST</strong> not break hierarchical structure + <pre class="brush: html"><h1>Top level heading</h1> + <h2>Secondary heading</h2> + <h2>Another secondary heading</h2> + <h3>Low level heading</h3></pre> + </li> + <li><a href="http://www.w3.org/TR/wai-aria/roles#landmark_roles_header">ARIA Landmark Roles</a> <strong>SHOULD</strong> be used to describe an app or document structure, such as <code>banner</code>, <code>complementary</code>, <code>contentinfo</code>, <code>main</code>, <code>navigation</code>, <code>search</code>.</li> + <li>Touch event handlers <strong>MUST</strong> only be triggered on the <code>touchend</code> event.</li> + <li>Touch targets <strong>MUST</strong> be large enough for the user to interact with (see the <a href="http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size">BBC Mobile Accessibility Guidelines</a> for useful touch target size guidelines).</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: The <a href="http://yzen.github.io/firefoxos/2014/04/30/mobile-accessibility-checklist.html">original version of this document</a> was written by <a href="http://yzen.github.io/">Yura Zenevich</a>.</p> +</div> diff --git a/files/ko/web/accessibility/understanding_wcag/index.html b/files/ko/web/accessibility/understanding_wcag/index.html new file mode 100644 index 0000000000..fe71b20ebc --- /dev/null +++ b/files/ko/web/accessibility/understanding_wcag/index.html @@ -0,0 +1,59 @@ +--- +title: Understanding the Web Content Accessibility Guidelines +slug: Web/Accessibility/Understanding_WCAG +tags: + - NeedsTranslation + - TopicStub + - WCAG + - Web Content Accessibility Guidelines +translation_of: Web/Accessibility/Understanding_WCAG +--- +<p class="summary">This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 or 2.1 (or just WCAG, for the purposes of this writing).</p> + +<p>The WCAG 2.0 and 2.1 provide a detailed set of guidelines for making web content more accessible to people with a wide variety of disabilities. It is comprehensive but incredibly detailed, and quite difficult to gain a rapid understanding of. For this reason, we have summarised the practical steps you need to take to satisfy the different recommendations, with further links to more details where required.</p> + +<h2 id="The_four_principles">The four principles</h2> + +<p>WCAG is broadly broken down into four principles — major things that web content <strong>must be</strong> to be considered accessible (see <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Understanding the Four Principles of Accessibility </a>for the WCAG definitions).</p> + +<p>Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceivable:</a> Users must be able to perceive it in some way, using one or more of their senses.</li> + <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Operable</a>: Users must be able to control UI elements (e.g. buttons must be clickable in some way — mouse, keyboard, voice command, etc.).</li> + <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Understandable</a>: The content must be understandable to its users.</li> + <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robust</a>: The content must be developed using well-adopted web standards that will work across different browsers, now and in the future.</li> +</ul> + +<h2 id="Should_I_use_WCAG_2.0_or_2.1">Should I use WCAG 2.0 or 2.1?</h2> + +<p>WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. </p> + +<h3 id="What_is_WCAG_2.1">What is WCAG 2.1?</h3> + +<p>WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release <a href="https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/">WCAG 2.1 Adoption in Europe</a>. </p> + +<p>WCAG 2.1 includes:</p> + +<ul> + <li>all of WCAG 2.0 (verbatim, word-for-word)</li> + <li>17 new Success Criteria at the A / AA / AAA levels primarily addressing user needs in these areas: + <ul> + <li>Mobile Accessibility </li> + <li>Low Vision</li> + <li>Cognitive</li> + </ul> + </li> + <li>Read more about WCAG 2.1: + <ul> + <li>Deque: <a href="https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/">WCAG 2.1: What is Next for Accessibility Guidelines</a></li> + <li>TPG: <a href="https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/">Web Content Accessibility Guidelines (WCAG) 2.1</a></li> + </ul> + </li> +</ul> + +<h2 id="Legal_standing">Legal standing</h2> + +<p>This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.</p> + +<p><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a> and particularity the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">Accessibility guidelines and the law</a> section provide more related information.</p> diff --git a/files/ko/web/accessibility/understanding_wcag/keyboard/index.html b/files/ko/web/accessibility/understanding_wcag/keyboard/index.html new file mode 100644 index 0000000000..32705d664f --- /dev/null +++ b/files/ko/web/accessibility/understanding_wcag/keyboard/index.html @@ -0,0 +1,87 @@ +--- +title: Keyboard +slug: Web/Accessibility/Understanding_WCAG/Keyboard +translation_of: Web/Accessibility/Understanding_WCAG/Keyboard +--- +<div>To be fully accessible, a web page must be operable by someone using only a keyboard to access and control it. This includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible.</div> + +<h2 id="Focusable_elements_should_have_interactive_semantics">Focusable elements should have interactive semantics</h2> + +<p>If an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> One important exception to this rule is if the element has <code>role="document" </code>applied to it, <strong>inside </strong>an interactive context (such as <code>role="application"</code>). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").</p> +</div> + +<p>Most interactive elements are focusable by default; you can make an element focusable by adding a <code>tabindex=0</code> attribute value to it. However, you should only add <code>tabindex</code> if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.</p> + +<h3 id="See_also">See also</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> +</ul> + +<h2 id="Avoid_using_tabindex_attribute_greater_than_zero">Avoid using <code>tabindex</code> attribute greater than zero</h2> + +<p>The <code>tabindex</code> attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their <code>tabindex</code> values (1, then 2, then 3, etc.).</p> + +<p>This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive <code>tabindex</code> values.</p> + +<h3 id="See_also_2">See also</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">Understanding focus order</a></li> + <li><a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Don't use tabindex greater than 0</a></li> +</ul> + +<h2 id="Clickable_elements_must_be_focusable_and_should_have_interactive_semantics">Clickable elements must be focusable and should have interactive semantics</h2> + +<p>If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.</p> + +<p>An element is clickable if it has an <code>onclick</code> event handler defined. You can make it focusable by adding a <code>tabindex=0</code> attribute value to it. You can make it operable with the keyboard by defining an <code>onkeydown</code> event handler; in most cases, the action taken by event handler should be the same for both types of events.</p> + +<h3 id="See_also_3">See also</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> +</ul> + +<h2 id="Interactive_elements_must_be_able_to_be_activated_using_a_keyboard">Interactive elements must be able to be activated using a keyboard</h2> + +<p>If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.</p> + +<h3 id="See_also_4">See also</h3> + +<ul> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> +</ul> + +<h2 id="Interactive_elements_must_be_focusable">Interactive elements must be focusable</h2> + +<p>If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a <code>tabindex=0</code> attribute value to it. That will add the element to the list of elements that can be focused by pressing the <kbd>Tab</kbd> key, in the sequence of such elements as defined in the HTML document.</p> + +<h3 id="See_also_5">See also</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li> +</ul> + +<h2 id="Focusable_element_must_have_focus_styling">Focusable element must have focus styling</h2> + +<p>Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> CSS pseudo-class.</p> + +<p>Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.</p> + +<p>If you create your own focusable components, be sure that you also define focus styling for them.</p> + +<h3 id="See_also_6">See also</h3> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15.html">Using CSS to change the presentation of a UI component when it receives focus</a></li> +</ul> |