如何让语音覆盖我的模态？

Question

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

如何让画外音聚焦到模态？这是模态代码

<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 class 元素在模式弹出时获得焦点。我正在使用 iOS 9.

Answer 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>

Answer 2

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

如何让语音覆盖我的模态？

How do I get voice over focus to my modal?

html

javascript

iphone

accessibility