Question

如果用户使用的是IE11或更低版本，以下代码段显示window.alert：

function isIE() {
  // If IE11 or bellow return true
  return window.navigator.userAgent.match(/(MSIE|Trident)/);
}

if (!isIE()) {
  window.alert("Your browser is outdated!");
}

它可以工作，但是应该可以访问window.alert，以便屏幕阅读器可以读取window.alert内的文本，即“您的浏览器已过时！”。

我正在使用Apple VoiceOver在MacBook上进行测试。

它可以在FireFox中运行，并且VoiceOver会读取window.alert中的文本。

但是，如果我在Chrome中运行完全相同的测试，则VoiceOver不会读取window.alert内的文本。

有帮助吗？

Answer 1

作为替代方案，您可以使用aria-live个区域。

MDN：（https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions）。

演示：（https://support.freedomscientific.com/Training/Surfs-Up/AriaLiveRegions.htm）。

Answer 2

不幸的是，类似于firefox的VoiceOver和Chrome在读取警报方面存在问题。我试图以多种方式解决它们，但没有一个可以解决...下面是一些示例：

Few ideas, working mostly with Windows OS (FF, CH, IE, Edge) NVDA but MacOS say by when try to read VoiceOver and FF or Chrome...

这可以正常工作，但是在这里我使用focus（），因此使用屏幕阅读器的用户将失去焦点。因此，这是完全错误的方式... Not recommended method with focus()

正确的方法是here，但是不幸的是，当屏幕阅读器VoiceOver读取添加到警报字段的内容时，CHROME和FF不能使用

    <html>
    <head>
        <title>Assertive test 3</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>

        </style>
    </head>
    <body>
        <div>
            <p>Click submit button to see message</p>
            <p>
                <input type="submit" name="button" id="button" value="Submit">
            </p>
        </div>
        <div id="errors" aria-live="assertive">
            <div id="divBlok" role="alert">
            </div>
        </div>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script>
            var elementX = document.getElementById("divBlok");
            var alertText = document.createTextNode("Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
            $("#button").click(function (e) {
                elementX.appendChild(alertText);
            });
        </script>
    </body>
</html>

VoiceOver不会在Chrome中读取window.alert中的文本

2 个答案: