Accessible popovers for additional help information

Question

tl;dr: How would I implement an accessible popover? (I'm using bootstrap at the moment, but open to any ideas)

One of the biggest accessibility problems I face is the use of popovers when providing extra help information.

The way I understand it, popovers (and I guess more broadly, modals) are used for extra information when a tooltip cannot suffice. Popovers require the user to "open/click/activate" a help button for a new DOM element to be appended (or otherwise displayed), with the help information. While tooltips passively shows/speaks information whenever a user focuses the element. The tooltip widget itself is still being considered by WAI-ARIA

Say I have a text-input field with a label. I want to attach supplementary content to that input, in the form of a clickable/actionable button. Initially I had the popover button in the label, before finding out the hard way that label's can't have block-level child elements.

I'm aware this probably isn't the best way of implementing an accessible popover. Here is my help button:

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

and here is my 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>

What should I be using/doing? Would this be a good use case for live-regions? If so, any example code?

Answer 1

It doesn't necessarily have to be a live region. It feels more like a modal dialog, especially if you have interactive elements in it, such as the hide button.

There's a working example of an accessible modal dialog on https://github.com/gdkraus/accessible-modal-dialog