CODEWITHSUNDEEP
htmlaccessibilitywai-ariawcag
pigeon
pigeon

Reputation: 1

Why NVDA does not read output's label?

I wanted to use <output> element, because I thought it's the best solution in terms of accesibility (and maybe SEO) for calculated valeus (I have two <input>s and one <output>). NVDA reads all changed outputs first, and then all labels.

I also use JS, somthing like this:

input1.addEventListener("input", ev => {
   let calculations = ev.target.value * smth;
   // ...
   installment.textContent = calculations + " EUR";
}

I tried some of this solutions but it doesn't work on Windows + Edge + NVDA:

<label for="installment">Installment: </label>
<output id="installment"></output>

and

<label id="installment_label">Installment: </label>
<output id="installment" aria-labelledby="installment_label"></output>

I also tried to add role="status" but it didn't work as well.

While this solution works good (although NVDA reads something like "10 000 EUR, Installment" it's still better):

Edit:

<label id="installment_label" aria-live="assertive">Installment:
    <span id="installment" aria-labelledby="installment_label"></span>
</label>

What would by the best solution? Should I stay with <label id=x><span aria-labelledby=x>?

Upvotes: -1

Views: 44

Answers (1)

Sean
Sean

Reputation: 8064

You should try something like this, using aria-atomic:

<label for="installment">Installment:</label>
<output id="installment" aria-live="polite" aria-atomic="true"></output>

When set to aria-atomic="true", the entire changed region as a whole will be presented, including the updated node's label, if there is one.

Upvotes: 0

Related Questions