CODEWITHSUNDEEP
htmlaccessibilitywai-ariavoiceoverscreen-readers
Bob
Bob

Reputation: 482

Html accessibility - read another element's description

Hello any accessibility gurus,

I want to have this button element, when tabbed on, would trigger the screen read of an input element instead.

I tried pointing the aria-labelledby from the button to the input, to have the input's aria-label being read out. But the button still reads out its own description, when tabbed on.

<fieldset>
    <input type="radio" id="inputid" aria-label="read me">
    <button aria-labelledby="inputid">don't read me</button>
</fieldset>

Is there a way to read another element's content?

Thank you,

2022-12-06 Edit: Following Andy's comment, the input element is only visually hidden, so it was moved offscreen with css left: -10000px.

Upvotes: 0

Views: 414

Answers (1)

Andy
Andy

Reputation: 6115

I believe aria-labelledby is not used according to the standards, which might explain undefined behaviour.

The Accessible Name and Description, step C mentions the following:

If the embedded control has role textbox, return its value.

That means that if an <input>, which has implicit role textbox, is used as part of an accessible name, not its label, but its value is used as the name.

Further, the ARIA standard on aria-labelledby reads:

If the interface is such that it is not possible to have a visible label on the screen, authors SHOULD use aria-label […]

The main purpose of aria-labelleby is to refer to part of the visible contents of an element like a <form> to label it. Most commonly, this would be a heading like <h2>.

The use case of this question is currently unclear to me. The example provided does not make sense with a single radio input.

  • If the <input> is completely hidden, visually and from assistive technology, why is it there in the first place? <input type="hidden"> would be the more correct input to use if the form data is needed
  • If it’s only hidden visually, both the button and the input can be focussed, which is terribly confusing. Does the input appear on screen once it receives focus?

Upvotes: 1

Related Questions