NVDA無法讀取Microsoft Edge中具有“對話框”角色的div上的aria標簽

Question

在我們的網站中，有一個div元素，具有“ dialog”（對話）和aria-label屬性的作用。

它適用於以下組合：

旁白+ Google Chrome / Mozilla Firefox / Safari
NVDA + Google Chrome / Mozilla Firefox / Internet Explorer

但是，當我們使用以下命令時，它將被完全忽略：

NVDA + Microsoft Edge（*）

（*）實際上可以在舊版本的Edge（38）上使用，但不適用於最新版本：42。

這是元素：

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

在所有成功的情況下（例如：NVDA + Chrome），它將讀取"name dialog" ，然后顯示"hide dialog link" 。

在NVDA + Edge（42）中：

"Hide dialog link, hide dialog" 。

在NVDA + Edge（38）中： "Clickable link hide dialog"然后是"name dialog"

有任何想法嗎？

Answer 1

您是否已通過JAWS測試過？ 正如Paciello Group網站上的Scott O'Hara的博客中所述 ，Internet Explorer在Role role="dialog"存在一些麻煩。 閱讀全部內容，但尤其要查找名為“ IE11的部分，該標題為模式對話框的第一個元素”。

IE11需要模式對話框的第一個元素作為其標題

模態對話框的第一個元素應該是其標題（提供其可訪問的名稱）。 此要求是為了專門補償Internet Explorer 11 + JAWS。 通過這種配對，將焦點設置到對話框元素本身將宣布對話框的可訪問名稱，對話框角色，然后JAWS將重新宣布對話框的可訪問名稱以及對話框的第一個子元素的角色。

例如，如果對話框的標題提供了該對話框的可訪問名稱，則JAWS + IE11將宣布“標題文本，對話框”。 標題文字，標題級別為“”。 但是，如果第一個子元素是與對話框的可訪問名稱不匹配的另一個元素，例如帶有“關閉”文本的按鈕，則它將宣布為：“標題文本，對話框”。 標題文字，按鈕”

現在，您在問的是Edge而不是IE，但您也沒有說有關使用JAWS進行測試。 Edge上的NVDA 可能與IE上的JAWS存在相同的問題，但這只是暗中的檢查。 描述問題的方式，聽起來和IE一樣，都是必須解決的問題（也就是說，這是IE和/或Edge中的錯誤，而不是代碼中的錯誤，但是您仍然必須代碼（如果您希望它可以正常工作）。

Answer 2

NVDA與Firefox更加兼容，Jaws與Internet Explorer和Edge更加兼容。

講述人與Edge更加兼容。

通常，如果您使用錨標記，則必須在錨內提供一些文本。 同樣，使用空錨標簽也不是一個好習慣。

如果我們使用基本的html語義標准，那么它將正常工作。

同樣，如果我們使用role =“ dialog”，我們會將焦點發送到對話框的容器，並將使用aria-labeled-by與對話框標題相關。