Screen reader not reading radio button with aria-labelledby reference on hover

0
votes

Polymer 1.* and NVDA reader

I have a group of radio buttons that do not have labels. I am trying make the screen reader read out what the radio button is on hover.

I tried aria-labelledby which, from what I read, should reference a element by id and read out it's content.

However, I am not having success. When I hover over the paper-radio-button it does not read out yes. I have to click it first which isn't idea when compared to the example on https://www.w3.org/TR/wai-aria-practices/examples/radio/radio-2/radio-2.html.

Any ideas on how to get aria-labelledby to reference and read out the element content with id yes so it will read out yes on the radio button with no content/label?

      <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>
2
polymerwai-arianvdaweb-accessibility

2 Answers

0
votes

I'm not familiar with polymer, so apologies if this doesn't apply, but aria-labelledby works when using native 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>

When I tab to the "Male" radio button, I hear "foo radio". When I tab to the "Female" radio button, I hear "bar radio". This works with JAWS, NVDA, and VoiceOver (iOS). So in theory, your aria-labelledby example should work. Can you inspect the code that's generated to make sure aria-labelledby is set on the html element and that the elemented referred to by the ID exists?

But I'm unclear what you mean by

"I am trying make the screen reader read out what the radio button is on hover. "

A screen reader user will not use a mouse so they won't "hover" over an item. They'll tab to it or navigate to it through the DOM (up/down arrow) or use a quicknav key ('A' for JAWS, 'R' for NVDA). If you truly hover with a mouse over a radio button, you will not hear anything from the screen reader (although NVDA does have an option to track the mouse, but that's not a typical setting for a normal screen reader user, but even with that option set, I correctly hear the aria-labelledby value).

0
votes

The best approach would be to add an label and do not show it, so the screenreader still can find it. You can hide it e.g. with this css, or if you use bootstrap just use the class sr-only

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