可访问的弹出窗口以获取其他帮助信息

Question

tl; dr：我如何实现可访问的弹出式窗口？ （我现在使用引导程序，但对任何想法持开放态度）

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

我理解它的方式，当工具提示不能满足时，弹出窗口（我想更广泛地说，模态）用于获取额外信息。弹出窗口要求用户打开/点击/激活＆＃34;用于附加（或以其他方式显示）的新DOM元素的帮助按钮，以及帮助信息。当用户聚焦元素时，工具提示被动地显示/说出信息。工具提示小部件本身为still being considered by WAI-ARIA

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

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

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

这是我的popover：

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

我应该使用/做什么？这对于实际地区来说是一个很好的用例吗？如果是这样，任何示例代码？

Answer 1

它不一定是活区域。感觉更像是一个模态对话框，特别是如果你有交互式元素，比如隐藏按钮。

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

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