Accessing the Bootstrap4 Carousel control tabbing is hindered as the focus does not shift to the carousel-caption div when using the tab key on the

Check out this example using PFB for the Bootstrap Carousel control:

Visit here to see the example in action.

The example works well, but there seems to be an issue with tabbing when I try to navigate using the keyboard. The focus does not go to the anchor tag inside the div with the class "carousel-caption".

I attempted to use the "tab-index" attribute for the anchor tag to fix the tabbing issue, but it's not functioning correctly.

I would like the tabbing to function as follows:

  • Left Arrow -> 1st anchor tag("LA is always so much fun!") -> 2nd anchor tag("Thank you, Chicago!") -> 3rd anchor tag("We love the Big Apple!") -> Right arrow

If anyone has a solution on how to implement proper tabbing, please share.

<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>
htmlcsstwitter-bootstrapbootstrap-4bootstrap-carousel

Answer №1

It is not possible to define tab index on an <li> element, so we had to enclose our ul.carousel-indicators>li inside an anchor tag (which supports tab index)...

Take a look at the updated code that demonstrates the same example with tabIndex implemented as per your requirement...

update: based on the questioner's feedback, the tab index now navigates to the <p> under the heading on each slide instead of the carousel indicators; the user should adjust the href for these <a> tags...

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

Answer №2

Your input suggests the desire to navigate between carousel controls using a keyboard.

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

To achieve this functionality, you can utilize the keydown event. This event is specifically mentioned in the documentation:

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

To implement this, ensure that your carousel div includes tabindex="-1" and attach an event handler as shown below:

$('#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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Column CSS Property with Google Maps in Chrome: A Potential Bug?

I'm facing an interesting issue and I could use some help understanding or fixing it. It seems like there might be a bug or a solution to this problem. I am currently working on a layout using the CSS3 property columns. Everything looks fine in Firefo ...

htmlcssgoogle-mapsgoogle-chrome

Converting JSON Data to CSS Styles in Angular

Currently facing a challenge that has left me a bit stumped... I'm currently developing an Angular application that requires certain fields to be colored based on values stored in an XML file on the server. These colors are configured through an exter ...

javascriptcssangulartypescript

What factors should you consider when selecting between Bootstrap and MDBootstrap for your class usage?

My CSS skills are not very advanced. I have been using MDBootstrap for most of the styling on my project, but I am not a fan of its table styling. I would prefer to use the table CSS class from regular Bootstrap instead of MDB. I have both dependencies inc ...

cssbootstrap-5mdbootstrap

Monitoring the parent's CSS attribute in Angular 2

One of my directives dynamically adds the number of pixels corresponding to its parent element's right CSS attribute. import { Directive, ElementRef, AfterViewInit } from "angular2/core" @Directive({ selector: "[d]" }) export class Positioni ...

htmlcsstypescriptangular

Implementing a function trigger upon selection in JavaScript

I'm currently studying JavaScript and working on a basic project that involves generating random strings of different lengths. If you're interested, feel free to check out my codepen code [here][1]. My question revolves around the functionality ...

javascripthtmlcss

Ways to position one div below another div

I need the #blue div positioned below the #green div The #blue div should have a margin-top: -10px; property <style> #red{ width: 400px; border: 1px solid red; } #green{ width: 100%; height: 100px; ...

csshtmlmargin

User's information will only be updated once the page is refreshed

I am encountering an issue with displaying two ul elements based on user login status. When I log in, the first ul is shown immediately, but the second ul is only displayed after a page refresh. Initially, the value in "accountService.currentUser" is null ...

htmlangulartypescript

Establishing the focal point and emphasis within a textarea input field

I am presenting a textarea input through PHP with the following command : print " '<textarea rows='16' cols='30'>$flist'</textarea><BR>"; I want the textarea to receive focus and automatically select the co ...

javascriptphphtmltextarea

I aim to display an image with fixed dimensions, unaffected by varying screen resolutions

When monitor resolutions are altered, images may appear in varying sizes even if they are coded with metric values such as cm or mm. Is there a way to maintain the exact size of images displayed on monitors? ...

htmlcssimagesize

Attempting to position the input field beside the label

I need help aligning the input field box next to my label. Currently, there is a gap between the text (label) and the input field when clicking on Item#1 and Invoice Number. I want the input field to be directly next to the label. Can anyone assist me with ...

cssbootstrap-4

Does jQuery's click event not successfully hide an element on Internet Explorer?

In my dropdown menu, I have the following options: <div class="my_div"> <select name="selection" id="select_id"> <option value="0">A</option> <option value="5">B</option> ...

jqueryhtmlcss

AngularJS selectChosen does not have built-in support for translation

<select chosen options="myOptions" ng-model="StatCode" data-placeholder="{{'PleaseSelect' | translate}}" ng-options="item[0] as item[1] + ' / ' + item[0] for item in myOptions" required>< ...

angularjshtml

My intention is to personalize the react-select component to suit my needs

My task involves changing the size of the arrow to be smaller and positioning it under the circle. Despite setting the width and height in the CSS, the desired effect is not achieved. To align with the UI requirements, I need to adjust the swiper-button- ...

htmlcssreactjs

Show concealed content for individuals who do not have javascript enabled

One of the challenges I faced was creating a form with a hidden div section that only appears when a specific element is selected from a list. To achieve this, I utilized CSS to set the display property of the div to 'none' and then used jQuery t ...

javascripthtmlcss

The button now has a stylish 5px border, making it slightly larger in size. However, it seems

How can I add an active class with a 5px border-bottom on a button without increasing the button size by 5px? The box-sizing property is not working for me. Is there a simple solution to achieve this? *, *:after, *::before { -webkit-box-sizing: border ...

htmlcss

Creating distance between two text boxes in bootstrap is easy with the use of margins. By

I am looking to create a small white space between two text boxes. <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="row col-lg-12 col-sm-12"> <div class ...

htmlcssbootstrap-4

What steps should be taken to avoid an event from occurring when an error message is encountered?

I have a dropdown list of cars where an error message is displayed if any of them becomes inactive. When the error message is shown, clicking on the Route Car button should prevent any event from occurring, i.e., no modal popup should be displayed. How ca ...

javascriptjqueryhtmlvalidationbootstrap-modal

What is the best way to ensure input text fills the entire grid?

Take a look at this code snippet: <div class="form-group col-md-6"> <label class="col-md-4">Last Updated (Real Time)</label> <input class="form-control col-md-8" type="text" ng-model="status.lastUpdated" ng-readonly="true"/ ...

htmlcsstwitter-bootstrap-3col

Encircling a particular group of cells with a border

I have completed the component with a table layout. My current challenge is figuring out how to surround a range of selected cells with a border, similar to the first cell in the group shown below: https://i.stack.imgur.com/5Euht.png I attempted using d ...

javascripthtmlcss

Is it possible to rearrange column order in Bootstrap 4x according to different viewport sizes?

One of the great things about Bootstrap is its ability to rearrange columns regardless of the HTML structure. However, I am looking to have a different order of elements when the viewport size is smaller (e.g., Mobile). The current HTML structure looks li ...

htmlcssbootstrap-4