Программа чтения с экрана не читает радиокнопку с пометкой aria, наведенной на указатель мыши

Question

Полимер 1.* и считыватель NVDA

У меня есть группа радио кнопок, которые не имеют ярлыков. Я пытаюсь заставить программу чтения с экрана считывать, какая кнопка переключателя находится при наведении курсора.

Я старался aria-labelledby который, из того, что я прочитал, должен ссылаться на элемент по id и считывать его содержимое.

Однако у меня нет успеха. Когда я наведите курсор на paper-radio-button это не зачитывает да. Я должен сначала щелкнуть по нему, что не является идеей по сравнению с примером на https://www.w3.org/TR/wai-aria-practices/examples/radio/radio-2/radio-2.html.

Любые идеи о том, как получить aria-labelledby ссылаться и считывать содержимое элемента с идентификатором yes так он будет считывать да на переключателе без содержимого / метки?

      <paper-button
        id="yes"
        disabled$="[[parentAnswerIsNo]]"
        data-global$="[[picklistValues.ENHANCEDYESNO_YES]]"
        on-tap="_globalSelect">Yes</paper-button>

---

  <template
    on-dom-change="_setDefaultValues"
    is="dom-repeat"
    items="[[fields]]"
    filter="_computeField">

    <div class="color-row" data-yes-answer-field-code$="[[item.field_code]]">
      <div class="row">
        <label class="col1">
          [[item.field_label]]
        </label>

        <paper-radio-group
          class="new-form-radio all-radio-select global-btn-select-radio"
          on-selected-changed="_toggleHiddenRow"
          data-yes-answer-field-code$="[[item.field_code]]"
          attr-for-item-title="[[item.field_id]]"
          attr-for-selected="value">
          <paper-radio-button
            aria-labelledby="yes"
            disabled$="[[parentAnswerIsNo]]"
            value="[[picklistValues.ENHANCEDYESNO_YES]]"
            name="[[item.field_id]]"></paper-radio-button>

Answer 1

Лучше всего добавить метку и не показывать ее, чтобы программа чтения с экрана все еще могла ее найти. Вы можете скрыть это, например, с помощью этого CSS, или если вы используете начальную загрузку, просто используйте класс sr-only

.visually-hidden { 
    position: absolute !important;
    height: 1px; width: 1px; 
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

Answer 2

Я не знаком с полимером, поэтому прошу прощения, если это не относится, но aria-labelledby работает при использовании нативного HTML.

<button id="foo">foo</button>
<button id="bar">bar</button>

<input type="radio" name="gender" value="male" aria-labelledby="foo">Male<br>
<input type="radio" name="gender" value="female" aria-labelledby="bar">Female<br>

Когда я переключаюсь на переключатель "Мужской", я слышу "радио foo". Когда я переключаюсь на кнопку "Женский", я слышу "панель радио". Это работает с JAWS, NVDA и VoiceOver (iOS). Так что в теории ваш aria-labelledby пример должен работать. Можете ли вы проверить код, который генерируется, чтобы убедиться, aria-labelledby установлено в элементе html и что элементарный элемент, на который ссылается идентификатор, существует?

Но мне неясно, что вы подразумеваете под

"Я пытаюсь заставить программу чтения с экрана считывать, какая кнопка переключателя находится при наведении".

Пользователь программы чтения с экрана не будет использовать мышь, поэтому он не будет "парить" над элементом. Они будут переходить на него или переходить к нему через DOM (стрелка вверх / вниз) или использовать клавишу быстрого доступа ("A" для JAWS, "R" для NVDA). Если вы действительно наводите курсор мыши на переключатель, вы ничего не услышите от программы чтения с экрана (хотя у NVDA есть опция для отслеживания мыши, но это не типичная настройка для обычного пользователя программы чтения с экрана, но даже с этим опция установлена, я правильно слышу aria-labelledby значение).