Developer notes
- A list of related content items as a horizontal slideshow
- There are a variety of implementation alternatives for a carousel. At least one of the options above for navigating through the elements/slides must be available
- Slides cannot automatically rotate through carousel unless there is a pause/stop button
- If there is a visible indication of what slide the user is on with pagination dots or tabs, each slide should announce the index of the slide (“1 of 3”) and dots do not get focused or announced in the swipe order
- “In list” or “Showing slides x of y” are common announcements to give screen readers layout context
- Alternate implementation to swiping through carousel: Change the slides with interactive page control dots and dynamically announce all the content in the slide along with page index.
- The implementation choice would depend on the number of carousel slides/elements. Swiping right through the slides of a very large number of slides to get to the next element past the carousel would be a terrible user experience. A container for the carousel and alternate gestures for navigation inside the container should be considered on large carousels
- Consider accessibility requirements when chosing a plug-in or widget
- If swiping with two or three fingers (Android and iOS, respectively) is used to rotate through the carousel, announce “page x of y” upon swiping to next screen.
Name
-
Each item in the carousel has a name that describes the purpose of the control and matches any visible label/all text and image descriptions within item.
- iOS Tips
- Set a label in Interface Builder in the Identity Inspector
- Group visible text label and the control in the same view container:
accessibilityFrameInContainerSpace
setTitle( )
method- If no visible label, use
accessibilityLabel
on control Hint
is used sparingly and if the results of interacting with it are not obvious from the control’s label.- Match visible label, if any
- To hide labels from VoiceOver announcements, uncheck the Accessibility Enabled checkbox in the Identity Inspector
- If hiding visible label, use
accessibilityLabel
on control
- Android Tips
android:text
XML attribute- Optional: use
contentDescription
for a more descriptive name, depending on type of view and for elements without a visible label. contentDescription
overridesandroid:text
- Use
labelFor
attribute to associate the visible label to the control
Role
- iOS
- Button
- Custom class
CarouselAccessibilityElement
- Optional: implement custom actions with
accessibilityTraits
set toadjustable
. Suggested for a carousel with a large number of slides.
- Android
- ViewPager or
- CarouselView
Groupings
n/a
State
- iOS
- Active:
isEnabled
property - Disabled:
UIAccessibilityTraitNotEnabled
- Announcement: dimmed
- Active:
- Android
- Active:
android:enabled=true
- Disabled:
android:enabled=false
- Announcement: disabled
- Active:
Focus
- External keyboard tab order often follows the screen reader focus, but sometimes needs focus management
-
Each slide/element in the carousel should be in the view area when it is being announced
- iOS
accessibilityElementIsFocused
isAccessibilityElement
makes the element visible or not to the Accessibility APIaccessibilityElementsHidden
indicates that the children elements of the target element are visible or not to the Accessibility APIaccessibilityViewIsModal
contains the screen reader focus inside the Modal- To move screen reader focus to newly revealed content:
UIAccessibilityLayoutChangedNotification
- To NOT move focus, but dynamically announce new content:
UIAccessibilityAnnouncementNotification
- Android
importantForAccessibility
makes the element visible to the Accessibility APIandroid:focusable
android=clickable
- Implement an
onClick( )
event handler for keyboard, as well asonTouch( )
nextFocusDown
nextFocusUp
nextFocusRight
nextFocusLeft
accessibilityTraversalBefore
(or after)- To move screen reader focus to newly revealed content:
Type_View_Focused
- To NOT move focus, but dynamically announce new content:
accessibilityLiveRegion
(set to polite or assertive) - To hide controls:
Important_For_Accessibility_false
- For a
ViewGroup
, setscreenReaderFocusable=true
and each inner object’s attribute to keyboard focus (focusable=false
)