Программа чтения с экрана не читает радиокнопку с пометкой 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 radio». Когда я переключаюсь на кнопку «Женский», я слышу «панель радио». Это работает с JAWS, NVDA и VoiceOver (iOS). Так что в теории ваш aria-labelledby пример должен работать. Можете ли вы проверить сгенерированный код, чтобы убедиться, что aria-labelledby установлен для элемента html и что элемент, на который ссылается идентификатор, существует?

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

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

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