Skip to content
ceci n'est pas un carousel
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Script for creating simple, accessible carousel-like merry-go-rounds.

"Ceci n'est pas un carrousel"


merry-go-round.js, along with a simple fieldset of radio buttons and associated labels enables you to create accessible mgrs 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 mgr. 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 mgr of addresses. Selecting one submits the form along with the selected address option:

A mgr of mgrs. Selecting one redirects the user to the flickr page for that image.

Quick Start

Include merry-go-round.js.

<script src="path/js/merry-go-round.js"></script>`

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

window.onload = function () {

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

<link rel="stylesheet" href="path/css/mgr.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 mgr:

$themeColor: blue;
$arrowWidth: 1px;
$arrowSize: 20px;
$mgrBorder: 1px solid #bbbbbb;
$mgrWidth: 20em;
$mgrRadius: 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 Merry-Go-Round is to create accessible content, then turn it into a mgr for sighted users: progressive enhancement.

Start off with semantic HTML. Here is the outline:

<form action="someAction">
<fieldset class="mgr" id="idForMerryGoRound">
  <legend>Legend is read by screenreader</legend>
    <a class="backward" data-move="backward" data-mgr="nameOfRadioButtons" hidden></a>
    <ul class="mgr-labels left0">
        <label for="firstRadioID">Merry Go Round Slide #1
        <label for="secondRadioID">Merry Go Round Slide #2
    <a class="forward" data-move="forward" data-mgr="nameOfRadioButtons" hidden></a>
    <ul class="mgr-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 mgr 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 merry-go-round. 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>;
$mgrWidth: <width of mgr in em units>;
$mgrBorder: <none or border shorthand declaration>;
$mgrRadius: <corners of the mgr>;
$radioSpacing: <width of space between radio buttons>;

If you're not using a preprocessor, you can grab mgr.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


The forward and back arrows are not keyboard focusable by default. If you want to make them keyboard focusable, uncomment the code to do so in the merry-go-round.js script.

ReactJS version

To Do


Estelle Weyl.


This code is available under the MIT license


Jennifer Sutton for help with testing. The team at Instart Logic and Environments for Humans for naming.

You can’t perform that action at this time.