path: root/files/ko/web/accessibility/aria/aria_live_regions/index.html

---
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">&lt;fieldset&gt;
  &lt;legend&gt;Planet information&lt;/legend&gt;
  &lt;label for="planetsSelect"&gt;Planet:&lt;/label&gt;
  &lt;select id="planetsSelect" aria-controls="planetInfo"&gt;
    &lt;option value=""&gt;Select a planet&amp;hellip;&lt;/option&gt;
    &lt;option value="mercury"&gt;Mercury&lt;/option&gt;
    &lt;option value="venus"&gt;Venus&lt;/option&gt;
    &lt;option value="earth"&gt;Earth&lt;/option&gt;
    &lt;option value="mars"&gt;Mars&lt;/option&gt;
  &lt;/select&gt;
  &lt;button id="renderPlanetInfoButton"&gt;Go&lt;/button&gt;
&lt;/fieldset&gt;

&lt;div role="region" id="planetInfo" aria-live="polite"&gt;
  &lt;h2 id="planetTitle"&gt;No planet selected&lt;/h2&gt;
  &lt;p id="planetDescription"&gt;Select a planet to view its description&lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;&lt;small&gt;Information courtesy &lt;a href="https://en.wikipedia.org/wiki/Solar_System#Inner_Solar_System"&gt;Wikipedia&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
</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 =&gt; {
  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">&lt;div id="clock" role="timer" aria-live="polite"&gt;&lt;/div&gt;
</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">&lt;div id="clock" role="timer" aria-live="polite" aria-atomic="true"&gt;&lt;/div&gt;
</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">&lt;div id="date-input"&gt;
  &lt;label&gt;Year:
    &lt;input type="text" id="year" value="1990" onblur="change(event)"/&gt;
  &lt;/label&gt;
&lt;/div&gt;

&lt;div id="date-output" aria-live="polite"&gt;
  The set year is:
  &lt;span id="year-output"&gt;1990&lt;/span&gt;
&lt;/div&gt;</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">&lt;ul id="roster" aria-live="polite" aria-relevant="additions removals"&gt;
	&lt;!-- use JavaScript to add remove users here--&gt;
&lt;/ul&gt;
</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>