diff options
Diffstat (limited to 'files/ko/web/accessibility/aria')
9 files changed, 1180 insertions, 0 deletions
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> |