ARIA 实时区域

<fieldset>
  <legend>行星信息</legend>
  <label for="planetsSelect">行星：</label>
  <select id="planetsSelect" aria-controls="planetInfo">
    <option value="">选择一个行星…</option>
    <option value="mercury">水星</option>
    <option value="venus">金星</option>
    <option value="earth">地球</option>
    <option value="mars">火星</option>
  </select>
  <button id="renderPlanetInfoButton">确定</button>
</fieldset>

<div role="region" id="planetInfo" aria-live="polite">
  <h2 id="planetTitle">未选择行星</h2>
  <p id="planetDescription">选择一个行星以查看其描述</p>
</div>

<p>
  <small>
    信息来自<a href="https://zh.wikipedia.org/wiki/太阳系">维基百科</a>
  </small>
</p>

const PLANETS_INFO = {
  mercury: {
    title: "水星",
    description:
      "水星是太阳系中最小、最靠近太阳的行星。它以罗马信使神水星命名。",
  },

  venus: {
    title: "金星",
    description: "金星是离太阳第二近的行星。它以罗马爱与美之女神金星命名。",
  },

  earth: {
    title: "地球",
    description:
      "地球是距离太阳第三近的行星，也是宇宙中唯一已知存在生命的天体。",
  },

  mars: {
    title: "火星",
    description:
      "火星是距离太阳第四近的行星，也是太阳系中仅次于水星的第二小行星。火星在英文中得名于罗马战神，通常被称为“红色星球”。",
  },
};

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 = "未选择行星";
    planetDescription.textContent = "选择一个行星以查看其描述";
  }
}

const renderPlanetInfoButton = document.querySelector(
  "#renderPlanetInfoButton",
);

renderPlanetInfoButton.addEventListener("click", (event) => {
  const planetsSelect = document.querySelector("#planetsSelect");
  const selectedPlanet =
    planetsSelect.options[planetsSelect.selectedIndex].value;

  renderPlanetInfo(selectedPlanet);
});

<div id="clock" role="timer" aria-live="polite">
  <span id="clock-hours"></span>
  <span id="clock-mins"></span>
</div>

/* 更新时钟的基本 JavaScript */
function updateClock() {
  const now = new Date();
  document.getElementById("clock-hours").textContent = now.getHours();
  document.getElementById("clock-mins").textContent =
    `0${now.getMinutes()}`.substr(-2);
}

/* 第一次运行 */
updateClock();

/* 每分钟更新 */
setInterval(updateClock, 60000);

<div id="clock" role="timer" aria-live="polite" aria-atomic="true">…</div>

<div id="date-input">
  <label for="year">年份：</label>
  <input type="text" id="year" value="1990" onblur="change(event)" />
</div>

<div id="date-output" aria-atomic="true" aria-live="polite">
  设定的年份是：<span id="year-output">1990</span>
</div>

function change(event) {
  const yearOut = document.getElementById("year-output");

  switch (event.target.id) {
    case "year":
      yearOut.innerHTML = event.target.value;
      break;
    default:
      return;
  }
}

<ul id="roster" aria-live="polite" aria-relevant="additions removals">
  <!-- 在此使用 JavaScript 添加和删除用户 -->
</ul>