What is role="listbox" used when creating carousel?

html css bootstrap-carousel
JustStartedStudying picture JustStartedStudying · Sep 16, 2016 · Viewed 11.4k times · Source

Just a simple question

When I tried to create a carousel, I noticed many sample codes are:

<div class="carousel-inner" role="listbox">

In the above code, what does role="listbox" do? Please give me an insight.

Answer

Nate K picture Nate K · Sep 16, 2016

role="listbox" is used for accessibility purposes. It identifies to a screen-reader or other assistive technology device that this is an element that allows a user to choose one or more options, such as images in a carousel.

You should also add role="option" to each slide.

see here for more information: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role

Related questions

Bootstrap 4 carousel not working?

I have the following BS4 Carousel code, (made it using this tutorial https://www.youtube.com/watch?v=n8ItscKLf7s&list=PLRtjMdoYXLf47brThg9-nTj8HSq8cQ0ND&index=53), However the code is not working, the first image …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More