html - 辅助功能 - Bootstrap4 Carousel control tabbing 在使用键盘中的 tab 键时不会转到 carousel-caption div
问题描述
PFB 就是一个例子,这里我用于 Bootstrap Carousel 控制。
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel2&stacked=h
这个例子工作正常,但是当我使用键盘上的 Tab 键时,控件不会继续在 div 内使用“carousel-caption”类锚定标签。
我尝试了锚标签的“tab-index”属性来设置标签,但标签无法正常工作。
我希望标签按如下方式工作:
- 左箭头 -> 第一锚标签(“洛杉矶总是那么有趣!”)-> 第二锚标签(“谢谢你,芝加哥!”)-> 第三锚标签(“我们爱大苹果!”)-> 右箭
谁能让我知道如何为
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="C:\Users\user1\Desktop\Sample\video-bg-static1.png" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<a>LA is always so much fun!</a>
</div>
</div>
<div class="item">
<img src="C:\Users\user1\Desktop\Sample\video-bg-static2.png" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<a>Thank you, Chicago!</a>
</div>
</div>
<div class="item">
<img src="C:\Users\user1\Desktop\Sample\video-bg-static3.png" alt="New york" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<a>We love the Big Apple!</a>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
解决方案
您不能在 上定义选项卡索引<li>
,因此我们必须将我们的锚标记包装ul.carousel-indicators>li
在一个锚标记内(它确实与选项卡索引一起使用)...
检查适用于相同示例并根据需要实现 tabIndex 的代码...
更新:根据提问者的评论,标签索引现在转到<p>
每张幻灯片的标题下方,而不是轮播指示器;这些<a>
标签的 href 将由用户更新...
.carousel-indicators .active {
border-radius: 50%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<a class="active" tabindex="2" href="#myCarousel" data-slide-to="0">
<p>LA is always so much fun!</p>
</a>
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<a class="" tabindex="3" href="#myCarousel" data-slide-to="1">
<p>Thank you, Chicago!</p>
</a>
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<a class="" tabindex="4" href="#myCarousel" data-slide-to="2">
<p>We love the Big Apple!</p>
</a>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="" data-target="#myCarousel" data-slide-to="0">
</li>
<li class="" data-target="#myCarousel" data-slide-to="1">
</li>
<li class="" data-target="#myCarousel" data-slide-to="2">
</li>
</ol>
<!-- Left and right controls -->
<a class="left carousel-control" tabindex="1" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" tabindex="5" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
推荐阅读
- python - Python 代码适用于解释器,但在我使用 pyinstaller 时不起作用
- c# - 如何在 Azure 应用服务中升级 .Net 框架之前或之后维护应用程序
- python - 如何绘制跨基因组坐标的 log2 倍数变化(使用 Deseq2 输出 csv)
- revit-api - 无法在 Revit 文件的视图中隐藏元素类别
- math - 圆形的二维标识符?
- javascript - JavaScript 从数组或函数为 nivo 生成 json 数据
- aws-api-gateway - serverless.yml 如何使用多个路径参数?
- sharedpreferences - 为什么 androidx PreferenceDataStore 不工作?
- javascript - 与模运算符混淆
- javascript - 检查元素是否:悬停(javascript或jquery)