VoiceOver不能在Chrome中读取window.alert中的文本_在VoiceOver Safari浏览器中，“aria-label”下的文本被读取两次_Chrome不垂直对齐表单元格中的文本 - 腾讯云开发者社区

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

基础概念

VoiceOver 是 macOS 上的一个屏幕阅读器，用于帮助视力障碍的用户访问计算机界面。Chrome 是一个流行的网页浏览器。window.alert 是一个 JavaScript 函数，用于在浏览器中显示一个模态对话框，通常包含一条消息和一个“确定”按钮。

问题原因

VoiceOver 在 Chrome 中可能无法正确读取 window.alert 中的文本，这通常是由于 Chrome 浏览器对 alert 对话框的渲染和处理方式导致的。VoiceOver 可能无法正确识别或获取 alert 对话框中的文本内容。

解决方法

方法一：使用自定义模态对话框

为了避免 window.alert 的限制，可以使用自定义的模态对话框，并确保 VoiceOver 能够正确读取其中的文本。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Alert</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button onclick="showModal()">Show Alert</button>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <p>This is a custom alert message.</p>
        </div>
    </div>

    <script>
        function showModal() {
            document.getElementById('myModal').style.display = 'block';
            document.getElementById('myModal').focus();
        }

        function closeModal() {
            document.getElementById('myModal').style.display = 'none';
        }

        window.onclick = function(event) {
            if (event.target == document.getElementById('myModal')) {
                closeModal();
            }
        };
    </script>
</body>
</html>

在这个示例中，我们创建了一个自定义的模态对话框，并通过 JavaScript 控制其显示和隐藏。这样可以确保 VoiceOver 能够正确读取对话框中的文本。

方法二：使用 `window.confirm` 和 `window.prompt`

如果需要用户交互，可以考虑使用 window.confirm 或 window.prompt，这些方法在某些情况下可能比 window.alert 更容易被 VoiceOver 识别。

window.confirm("Are you sure?");
window.prompt("Enter your name:");

参考链接

通过以上方法，可以有效解决 VoiceOver 在 Chrome 中无法读取 window.alert 中文本的问题。

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

基础概念

问题原因

解决方法

方法一：使用自定义模态对话框

方法二：使用 window.confirm 和 window.prompt

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

方法二：使用 `window.confirm` 和 `window.prompt`