如何让 nvda 读取一些关于动作的状态消息？

Question

问题是我想让 NVDA 在按下按钮后读取一些消息。例如，有一个“添加新行”按钮，可以将新行添加到网格中。使用 NVDA 屏幕 reader 的用户按下按钮上的 Enter，然后我想通知他成功的结果（已添加行）。另一个例子我有一个表单，用户可以在其中进行一些更改。表单上有“保存”按钮 - 预审后我想通知用户“更改已保存”。有没有办法在不抛出烤面包机消息的情况下做到这一点？ 我想在按下按钮后添加我的情况，焦点停留在它们上。

Answer 1

您正在寻找the aria-live attribute

这使您可以通过更改上面有 aria-live 的容器内的文本来为屏幕 reader 用户提供更新。

对于您要使用的用例 aria-live="polite"，aria-live="assertive" 应该只用于时间敏感的信息，例如注销警报等。

aria-live 区域不可见

您不必有一个可见的 aria-live 区域，但它必须可以通过屏幕访问 reader。

为此，我们可以使用 使其在视觉上隐藏（这比 sr-only 更好，并且由于 clip 已被弃用，因此可以在未来证明）

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<div class="visually-hidden" aria-live="polite">

Whatever you put in here via JavaScript will get read out to screen readers as an appropraite quiet time. This is not visible.

</div>

<p>This is visible</p>

来自 MDN 的示例

因为 link 只有答案永远不会很好，所以我在 MDN 上的 linked 文章中包含了示例。

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);
});

<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>

Answer 2

屏幕 reader 对于视觉上明显但视力不佳的用户看不到的信息，建议仅使用文本。我建议您尝试使用 clip + clip-path 方法作为渐进式增强以支持旧版和新版浏览器。

.screenreader-text {
  border: 0;
  /*Clipping defines what part of an element should be displayed*/
  /* Deprecated clip property for older browsers */
  clip: rect(1px, 1px, 1px, 1px);
  /* clip-path for newer browsers. inset(50%) defines an inset rectangle that makes the content disappear */
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}