Bootstrap Accessibility - Carousel Demo

by Peter Aad

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <fieldset aria-label="carousel buttons" aria-controls="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active text-hide"><a href="#" role="link"><span class="sr-only">Slide 1</span></a>
            </li>
            <li data-target="#carousel-example-generic" data-slide-to="1" class="text-hide"><a href="#" data-target="#carousel-example-generic" data-slide-to="1" role="link"><span class="sr-only">Slide 2</span></a>
            </li>
            <li data-target="#carousel-example-generic" data-slide-to="2" class="text-hide"><a href="#" data-target="#carousel-example-generic" data-slide-to="2" role="link"><span class="sr-only">Slide 3</span></a>
            </li>
        </ol>
        <ul class="controls">
            <li><a class="control-btn pause btn" href="#carousel-example-generic" title="Pause" role="button" aria-label="pause">
        <span class="glyphicon glyphicon-pause" aria-hidden="true"></span>
        <span class="sr-only">Pause</span></a>
 <a class="control-btn play btn active" href="#carousel-example-generic" title="Play" role="button" aria-label="play">
        <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
        <span class="sr-only">Play</span></a></li>
        </ul>
    </fieldset>
    <!-- Wrapper for slides -->
    <ul class="carousel-inner">
        <li class="item active" aria-hidden="false">
            <img src="http://placehold.it/900x500/250/fff" alt="first slide image">
            <div class="carousel-caption">
                <h3>heading 1</h3>
                <p>description 1</p>
            </div>
        </li>
        <li...

CSS

.carousel {
    max-width:900px;
    margin:0 auto;
}
ul.carousel-inner {
    padding-left:0;
}
a:focus {
    outline:dotted red 2px !important
}
.carousel-indicators li {
    text-indent:0;
    background-color:transparent;
    border:0;
    border-radius:0;
}
.carousel-indicators .active {
    background-color:transparent;
}
.carousel-indicators li a {
    width: 10px;
    height: 10px;
    margin: 1px;
    background-color: #000\9;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    border-radius: 10px;
    display:block;
}
.carousel-indicators .active a {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #fff;
}
ul.controls {
    padding:0;
    margin: 1px;
    list-style:none;
    position:absolute;
    z-index:16;
    bottom: 24px;
    left: 54%;
}
ul.controls li .control-btn {
    display:inline;
    color:#fff;
}
ul.controls li .control-btn.active {
    display:none;
}
@media screen and (min-width: 768px) {
    ul.controls {
        bottom: 34px;
    }
}

JavaScript

$(function () {
    $('.carousel').carousel({
        interval: 4000
    });
    $('.carousel-indicators a').click(function (e) {
        e.preventDefault();
    });
    // pause button
    $('.pause').click(function () {
        $('.control-btn').removeClass('active');
        $(this).addClass('active');
        $('.carousel').carousel('pause');
        $('.play').focus();
    });
    // play button
    $('.play').click(function () {
        $('.control-btn').removeClass('active');
        $(this).addClass('active');
        $('.carousel').carousel('next').carousel('cycle');
        $('.pause').focus();
    });
    $('.carousel').on('slide.bs.carousel', function (e) {
        //do something…
        $(".item", this).attr("aria-hidden", "true");
$('.carousel-indicators').attr('tabindex','-1');
$('.carousel').carousel('pause');
        $(e.relatedTarget).attr("aria-hidden", "false").attr('tabindex','0').focus();
    })
});