2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00

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
This commit is contained in:
Patrick H. Lauke
2019-06-04 08:36:57 +01:00
committed by XhmikosR
parent d6e0552efe
commit 87030c98ac
2 changed files with 11 additions and 3 deletions
+1 -3
View File
@@ -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 >}}