辅助功能 - Bootstrap4 Carousel 控件在使用键盘上的 tab 键时不会转到 carousel-caption div

Question

PFB就是例子，这里我用的是Bootstrap轮播控制

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel2&stacked=h

这个例子工作正常，但是当我使用键盘上的 Tab 键时，控件不会继续使用 class "carousel-caption".[= 锚定标记在 div 内13=]

我尝试了 "tab-index" 锚标记的属性来设置制表符，但制表符无法正常工作。

我希望按如下方式使用 Tab 键：

左箭头 -> 第一个锚标签("LA is always so much fun!") -> 第二个锚标签("Thank you, Chicago!") -> 第三个锚标签("We love the Big Apple!") -> 右箭头

谁能告诉我如何为

实现制表符

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

Answer 1

根据您的评论：

...Here I want to navigate between the carousel controls using the keyboard.

您可以使用 keydown event。如文档中所述：

Keyboard events are only generated by , and anything with the contentEditable attribute or with tabindex="-1".

需要将 tabindex="-1" 添加到轮播 div 以及事件处理程序。

$('#myCarousel').on('keydown', function(e) {
    if (e.keyCode == 37) {  // left arrow
        $('#myCarousel').carousel('prev')
    } else {
        if (e.keyCode == 39) {  // right arrow
            $('#myCarousel').carousel('next')
        }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel" tabindex="-1">
        <!-- 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="https://dummyimage.com/300x200/000/fff&text=1" 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="https://dummyimage.com/300x200/000/fff&text=2" alt="Chicago" style="width:100%;">

                <div class="carousel-caption">
                    <h3>Chicago</h3>
                    <a>Thank you, Chicago!</a>
                </div>
            </div>

            <div class="item">
                <img src="https://dummyimage.com/300x200/000/fff&text=3" 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="next">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Answer 2

您不能在 <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>

辅助功能 - Bootstrap4 Carousel 控件在使用键盘上的 tab 键时不会转到 carousel-caption div

Accessibility - Bootstrap4 Carousel control tabbing is not going on to carousel-caption div while using the tab key from Keyboard

html

css

twitter-bootstrap

bootstrap-carousel

bootstrap-4