Accessibility
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:
- Open the Atomic Workbench.
- Navigate to the Theme Editor (Configuration > SDK > Container themes).
- Select a theme and then a typography style inside of that theme (e.g. Headline > Typography).
- 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 size | Delta applied |
|---|---|
| XS | -3 |
| S | -2 |
| M | -1 |
| L (default) | 0 |
| XL | 2 |
| XXL | 4 |
| XXXL | 6 |
| Accessibility M | 10 |
| Accessibility L | 15 |
| Accessibility XL | 20 |
| Accessibility XXL | 25 |
| Accessibility XXXL | 30 |
- 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.getFontScalemethod. 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 size | Resultant size |
|---|---|
| XS | 15px (14px is below min) |
| S | 15px (at or above min) |
| M | 16px |
| L (default) | 17px |
| XL | 19px |
| XXL | 21px |
| XXXL | 23px |
| Accessibility M | 27px |
| Accessibility L | 30px (32px is above max) |
| Accessibility XL | 30px (37px is above max) |
| Accessibility XXL | 30px (42px is above max) |
| Accessibility XXXL | 30px (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 factor | Resultant size |
|---|---|
| 0.75 | 15px (12.75px is below min) |
| 1 | 17px |
| 1.15 | 19.55px |
| 1.25 | 21.25px |
| 1.5 | 25.5px |
| 2 | 30px (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:
| Format | Text supplied to screen reader |
|---|---|
| Banner | Alternate text |
| Inline | Alternate text |
| Text | Label is used (also defined in the Workbench), as this component does not render an image thumbnail |
| Thumbnail | Alternate 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:
- Open the Atomic Workbench.
- Navigate to the Theme Editor (Configuration > SDK > Container themes).
- 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.