如何使声音聚焦于我的模态? [英] How do I get voice over focus to my modal?

问题描述

我正在使用iphone 6+，并且启用了语音提示(可访问性)"选项.我在链接单击上打开退出模式，然后将键盘焦点设置在模式上(使用js).这一切都很好.但是，聚焦声音并没有切换到我的模式，而是仍在触发链接上.

I am using iphone 6+ and with the voice over (accessibility) option on. I have my exit modal open on a link click and I set my keyboard focus on the modal (with js). This all works fine. However, the voice over focus is not switched to my modal, it is still on the trigger link.

如何使声音集中在模式上?这是模态代码

How do I get the voice over focus to the modal? Here is the modal code

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

The modal-body class element has focus when the modal pops up. I am using iOS 9.

推荐答案

我可以通过在模式打开时将键盘焦点放在关闭按钮上来将声音集中在模式中的光标上方.

如果键盘焦点不在键盘可以自然聚焦的元素上，则出现，光标上的语音不会在模式内部移动.由于关闭按钮是一个按钮，因此可以使用

It appears if the keyboard focus is not on an element which the keyboard can focus on naturally, then the voice over cursor will not move inside of the modal. Since the close button is a button, this worked

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

这篇关于如何使声音聚焦于我的模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！