React app duplicate reading on one page only

[jenniferhad]

Hi all,

We're building a big application and so far we've been able to make a really lovely, accessible website which NVDA can read well.

There is one page which is driving us crazy though. It is rendered in the same way as every other page in our react app, but for some reason it reads out EVERY input field twice, and any paragraphs, headers etc once.

Can anyone help please? I'm at my wits end on this one. I checked for solutions in the discussions already but the suggestions didn't fix the issue :-(

[Brian1Gaff]

I find a lot of screenreaders, tend to do this on forms. Is the page a form by any chance? I would not know the reason behind it but a guess might be that the screenreader reads the field descriptor as it would any other bit of text, then reads it again as it detects it as the field descriptor for the edit field itself. Maybe somebody else can throw some light on this one as I get it a lot on questionnaires and application forms, and even log ins sometimes. Even Jaws does it at some places. Of course if its not a form, then I'd be baffled. Does it work differently in different browsers? Brian ***@***.*** Sent via blueyonder. Please address personal E-mail to:- ***@***.***, putting 'Brian Gaff' in the display name field. Newsgroup monitored: alt.comp.blind-users ----- Original Message ----- From: "jenniferhad" ***@***.***> To: "nvaccess/nvda" ***@***.***> Cc: "Subscribed" ***@***.***> Sent: Wednesday, March 09, 2022 11:55 AM Subject: [nvaccess/nvda] React app duplicate reading on one page only (Discussion #13451)

…

Hi all, We're building a big application and so far we've been able to make a really lovely, accessible website which NVDA can read well. There is one page which is driving us crazy though. It is rendered in the same was as every other page in our react app, but for some reason it reads out EVERY input field twice, and any paragraphs, headers etc once. Can anyone help please? I'm at my wits end on this one. I checked for solutions in the discussions already but the suggestions didn't fix the issue :-( -- Reply to this email directly or view it on GitHub: #13451 You are receiving this because you are subscribed to this thread. Message ID: ***@***.***>

[jenniferhad]

Hi Brian,

This is a form. The strange thing is, we have many forms on this app, but this is the only form where all the inputs read out twice.

I've attached the code (redacted in places)

[jenniferhad]

example output.txt

[jenniferhad]

I'm just checking in different browsers. So far we've only had the issue reported in Chrome ( 99.0.4844.51)

[jenniferhad]

I've checked FF and Edge. The same error occurs :-(

[XLTechie]

I have loaded up your example--all be it an incomplete page without headers, so behavior may be different--in Firefox, and can't duplicate your issue. You don't specify *how* you are reading the page, so it is rather hard to know if I'm just using a different method to read it than you, or if it really doesn't replicate here. In my case I have tried: * In browse mode, reading with up/down arrow keys. * In focus mode, reading by tabbing or with review keys. I should note, that using your example, even after checking the first box, all the other form fields are "unavailable". Can't enter them while in focus mode, or enter focus mode by selecting them. This is likely because whatever javascript you have, that uses the value of that first checkbox to enable the remaining fields, is missing from your sample. Additionally, it is most likely that the double reading is caused by the CSS of the page. You have both IDs and CLASSes on these fields, but you didn't provide the CSS. Therefore we have no idea how the CSS is modifying the presentation of the fields. Thus, the two most important page effect generators, the CSS and the JS, are both missing from your example. Please provide a complete working (or replicating the undesired behavior, I should say) example, maybe on codepen or directly through your web server, or upload the relevant javascript and CSS here (not recommended since the interaction will still have to be cobbled together by testers).