使用chromevox阅读图表时遇到问题

Question

我在我的项目中使用ChromeVox进行辅助功能测试。我在尝试为图表提供咏叹调标签时遇到了问题。我读到我们可以用aria-describeby来描述图形。但ChromeVox在从一个控件向前导航到图表时不会读取描述。它在向后导航时读取描述。 我已在一个简单的应用程序中隔离了该问题。在我的例子中，我有一个标题“索引”，然后为图表我使用了一个矩形。然后我有一个“点击”按钮。

图片：使用ChromeVox读取图形描述的示例Web应用程序：

在上面的网页中，当我关注“索引”标题然后向前导航到“graphDiv”div时，ChromeVox只读取aria-label“图形”并且不读取“mydesc”div中的描述。如果我从＆＃34; Click＆＃34;按钮到“graphDiv”div，ChromeVox读取说明。

代码段：

@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<div id=”outerDiv”>
    <div id="mydesc" style="display:none"> This is a red rectangle </div>   
    <div id=”graphDiv” tabindex="0" aria-label="graph" aria-describedby="mydesc" >
        <canvas id="myCanvas"></canvas>
        <script>
            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#FF0000';
            ctx.fillRect(0, 0, 80, 80);
        </script>
    </div>
    <button>Click</button>
</div>

我删除了“outerDiv”来编辑代码。现在，ChromeVox具有预期的行为，即它在从＆＃34;索引＆＃34;移动时读取描述。 to“graphDiv”div以及来自＆＃34; Click＆＃34;按钮到“graphDiv”div。

编辑代码：

@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<div id="mydesc" style="display:none"> This is a red rectangle </div>  
    <div tabindex="0" aria-label="graph" aria-describedby="mydesc" >
        <canvas id="myCanvas"></canvas>
        <script>
            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#FF0000';
            ctx.fillRect(0, 0, 80, 80);
        </script>
    </div>
    <button>Click</button>