Navigational arrows allow users to quickly move between hidden visual content outside the viewport or container.
There are many accessibility requirements to ensure a carousel arrows are ADA accessible. The major principle to carousel arrow accessibility is increasing contrast to background ratio. This allows users with visibility issues to better identify & navigate the controls which complies with one of the four “non-interference” clauses in WCAG2.
Requirements to ensure a carousel arrows are fully accessible:
- 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
Platform inclusions: desktop & tablet Currently there is no standard pattern for navigational arrows. UXR suggests usability is an issue, functional elements cannot be seen and comprehension in some cases is low. The purpose of the redesign is to create a singular design pattern to be used throughout the entirety of the site. The redesign includes functional design elements applied to the arrow pattern. These design elements help to increase visibility and user comprehension on the entirety of the site.
Carousel Arrow Usability: Designing an Effective UI for Websites with Content Overflows
Carousel arrows allow multiple pieces of content to be progressively disclosed within a finite container.
- Existing margins.
- For the caret element use SVG for caret icon: download here.. Height of half circle is 68px; center align inside of graphic element. Color of half circle is #EEEEEE and an alpha of 80%. Drop shadow color is #AAAAAA, 1x / 2y / 1 Blur / 0 spread.
- See invision document, for specs see link.Graphic element to nudge left and right on hover. Extend width of graphic element from 34px to 64px wide. Caret element to nudge left & right 10px. Caret & tab have easing curve of (0.25x 0.1y) (0.25x 0.1y). Timing is 0.10 seconds / 100ms. See animation for visual example
- Default arrow color for sears is #001733, hover state for arrow is #005CCC. Default arrow color for kmart is #333333, hover state for arrow is #B10017.
- Note: When no content is available on either left or right of the slide sequence, no arrow is shown.
- Use same design specifications for contextualized containers. Center align inside and on top of image area. Shown here is the product description page image container.
- Use same design specifications. Shown here is the hero on homepage image container.
- Use same design specifications. Shown here is the thumbnail container.
- Use same design specifications. Shown here is the breadcrumb module.