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, Android and Web 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".
- On Web, this feature responds to the preferred font size setting, set in the user's browser.
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 behavior for all typography styles).
Font sizing behavior
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 Web this occurs when the user changes their browser font size preference.
- 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 multiplied 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). -
On Web, the font size in the typography style is multiplied by a scale factor of the ratio between the users preferred font size & the browser default font size (16px). For example where the user preference is for a font size of 24px the scale factor applied is 1.5 (24/16)
Once these delta values (iOS) or scale factors (Android & Web) 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 & Web, 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. The alternate text forms part of a description that is passed to the system screen reader (when enabled).
We offer two distinct types of alternate text:
-
Thumbnail alternate text: This type of alternate text applies to the preview of an image or video component at the card level. When you author a card, you supply this text to describe the thumbnail representation of the image or video.
-
Source alternate text: This is the alternate text used for the source of the image or video, which is also supplied in the Workbench. It's meant to provide a description when the image is viewed on the "View image" page or when a video is played in banner or in-line mode.
The following description applies to the image format:
| Format | Text supplied to screen reader |
|---|---|
| Banner | Thumbnail alternate text on card. Source alternate text when viewing. |
| Inline | Thumbnail alternate text on card. Source alternate text when viewing. |
| Text | Label (also defined in the Workbench) on card. Source alternate text when viewing. |
| Thumbnail | Thumbnail alternate text, label, and description on card. Source alternate text when viewing. |
The following description applies to the video format:
| Format | Text supplied to screen reader |
|---|---|
| Banner | Thumbnail alternate text on card. Source alternate text when playing. |
| Inline | Thumbnail alternate text on card. Source alternate text when playing. |
| Text | Label (also defined in the Workbench) on card. Source alternate text is not used. |
| Thumbnail | Thumbnail alternate text, label, and description on card. Source alternate text is not used. |
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.