Bootstrap
Tooltips and Accessibility #41911
-
|
I wanted to follow up on issue #39945 and my comment there. It seems to me that setting A solution to that seems to be the use of the aria-description attribute, but that’s not documented for v4.6 or v5.1. For testing purposes with ATs I used this test file: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Links</title>
<link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>A link: <a href="http://google.com/" title="Link to the Google search engine">Google</a></p>
<p>A link with Tooltip: <a href="http://google.com/" title="Link to the Google search engine" data-tooltip="tooltip">Google</a></p>
<p>A link with Tooltip und ARIA 1: <a href="http://google.com/" title="Link to the Google search engine" data-tooltip="tooltip" aria-description="Link to the Google search engine">Google</a></p>
<p>A link with Tooltip und ARIA 2: <a href="http://google.com/" title="Link to the Google search engine" data-tooltip="tooltip" aria-describedby="#descr">Google</a></p>
<p>A link with Tooltip und ARIA 3: <a href="http://google.com/" title="Link to the Google search engine" data-tooltip="tooltip" aria-label="Link to the Google search engine">Google</a></p>
<p>A link with Tooltip und ARIA 4: <a href="http://google.com/" title="Link to the Google search engine" data-tooltip="tooltip" aria-labelledby="#descr">Google</a></p>
<div class="d-none">
<p id="descr">Link to the Google search engine</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script>
$(function() {
$("[data-tooltip='tooltip']").tooltip();
});
</script>
</body>
</html>Interestingly, Aria 1 and 3 are announced by an AT (I think it’s JAWS) and 2 and 4 are not (maybe because Now I’m curious about the community’s suggestions… 🤓 Addendum see also ARIA: tooltip role on MDN. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 3 replies
-
Beta Was this translation helpful? Give feedback.
-
|
I’m not sure what this link tells me: the referenced Google page does not use/show tooltips and uses the aria-label attribute only, and just on some elements. My question, though, is primarily concerned with showing tooltips on elements… |
Beta Was this translation helpful? Give feedback.
-
|
this is for unblock Google on Chromebook for students this is just the most accessible link |
Beta Was this translation helpful? Give feedback.
-
|
I still do not understand how that answers my question and concern? |
Beta Was this translation helpful? Give feedback.
-
|
Based on comment #39945 (comment) I tried the following test: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Links</title>
<link href="bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<p>A link: <a href="http://google.com/" title="Link to the Google search engine">Google</a></p>
<p>A link with Tooltip: <a href="http://google.com/" title="Link to the Google search engine" data-bs-title="Link to the Google search engine" data-bs-toggle="tooltip">Google</a></p>
<script type="module" src="bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>
</html>using the BSv6 resources from #39945 (comment). I can confirm that the tooltips are accessible using:
However, it did not work with:
|
Beta Was this translation helpful? Give feedback.
Based on comment #39945 (comment) I tried the following test:
using the BSv6 resources from #39945 (comment).…