0

Polymer 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使用 id 引用和读出元素内容的任何想法，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>
4

2 回答 2

0

最好的方法是添加一个标签而不显示它，这样屏幕阅读器仍然可以找到它。您可以使用这个 css 隐藏它，或者如果您使用引导程序，只需使用该类sr-only

.visually-hidden { 
    position: absolute !important;
    height: 1px; width: 1px; 
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}
于 2018-07-04T06:35:23.853 回答
0

我不熟悉聚合物，所以如果这不适用，请道歉，但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 元素上设置并且 ID 引用的元素存在吗？

但我不清楚你的意思

“我正在尝试让屏幕阅读器读出悬停时单选按钮的含义。”

屏幕阅读器用户不会使用鼠标，因此他们不会“悬停”在项目上。他们将通过 DOM（向上/向下箭头）或使用快速导航键（“A”代表 JAWS，“R”代表 NVDA）来选择它或导航到它。如果您真的将鼠标悬停在单选按钮上，您将听不到屏幕阅读器的任何声音（尽管 NVDA 确实有一个跟踪鼠标的选项，但这不是普通屏幕阅读器用户的典型设置，但即使这样选项集，我正确地听到了aria-labelledby值）。

于 2018-07-03T22:07:19.803 回答