diff options
author | Patrick H. Lauke <redux@splintered.co.uk> | 2019-06-04 10:36:57 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2019-06-04 10:36:57 +0300 |
commit | 87030c98accc7d2dbdbbd22eccbd4a5a837648ff (patch) | |
tree | e96bb6bc13aeb37fd17805db76810a4e194e6266 /site | |
parent | d6e0552efefff1d43cdf2a9f4c00662d9c055592 (diff) |
Docs: add accessibility/keyboard callout to popovers, tweak tooltips callout (#28851)
- Add same advice about keyboard/AT handling to popovers as a callout; also add information about not adding excessive content or interactive controls (and the suggestion to opt for a modal)
- Tweak the tooltips callout for consistency
Diffstat (limited to 'site')
-rw-r--r-- | site/content/docs/4.3/components/popovers.md | 10 | ||||
-rw-r--r-- | site/content/docs/4.3/components/tooltips.md | 4 |
2 files changed, 11 insertions, 3 deletions
diff --git a/site/content/docs/4.3/components/popovers.md b/site/content/docs/4.3/components/popovers.md index 5e16770748..fc82c3c6bf 100644 --- a/site/content/docs/4.3/components/popovers.md +++ b/site/content/docs/4.3/components/popovers.md @@ -135,6 +135,16 @@ var exampleEl = document.getElementById('example') var popover = new bootstrap.Popover(exampleEl, options) {{< /highlight >}} +{{< callout warning >}} +### Making popovers work for keyboard and assistive technology users + +To allow keyboard users to activate your popovers, you should only add them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the popover's content in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers, as this will make them impossible to trigger for keyboard users. + +While you can insert rich, structured HTML in popovers with the `html` option, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the `aria-describedby` attribute. As a result, the entirety of the popover's content will be announced to assistive technology users as one long, uninterrupted stream. + +Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover (by adding these elements to the `whiteList` or allowed attributes and tags), be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document's structure, there is no guarantee that moving forward/pressing <kbd>TAB</kbd> will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. In these cases, consider using a modal dialog instead. +{{< /callout >}} + ### Options Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`. diff --git a/site/content/docs/4.3/components/tooltips.md b/site/content/docs/4.3/components/tooltips.md index 607c49d2b7..cfede9f4b6 100644 --- a/site/content/docs/4.3/components/tooltips.md +++ b/site/content/docs/4.3/components/tooltips.md @@ -112,9 +112,7 @@ The required markup for a tooltip is only a `data` attribute and `title` on the {{< callout warning >}} ##### Making tooltips work for keyboard and assistive technology users -You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users. In addition, most assistive technologies currently do not announce the tooltip in this situation. - -Additionally, do not rely solely on `hover` as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users. +You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the tooltip in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users. {{< /callout >}} {{< highlight html >}} |