NVDA无法读取Microsoft Edge中具有“对话框”角色的div上的aria标签

Question

In our website, there's a div element that has the role of "dialog" and an aria-label attribute.

It works just fine for the following combinations:

Voice Over + Google Chrome / Mozilla Firefox / Safari
NVDA + Google Chrome / Mozilla Firefox / Internet Explorer

However, it is completely ignored when we use:

NVDA + Microsoft Edge(*)

(*) It actually works on an older version of Edge (38), but it doesn't work for the latest: 42.

This is the element:

<div role="dialog" aria-label="name">
 <a title="Hide Dialog" href="#" id="eg"></a> 
</div>

In all successful cases (eg: NVDA + Chrome), it reads "name dialog" , then "hide dialog link" .

In NVDA + Edge (42) it goes:

"Hide dialog link, hide dialog" .

In NVDA + Edge (38) it goes: "Clickable link hide dialog" then "name dialog"

Any ideas?

Answer 1

Have you tested with JAWS? Internet Explorer has some trouble with role="dialog" as explained in Scott O'Hara's blog on The Paciello Group website. Read the whole thing but in particular, look for the section called "IE11 needs the first element of the modal dialog to be its heading".

IE11 needs the first element of the modal dialog to be its heading

The first element of a modal dialog should be its heading (which provides its accessible name). This requirement is to compensate for Internet Explorer 11 + JAWS specifically. With this pairing, setting focus to the dialog element itself will announce the accessible name of the dialog, the dialog role, and then JAWS will re-announce the accessible name of the dialog, and the role of the first child element of the dialog.

For instance, if the dialog's heading provides the accessible name for the dialog, then JAWS + IE11 will announce “heading text, dialog. heading text, heading level #”. However, if the first child is another element that does not match the accessible name of the dialog, such as a button with text “close”, it will be announced as: “heading text, dialog. heading text, button”

Now, you're asking about Edge and not IE, but you didn't say anything about testing with JAWS either. It could be that NVDA on Edge might have the same problem as JAWS on IE, but that's just a stab in the dark for you to check into. The way you describe the problem, it sounds like the same problem as IE and it's something you have to code around (that is, it's a bug in IE and/or Edge, and not a bug in your code, but you still have to code around it if you want it to work).

Answer 2

NVDA is more compatible with Firefox, Jaws is more compatible with Internet Explorer and Edge.

Narrator is More compatible with Edge.

In general if you are using anchor tag then you have to provide some text inside the anchor. Also it is not a good practice to use empty anchor tags.

If we use basic html semantic standards then it will work fine.

Also if we are using role="dialog" we will send the focus to the container of the dialog, will use aria-labelled-by to relate with the dialog heading.