Aria-live не говорит лейбл после обновлений

Question

У меня есть этот кусок HTML, который динамически обновляется с помощью JS. Программа чтения с экрана считывает новые значения только после их обновления. Это не говорит лейбл ввода, который был обновлен.

<ul class="points-transfer-detail-points-calculation clearfix">
    <li>
        <label for="points-to-transfer">{{{ pointsToTransferLabel }}}</label>
        <input id="points-to-transfer" type="text" aria-controls="brand-points points-left-after-transfer" placeholder="XXX,XXX" {{#if disabled }}disabled{{/if}}>
        <p id="points-to-transfer-error" class="points-transfer-detail-form-error" aria-hidden="true" role="alert">{{{ pointsToTransferErrorMessage }}}</p>
    </li>
    <li>
        <label for="brand-points">{{{ brandPointsLabel }}}</label>
        <input id="brand-points" type="text" aria-live="polite" aria-atomic="true" disabled>
    </li>
    <li>
        <label for="points-left-after-transfer">{{{ pointsLeftLabel }}}</label>
        <input id="points-left-after-transfer" type="text" aria-live="polite" aria-atomic="true" disabled>
    </li>
</ul>

Я пытался использовать aria-labelledby, aria-describedby, role="alert" а также aria-label но никаких результатов, только значение ввода и никогда его метка.

Из всех моих исследований Google и Stackru мне не удалось найти правильный ответ.

Я использую NVDA в Firefox для чтения с экрана.

Спасибо за помощь.

Answer 1

Единственное время, когда читатель экрана должен прочитать метку, - это когда фокус помещается в соответствующее поле.

Ваши поля ввода все отключены. Поэтому ярлыки не будут читаться, поскольку вы не можете сфокусироваться на полях.

Удалите ваши aria-live и aria-atomic из ваших полей ввода. Они непригодны для использования в полях ввода. Aria-live запускается при изменении DOM в контейнере, которому он назначен. Поле ввода не является контейнером. Кроме того, лейблы не должны быть объявлены таким образом.

Если вы хотите объявить об изменении в DOM, я бы предложил добавить содержимое в пустой раздел aria-live в нижней части вашей страницы и скрыть его доступным образом.

Вот рабочий пример с одной статической меткой и тремя динамическими метками. Один использует атрибут "disabled", а другой - aria-disabled, так что он все еще может получать фокус. Объявление о рендеринге новых меток также размещено в доступном скрытом контейнере aria-live.

Это было проверено в NVDA в FF, JAWS в IE и VO в Safari.

(function () {
  function populateLabels () {
    document.querySelector('[for="dogsName"]').appendChild(document.createTextNode('Dog\'s Name'));
    document.querySelector('[for="catsName"]').appendChild(document.createTextNode('Cat\'s Name'));
    document.querySelector('[for="lastName"]').appendChild(document.createTextNode('Last Name'));
  }
  function announceChange () {
    var announcement = "Some new labels have appeared.  They are Last Name, Dog's Name, and Cat's Name.",
        ariaLiveContainer = document.querySelector('[aria-live]');
    ariaLiveContainer.appendChild(document.createTextNode(announcement));
    setTimeout(function () {
      ariaLiveContainer.innerHTML("");
    }, 2000);
  }
  setTimeout(function () {
    populateLabels();
    announceChange();
  }, 3000);
}());

input {
  border: 1px solid black;
}
[disabled],
[aria-disabled="true"] {
  border: 1px solid #ccc;
  background-color: #eee;
}
.acc-hidden { /* Hide only visually, but have it available for screenreaders */
  position: absolute !important;
  display: block;
  visibility: visible;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
}

<p>The first label is there on DOM load.  The other three labels come in 3 seconds after DOM load.  An announcement is made about the updated labels.</p>
<form action="">
  <ul>
    <li>
      <label for="firstName">First Name</label>
      <input type="text" name="first-name" id="firstName" />
    </li>
    <li>
      <label for="lastName"></label>
      <input type="text" name="last-name" id="lastName" />
    </li>
    <li>
      <label for="dogsName"></label>
      <input type="text" name="dogs-name" id="dogsName" disabled /> (uses the disabled attribute -- doesn't receive focus)
    </li>
    <li>
      <label for="catsName"></label>
      <input type="text" name="cats-name" id="catsName" aria-disabled="true" /> (uses the aria-disabled="true" attribute -- can receive focus)
    </li>
  </ul>
</form>
<div class="acc-hidden" aria-live="polite"></div>