Script for creating simple, accessible carousels
HTML CSS JavaScript
Latest commit f640267 May 5, 2016 @instart instart test page
Failed to load latest commit information.
carousel first commit Apr 19, 2016
css safari fix May 5, 2016
horses carousel images May 3, 2016
js removed oops May 4, 2016
scss safari fix May 5, 2016
LICENSE Initial commit Apr 19, 2016 removed oops May 4, 2016
horse.html I'm not always so good at js May 4, 2016
index.html readme file May 3, 2016
index2.html readme file May 3, 2016
index3.html safari fix May 5, 2016
nocss.html test page May 5, 2016
nocss2.html test page May 5, 2016
nocss3.html test page May 5, 2016


Script for creating simple, accessible carousels


carousel-carousel.js, along with a simple fieldset of radio buttons and associated labels enables you to create accessible carousels without frameworks and without a plethora of accessibility bugs or added ARIA maintenance.

The user can use the mouse or keyboard to tab through the carousel. Screen reader users hear an accessible list of options. Keyboard users can navigate thru the faux radio buttons. Mouse users can click on any of the faux radio buttons or the forward and back arrows. The arrows are NOT focusable via tabbing as they are redundant, and the fourth rule of ARIA is 'Do not use role="presentation" or aria-hidden="true" on a visible focusable element.


A carousel of addresses. Selecting one submits the form along with the selected address option:

A carousel of carousels. Selecting one redirects the user to the flickr page for that image.

Quick Start

Include carousel-carousel.js.

<script src="path/js/carousel-carousel.js"></script>`

Until I create the auto-initiation script, you also have to instantiate each carousel, where carouselID is the value of the id on the fieldset.

window.onload = function () {

Add a css file of your own creation similar carousel.css to your page. Included in the repository are several Sass modules making up the carousel.css. I've included the CSS just like so:

<link rel="stylesheet" href="path/css/carousel.css"/>

You should incorporate the .scss component into your sass build. Note you will want to change the following values to match your design and the width of the carousel:

$themeColor: blue;
$arrowWidth: 1px;
$arrowSize: 20px;
$carouselBorder: 1px solid #bbbbbb;
$carouselWidth: 20em;
$carouselRadius: 5px;
$radioSpacing: 20px;


The first rule of ARIA is don't use ARIA. The 1st rule of ARIA use is if you can use a native HTML element or attribute with the semantics behavior already built in, do that instead. The point of Carousel-Carousel is to create accessible content, then turn it into a carousel for sighted users: progressive enhancement.

Start off with semantic HTML. Here is the outline:

<form action="someAction">
<fieldset class="carousel" id="idForTheCarousel">
  <legend>Legend is read by screenreader</legend>
    <a class="backward" data-move="backward" data-carousel="nameOfRadioButtons" hidden aria-hidden="true"></a>
    <ul class="carousel-labels left0">
        <label for="firstRadioID">Carousel Slide #1
        <label for="secondRadioID">Carousel Slide #2
    <a class="forward" data-move="forward" data-carousel="nameOfRadioButtons" hidden aria-hidden="true"></a>
    <ul class="carousel-radios">
        <input type="radio" name="nameOfRadioButtons" data-value="0" value="someValue" id="firstRadioID" checked><span></span>
        <input type="radio" name="nameOfRadioButtons" value="some other value" data-value="1" id="secondRadioID"><span></span>
   <input type="submit" value="Put Submit Button Text Here">

Include more labels and their associated radio button for each carousel slide.


There are accessibility features baked into the examples that you must maintain to maintain accessibility.

  • Always include a fieldset
  • Always include a legend. The content of the legend should indicate the purpose of the list of options of the carousel-carousel. This is read by the screen reader.
  • Always include label content that describes the content of the slide. Do not include form controls in the label. Avoid using links.
  • Always include a label for each radio button control, and associate the form control explicitly with the for and id attributes.
  • The forward and backward buttons are invisible to the screen reader. While not required, they do improve usability. They are initially hidden, being displayed only if JavaScript is available and if there are more than one option.

Browsers Tested

  • Safari
  • Chrome
  • Firefox
  • Opera

Needs Testing:

  • Edge

Browsers / Screen Readers Tested

  • Safari with Voice Over
  • Firefox with Voice Over
  • Chrome with Chrome Vox


See Options


To do:

  • self initialize


You must include the following variables and values in your SCSS files:

$themeColor: <color value for theme>;
$arrowWidth: <the border-width of arrow''s two lines>;
$arrowSize: <the length of those two lines>;
$carouselWidth: <width of carousel in em units>;
$carouselBorder: <none or border shorthand declaration>;
$carouselRadius: <corners of the carousel>;
$radioSpacing: <width of space between radio buttons>;

If you're not using a preprocessor, you can grab carousel.css and make changes to your CSS as necessary.


Handles these test cases:

  • Keyboard users: can tab and use arrow keys
  • Mouse users
  • Screen Readers

To do:

  • handle touch


ReactJS version

To Do


Estelle Weyl.


This code is available under the MIT license