如何让语音焦点集中在我的模态中？

Posted 2023-02-23

【中文标题】如何让语音焦点集中在我的模态中？

【英文标题】：How do I get voice over focus to my modal?

【发布时间】：2016-01-29 21:48:15

【问题描述】：

我使用的是 iphone 6+ 并开启了语音（辅助功能）选项。我在单击链接时打开了退出模式，并将键盘焦点设置在模式上（使用 js）。这一切都很好。但是，语音焦点没有切换到我的模态，它仍然在触发链接上。

如何将语音焦点转移到模态？ 这是模态代码

<div class="modal-container" id=" modalModel.modalId ">
    <div class="modal-mask" data-ng-click="onMaskClick($event)">
    </div>
    <div class="modal-body" tabindex="-1" role="dialog" aria-label=" modalModel.modalTitle ">
        <div class="modal-body-container">
            <h4 class="modal-title heading-4"> modalModel.modalTitle </h4>
            <button type="button" class="modal-close" data-ng-click="closeModal($event)">
                <span class="btn-text">close</span>
                <span class="icon chrome-blue-x-round"></span>
            </button>
            <div class="modal-contents">
                <div class="modal-contents-wrapper" data-ng-transclude></div>
                xxxxxx xxxx
            </div>
        </div>
    </div>
</div>

当模式弹出时，modal-body 类元素具有焦点。我正在使用 ios 9。

【问题讨论】：

@dandavis 它的存在是为了防止用户在它不可见时点击它。我可以很好地专注于它，但焦点/光标上的声音不会继续

你有我们可以试试的例子吗？我以前做过这个，它工作正常。看看你的代码在运行会有所帮助。

整个代码太多太复杂，无法粘贴到此处，甚至无法设置小提琴。模态弹出并且焦点现在在模态主体上，但光标上的语音不会移动到模态。我怀疑这是因为我没有专注于普通的键盘可访问项目。我将尝试让它专注于关闭button，如果可行，我会发布答案

由于您的示例代码有 tabindex='-1'，这应该足以使您的对象成为“普通键盘可访问项”。

@slugolicious 键盘焦点对模态很好，问题是光标/焦点上的声音

【参考方案1】：

当模式打开时，我可以通过将键盘焦点放在关闭按钮上来将语音光标放在模式中。

如果键盘焦点不在键盘可以自然聚焦的元素上，则语音光标将不会在模态框内移动。由于关闭按钮是一个按钮，所以这有效

        <button type="button" class="modal-close" data-ng-click="closeModal($event)">
            <span class="btn-text">close</span>
            <span class="icon chrome-blue-x-round"></span>
        </button>

【参考方案2】：

您必须专注于可聚焦的项目。如果你想将它设置在通常不可聚焦的东西上，请添加 tabindex=0。还有一些其他的快速技巧可以让 VO 读取整个模态。添加 aria-labelledby="id_of_title" aria- describeby="id_of_content" 不要使用哈希 '#'。