可访问的弹出窗口以获得额外的帮助信息

Question

tl;dr: 我将如何实现可访问的弹出窗口？（我目前正在使用 bootstrap，但欢迎任何想法）

我面临的最大的可访问性问题之一是在提供额外帮助信息时使用弹出框。

根据我的理解，弹出框（我想更广泛地说，模态框）用于在工具提示不够用时提供额外信息。弹出窗口要求用户 "open/click/activate" 一个帮助按钮，用于附加（或以其他方式显示）新的 DOM 元素，以及帮助信息。当用户聚焦元素时，工具提示被动 shows/speaks 信息。工具提示小部件本身是 still being considered by WAI-ARIA

假设我有一个带有标签的文本输入字段。我想以 clickable/actionable 按钮的形式将补充内容附加到该输入。最初我在标签中有弹出按钮，然后发现标签不能有块级子元素的困难方法。

我知道这可能不是实现可访问弹出窗口的最佳方式。这是我的帮助按钮：

<div class="facs-ctl-help">
    <a role="button" aria-label="Show help for Template Id 2,003" tabindex="0" data-toggle="popover" title="">
        <span class="fa fa-info btn-floating waves-effect facs-help-icon"></span>
    </a>
</div>

这是我的弹出窗口：

<div class="popover tooltip-help" role="tooltip">
    <div class="arrow"></div>
    <h3 tabindex="-1">
        <i class="fa fa-info btn-floating waves-effect facs-help-icon"></i>Help
        <span class="offscreen">&nbsp;for Template Id 2,003</span>
        <span class="offscreen">&nbsp;popup</span>
    </h3>
    <div class="popover-body"></div>
    <input type="button" class="btn pull-right tooltip-hide-btn" value="hide" aria-label="Hide help for Template Id 2,003">
    <div style="width: 100%; clear:both;"></div>
</div>

我应该怎样 using/doing？这会是实时区域的一个很好的用例吗？如果是这样，任何示例代码？

Answer 1

它不一定是实时区域。感觉更像是一个模态对话框，尤其是当你在里面有交互元素的时候，比如隐藏按钮。

https://github.com/gdkraus/accessible-modal-dialog

上有一个可访问模式对话框的工作示例

可访问的弹出窗口以获得额外的帮助信息

Accessible popovers for additional help information

html

javascript

dom

accessibility

wai-aria