Accessible Image Carousel: Keyboard Focus Buttons

Bootstrap Studio Help
1

Hi everyone,

 I've been using Bootstrap Studio for a few months, and have been successful at creating an image carousel; using the built-in studio component.  I have NO intrinsic coding knowledge; outside of what I query on Google and Youtube.  My background is broadcast production and design.  So the fact I'm able to do anything in this program, is a testament to the skill of the developers!
 I was curious about an accessibility feature, outside of what's available when you select "options," when the carousel is selected in the overview pane.

Does (or will) Bootstrap Studio have "keyboard focus" buttons for carousel components? I only ask because of what was recommended on AccessIQ.org (http://www.accessiq.org/create/content/anatomy-of-an-accessible-carousel).<br /> It seems that having an on-screen previous, pause, next, and play button is recommended. If there are no components for this in Bootstrap Studio, could these buttons be made in Photoshop/Illustrator, imported, and coded accordingly?

Thanks, Norman

2

You can add those functions to your carousel, all the way down you can see the script functions that give you those kinds of controls.

https://getbootstrap.com/docs/4.0/components/carousel/

Create any button or collection of, and apply the script functions to those. Of course you'll have to dig a little more on how you want it all to work out but it's something to start with :)

Saj

3

I couldn't help myself :)

For example fully functioning button toolbar using the BSS4 carousel as example.

Button toolbar

<div class="btn-toolbar carousel-btn-group">
    <div role="group" class="btn-group">
        <button class="btn btn-primary" type="button" id="btn-previous"><i class="fa fa-step-backward"></i><span>Previous</span></button>
        <button class="btn btn-primary" type="button" id="btn-pause"> <i class="fa fa-pause"></i><span>Pause</span></button>
        <button class="btn btn-primary" type="button" id="btn-play"> <i class="fa fa-play"></i><span>Play</span></button>
        <button class="btn btn-primary" type="button" id="btn-next"> <i class="fa fa-step-forward"></i><span>Next</span></button>
    </div>
</div>

JS Code

$(function(){
    $("#btn-play").on("click", function(){
        $("#carousel-1").carousel('cycle');
    });
    //Cycles through the carousel items from left to right.

    $("#btn-pause").on("click", function(){
        $("#carousel-1").carousel('pause');
    });
    //Stops the carousel from cycling through items.

    $("#btn-previous").on("click", function(){
        $("#carousel-1").carousel('prev');
    });
    //Cycles to the previous item. Returns to the caller before the previous item has been shown (i.e. before the slid.bs.carousel event occurs).

    $("#btn-next").on("click", function(){
        $("#carousel-1").carousel('next');
    });
    //Cycles to the next item. Returns to the caller before the next item has been shown (i.e. before the slid.bs.carousel event occurs).
});

CSS Code

.carousel-btn-group .btn span {
  display:inline-block;
  width:1px;
  height:1px;
  text-indent:100em;
}

Can be used anywhere on the page.

Wording is shifted out of view but should be readable by screen readers I believe. You can also just skip the CSS and set class="sr-only" on the spans if you like. Pretty much does the same thing, hides it out of view but readable by screen readers.

Saj