Skip to main content


The Atomic SDKs support a variety of accessibility features on each platform. These features make it easier for vision-impaired customers to use Atomic's SDKs inside of your app.

These features also allow your app, with Atomic integrated, to continue to fulfill your wider accessibility requirements.

Dynamic font scaling

The Atomic iOS and Android SDKs support dynamic font scaling. Typography styles opt-in to dynamic scaling to respond to the font size preference set by the user in their device settings.

  • On iOS, this feature (called Dynamic Type) is enabled in the Settings app, under "Text Size".
  • On Android, this feature is enabled in the Settings app, under "Font size".

To opt-in to dynamic scaling:

  1. Open the Atomic Workbench.
  2. Navigate to the Theme Editor (Configuration > SDK > Container themes).
  3. Select a theme and then a typography style inside of that theme (e.g. Headline > Typography).
  4. Toggle the 'Dynamic sizing' switch on, and optionally supply a minimum and maximum font size.

Typography styles that do not have 'Dynamic scaling' enabled stay at a fixed size regardless of the user's text size (this is the default behaviour for all typography styles).

Font sizing behaviour

When the user changes their system-wide text size on iOS or Android, the SDK will automatically re-render any components containing typography styles that opt-in to dynamic scaling (typography styles that have the 'Dynamic scaling' option enabled in the stream container theme).

  • On iOS, the font size in the typography style has a delta value added to, or subtracted from, it using the following values. User-selected sizes correspond to the values defined in UIContentSizeCategory:
User-selected sizeDelta applied
L (default)0
Accessibility M10
Accessibility L15
Accessibility XL20
Accessibility XXL25
Accessibility XXXL30
  • On Android, the font size in the typography style is multipled by a scale factor returned by the operating system, as defined by the Configuration.getFontScale method. Scale factors vary by device, and are expressed as a decimal value (e.g. 1.25).

Once these delta values (iOS) or scale factors (Android) are applied, the minimum and maximum scaling sizes are applied to the resultant font size. See the example below for a demonstration of how this works.

Example scaling scenario

A typography style is configured in the Workbench with the following properties:

  • Font size: 17px
  • Dynamic scaling: On
  • Dynamic scaling minimum size: 15px
  • Dynamic scaling maximum size: 30px

On iOS, the following font sizes would be used for each content size category:

User-selected sizeResultant size
XS15px (14px is below min)
S15px (at or above min)
L (default)17px
Accessibility M27px
Accessibility L30px (32px is above max)
Accessibility XL30px (37px is above max)
Accessibility XXL30px (42px is above max)
Accessibility XXXL30px (47px is above max)

On Android, the following font sizes would be used for each scale factor (examples only; actual scale factors returned by the operating system may differ):

Scale factorResultant size
0.7515px (12.75px is below min)
230px (34px is above max)

Alternate text

As of iOS SDK version 0.23.0, Android SDK 0.16.0 and Web SDK 0.19.1, alternate text is supported on all image and video components. This alternate text is supplied by you when authoring a card, and is used to describe the image or video itself. Alternate text forms part of a description that is passed to the system screen reader (when enabled).

The following description is used for each image or video format:

FormatText supplied to screen reader
BannerAlternate text
InlineAlternate text
TextLabel is used (also defined in the Workbench), as this component does not render an image thumbnail
ThumbnailAlternate text, label and description

Focus rings

The Atomic Web SDK allows you to customize the focus ring used to highlight components when a user tabs through a stream container or single card view. The focus ring is rendered as a solid outline around the active component, and only appears when the user tabs between components using their keyboard.

To customize the focus ring:

  1. Open the Atomic Workbench.
  2. Navigate to the Theme Editor (Configuration > SDK > Container themes).
  3. Select a theme and then choose Accessibility > Focus ring.

There are two options you can customize for the focus ring color:

  • Feed: refers to the screen displaying the card list or single card;
  • Subview: all other screens in the SDK.