Accessibility support standards (SDK widgets)

This document outlines the accessibility support standards for SDK widgets (Stories, Moments, Videos). The goal is to ensure full compliance with accessibility standards, ensuring content is consumable via keyboard navigation, screen readers (VoiceOver, TalkBack), and visual aids.

Visual accessibility and display

OS-level display settings are supported to ensure content is readable for viewers with visual impairments.

Dynamic text sizing

OS-level font size settings are respected. All text elements support Large Text modes without breaking layout.

Bold text

OS-level Bold Text settings are supported to improve character legibility.

Reduced transparency and contrast

High-contrast colors are used between the app foreground and background.

When Reduce Transparency is enabled in OS settings, background blurs and semi-transparent overlays are replaced with solid, high-contrast backgrounds.

Keyboard navigation (desktop and web)

All functionality is fully operable via keyboard. Focus management is enforced to ensure viewers never lose their place within the interface.

Key bindings

Key	Action
Tab	Moves focus forward between the widget layout and widget items
Shift + Tab	Moves focus backward between the widget layout and widget items
Left / Right Arrow	Navigates between widget items within the carousel
Enter / Space	Triggers click action on the focused element
Esc	Closes the modal and returns focus to the widget

Focus management logic

Visual indicator
All focused elements display a clearly visible blue outline indicator.

Opening content
When navigating to new content (for example, automatically advancing to the next story or moment), focus automatically moves to the new content container.

Closing content
When a modal is closed, focus returns to the specific widget item that originally opened it.

Tab order
The Exit (Close) button is placed as the last element in the tab sequence to prevent premature closure.

Screen reader experience

Major screen readers are supported, including VoiceOver (iOS/macOS), TalkBack (Android), and standard web screen readers (NVDA/JAWS).

Announcements and interaction

Screen readers must clearly announce widget actions and states.

Desktop interaction
Elements are announced when focused via keyboard or hovered via mouse.

Mobile interaction
Elements are announced when tapped (focused).

Required element announcements

Widget level
Title, chip, badge.

Content information
Content title, descriptions, story page, and call-to-actions (CTA).

Story title is announced on the first page only.
Story page position is announced as “Page X of Y.”
Story page logic applies to both new and resuming Stories.

Playback controls
Play/Pause, Mute/Unmute, Share, Like, Next/Previous item, Close.

State
Playback status must be announced (for example, “Playing,” “Paused,” “Ended”).

Enrichment layers
Any interactive elements inside enrichment layers (titles, buttons) are focusable and announced.

Technical implementation (ARIA and semantics)

ARIA attributes are used to communicate state and relationships to assistive technology.

ARIA attributes

aria-expanded (state)
Applied to the widget trigger to indicate whether the modal is open (true) or closed (false).

aria-controls (relationship)
Links the trigger element to the modal ID, instructing the browser to update the element when the trigger is activated.

Limitations

Accessibility support is currently missing for:

Inline players
Video player