Basically the title. I have a simple react component (form field) with a few properties. When I pass on the read only property , the screen reader still reads out the field as edit and then read only. It can cause confusion to non-sighted users.
I have searched on the net but couldn't find a lot of articles. It looks like its a limitation of the screen reader. I am using NVDA. Does anyone has any workaround so that edit is not announced? Attaching pic for reference: read-only field
It's not a problem.
"It can cause confusion to non-sighted users."
I'm curious if that statement is your opinion or have you tested with non-sighted users to confirm it's confusing? My guess is it's just your opinion, which is a pretty common thing for people who are new to using screen readers. (If you're not new to using a screen reader, then I apologize. I'm just going on what I've heard others say when they're new.)
The "edit" you're hearing is not referring to whether the field itself is editable. The "edit" is the type of HTML element. In the accessibility world, this is typically referred to as the "role".
Every element in the DOM has a role. It could be a heading, a table, a list item, a button, a checkbox, an input field, etc. Some elements have a "null" role such as a <div> or <span>. Those elements don't have any semantic meaning. But everything else has a semantic role.
In the case of input fields, the official role is "textbox". How a screen reader announces that role is totally up to the screen reading software. Usually the actual role is announces, such as "table" or "heading" or "button". "Textbox" is one of the outliers where a screen reader won't say the element is a "textbox". Instead, it says it's an "edit" element. That is, "edit" means it's an <input>. It does not mean you can edit the contents of the input.
For NVDA users, they know an input field is going to be announced as "edit". JAWS is similar and says "read only edit". VoiceOver on iOS is a little better and announces them as "Text field, read-only".
In summary, you don't want to get rid of the "edit" because that would be removing the role of the element and the user wouldn't know it's an <input> field.
