Carousels allow a user to browse a small collection of featured products represented pictorially and possibly select one of them.
- Horizontal rule of 1px above section title that extends the width of the module, stroke color #AAAAAA. A horizontal rule of 1px below the bottom row of that extends the width of the module, stroke color #AAAAAA
- Section title is Enterprise T2 styling, Open Sans Light, 25px, Line Height 28px, font color primary #001733. Link. There is 20px of spacing above and below section title.
- Right and Left scroll buttons with arrows follow enterprise secondary button styling design. Link. Buttons are 72px height, 33px wide . The arrow icon is from the SHC font icon library and is centered horizontally and vertically inside of button. The right and left scroll buttons have 10px of spacing on the right and left of the button
- Carousel product image is 180px x 180px with 10px of spacing above the image and 20px of spacing below the image.
- Crossed out price is Open Sans Regular 13px, in secondary gray color #666666 with a strike through.
- Red sale price is Enterprise T3 styling, Open Sans Semibold, 21px, Line Height of 26px, font color #D01833. There is 14px of spacing below the pricing.
- Carousel product title is Enterprise T5 styling and there is a max of 3 lines for the product titles. Overflow affordance is ellipses (…) . Spacing below the product title is 14px.
- Star ratings follow the Enterprise Star Ratings pattern, for full specs see link.
- Carousel product cards in their hover state have a 1px stroke around entire card when in active state, #005ccc. Product title follows enterprise link style, underlined and text color #0055ccc.
Enter spec details here. HTML is allowed.
There are many accessibility requirements to ensure a carousel (sometimes referred to as slideshow) is ADA accessible. The major principle to carousel accessibility is allowing the user to stop all movement. Allowing users to control the movement of a slideshow is one of the four “non-interference” clauses in WCAG2.
Requirements to ensure a carousel is fully accessible:
- Allow the user to stop all movement
- Provide visible controls accessible to the keyboard, mouse and touch
- Provide a valid and understandable focus order through the slideshow
- Valid coding and stylesheets
- Provide meaningful alternatives
Carousel Usability: Designing an Effective UI for Websites with Content Overload
Summary: Carousels allow multiple pieces of content to occupy a single, coveted space. This may placate corporate infighting, but on large- or small-view ports, people often scroll past carousels. A static hero or integrating content in the UI may be better solutions. But if a carousel is your hero, good navigation and content can help make it effective.view article