A carousel control dynamically scrolls large amounts of data using minimal screen real estate.

Accessible Carousel

Bootstrap Syntax

<div class="accCarousel"
data-src="path/file.xml"
data-defaultopen="#" or "#,#"
id="uniqueID"
></div>

Attributes

  • class="accCarousel" : The bootstrap class name that specifies an accessible carousel.
  • data-src : The resource path.
  • data-defaultopen : The array index number of the carousel slide to open automatically when loaded. The difference between the use of "#" or "#,#", depends whether the carousel is flat or grouped within the XML syntax.
  • id : The unique ID of the element. This value is also registered as the ID of the carousel AccDC Object, making it possible to invoke the object programmatically.
    $A.reg.uniqueID.open();
    // All other AccDC API properties and methods are similarly available.

Outer XML Syntax

required for both grouped and ungrouped carousels.

<?xml version="1.0" encoding="UTF-8" ?>
<carousel role="REQUIRED: Hidden text role for screen reader users"
accStart="REQUIRED: Hidden text start keyword for screen reader users"
accEnd="REQUIRED: Hidden text end keyword for screen reader users"
height="REQUIRED: Total height of control"
width="REQUIRED: Total width of control"
className="Control class name for styling"
prevTitle="REQUIRED: Title text for the previous button"
nextTitle="REQUIRED: Title text for the next button"
slideName="General name for a slide, used with prevTitle and nextTitle for Next Slide and Previous Slide buttons"
isGrouped="REQUIRED: 'yes' or 'no': Must match the syntax of the XML whether or not group markup is included"
groupName="General name for a group, used with prevTitle and nextTitle for Next Group and Previous Group buttons"
showGroup="If 'yes', group names will be displayed above or below the carousel; depends on the value of groupPosTop"
groupPosTop="If 'yes', group names are displayed above the carousel, if not, then they are displayed below"
btnPText="Textual value of the Previous Slide button; uses innerHTML to insert"
btnNText="Textual value of the Next Slide button; uses innerHTML to insert"
btnPGText="Textual value of the Previous Group button; uses innerHTML to insert"
btnNGText="Textual value of the Next Group button; uses innerHTML to insert"
btnPAccesskey="accesskey for the Previous Slide button"
btnNAccesskey="accesskey for the Next Slide button"
btnPGAccesskey="accesskey for the Previous Group button"
btnNGAccesskey="accesskey for the Next Group button"
direction="REQUIRED: Must be either 'lr' (left to right), or 'tb' (top to bottom)"
cycle="REQUIRED: 'yes' or 'no' for infinite looping"
timer="REQUIRED: '0' to disable, or positive integer for automatic rotation in N milliseconds"
animDelay="REQUIRED: Slide animation length in milliseconds; set to '0' for instant transition"
forward="REQUIRED: 'yes' or 'no' to set auto rotation to move backwards or forwards"
hiddenMsg="Hidden text message for screen reader users" >
... Inner XML markup ...
</carousel>

Inner XML Syntax

For slides with no grouping.

<slide announce="Text1 to announce to screen reader users" ><![CDATA[
... HTML markup to display for slide 1 ...
]]></slide>
<slide announce="Text2 to announce to screen reader users" ><![CDATA[
... HTML markup to display for slide 2 ...
]]></slide>

Inner XML Syntax

For slides with grouping enabled.

<group name="Textual name for group 1" >
<slide announce="Text1 to announce to screen reader users" ><![CDATA[
... HTML markup to display for slide 1 ...
]]></slide>
<slide announce="Text2 to announce to screen reader users" ><![CDATA[
... HTML markup to display for slide 2 ...
]]></slide>
</group>
<group name="Textual name for group 2" >
<slide announce="Text3 to announce to screen reader users" ><![CDATA[
... HTML markup to display for slide 3 ...
]]></slide>
<slide announce="Text4 to announce to screen reader users" ><![CDATA[
... HTML markup to display for slide 4 ...
]]></slide>
</group>

XML attributes that are not required may be set to null. E.G. attributeName=""