如何将焦点转移到我的模态?

时间:2016-01-29 21:48:15

标签: javascript iphone html5 accessibility

我正在使用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。

2 个答案:

答案 0 :(得分:2)

当模态打开时,我可以通过将键盘焦点放在关闭按钮上来将光标聚焦在模态中。

如果键盘焦点不在键盘可以自然聚焦的元素上,那么光标上的声音就不会在模态内部移动。由于关闭按钮是一个按钮,这个工作

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

答案 1 :(得分:1)

您必须专注于可聚焦的项目。如果要将其设置为通常不可聚焦的内容,请添加tabindex = 0。还有其他一些快速技巧让VO读取整个模态。添加aria-labelledby =“id_of_title”aria-describedby =“id_of_content”不要使用散列'#'。