Question

我有一个按钮，单击该按钮可从屏幕上删除图像。我希望屏幕阅读器宣布：“图像被删除”，当这种情况发生时。使用ARIA最简单的方法是什么？

谢谢！

Answer 1

在我的脑海里，我想象你有一个用户上传的3张图片的网格。这些图像中的每一个最有可能位于DIV中。然后，用户可以单击删除图像的“删除”按钮/链接。

假设是这种情况，我的建议是将删除的图像替换为具有role="alert"和某种形式的“此图像已删除”文本的新元素。这将允许视觉用户看到图像被删除，并为您的屏幕阅读器提供回读的内容。

以下示例在点击“删除”链接时会显示“图片已被删除”。

注意：使用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>

单击按钮时触发屏幕阅读器

1 个答案: