单击按钮时触发屏幕-reader

Question

我有一个按钮，单击它会从屏幕上删除图像。我想让屏幕 reader 宣布："image removed" 发生这种情况时。使用 ARIA 最简单的方法是什么？

谢谢！

Answer 1

在我的脑海中，我想象您有一个由用户上传的 3 张图片组成的网格。这些图像中的每一个很可能位于 DIV 中。然后用户可以单击删除图像的 "delete" button/link。

假设是这种情况，我的建议是用具有 role="alert" 和某种形式的 "This image was deleted" 文本的新元素替换已删除的图像。这将允许视觉用户看到图像已被删除，并让您的屏幕 reader 回读一些内容。

以下示例在单击 'delete' link 时会显示 "The image was deleted"。

注意：对于 NVDA，这在 IE 中效果不佳，因为 NVDA/IE 似乎忽略了 role=alert。

    <!DOCTYPE html>
    <html>

        <script language="javascript">

            function deleteImage(img) {
              var theImage = document.getElementById(img);
              var theDiv = document.createElement("div");
              var theText = document.createTextNode("The Image was deleted.");
              theDiv.appendChild(theText);
              theDiv.setAttribute("role", "alert");
              theImage.parentNode.replaceChild(theDiv, theImage);
              return false;
            }

        </script>

        <body>
            <form>
                    <div id="image1"><img id="image1" src="" alt="image 1"/><a href="javascript:void(0);" onclick="return deleteImage('image1');">Delete</a></div>
                    <div id="image2"><img id="image2" src="" alt="image 2"/><a href="javascript:void(0);" onclick="return deleteImage('image2');">Delete</a></div>
                    <div id="image3"><img id="image3" src="" alt="image 3"/><a href="javascript:void(0);" onclick="return deleteImage('image3');">Delete</a></div>
            </form>
        </body>
    </html>

单击按钮时触发屏幕-reader

Trigger screen-reader when button clicked

html

wai-aria