Designing accessibility into your mobile app ensures that all users, regardless of their abilities, can access and understand the content. Follow these guidelines to ensure accessible content for your mobile app.

Text Size

Text content in the app, such as widgets and schedule items will have predefined text sizes. 

When text is part of an image, like a widget, ensure text is large enough to be easily readable. The recommended minimum font size is 12-14 points. Display fonts and decorative fonts will require larger font sizes to be legible.

Using custom fonts for your mobile app can further align to your event’s brand, however, always check for readability issues in the app. Do not use display or decorative fonts for reading text since reading text is used at smaller sizes.

Good usage of text includes legible and appropriately sized text widgets, bottom bar tabs, and text in graphics.

Poor usage of text includes an abundance of decorative fonts that are difficult to read, as well as inadequate text sizing.

Color Contrast

The recommended contrast ratio is at least 4.5:1 for standard text and 3:1 for large text.

When choosing colors in the design settings and widget content, ensure the text color will contrast well on each background color for both light and dark modes. For widgets, ensure images that include text in any image banner or button also provide enough contrast on the background.

Use a contrast checker tool to verify that your color combinations meet accessibility standards. 

Good contrast allows text and content to be easily viewable while enhancing your app screens.

Poor contrast makes it difficult for users to navigate through essential content sections on your app screens and can often hide your important call-to-actions.

Alt Text

For widgets that contain images, always add alternative text (alt text), ensuring that screen readers can convey the same information to visually impaired users. Any text that is part of an image must be included as alt text, as well as a description of the image if that is important to understanding the content. 

For images used as buttons, the alt text should match the text displayed on the button.

• Good example alt text: Grab your tickets. Button
• Poor example alt text: Tickets

For images without text, the alt text should describe the image.

• Good example alt text: Image. Fog filled concert stage at night with artists performing to a large audience standing and cheering.
• Poor example alt text: Concert stage.

For images meant to be clickable, describe the text content as if the image was a button to ensure user action and avoid confusion.

• Good example alt text: Policy and security, health and safety, and FAQs. Button.
• Poor example alt text: Image. Policy and security, health and safety, and FAQs

Tap Areas

For buttons, we recommend a touch size of 32x32 pixels because it provides a comfortable tap area for most users. Ensure any image widgets are at least 32 pixels in height that users are intended to interact with.

Good usage of the tap area includes image widgets that are at least 44px in height.

Image widgets whose height is too small will create a bad experience for users as they might miss their tap or tap on the wrong item.

Considerations For Poor Internet Connections

Users may use your app in environments with a poor internet connection. 

• Publish the bulk of important content well before the event and get the attendees to view the most updated state of the app before entering the event.
• Image heavy apps may come with longer download times in poor connectivity. Save on space by using alternate widgets to present multiple links to information, such as the Image Collection or Links Collection widget.

Key Takeaways

• Text Size: Ensure all text, including in widgets and images, is legible with a minimum font size of 12-14 points. Avoid using display or decorative fonts for body text as they require larger sizes for readability.
• Color Contrast: Maintain a contrast ratio of at least 4.5:1 for standard text and 3:1 for large text. Ensure adequate contrast between text and background in both light and dark modes. Utilize contrast checker tools to verify compliance with accessibility standards.
• Alt Text: Always add alt text for images, especially for buttons, ensuring screen readers can interpret the content. Alt text should describe both the image and any vital text it contains.
• Tap Areas: Buttons and interactive elements should have a minimum tap size of 32x32 pixels to ensure ease of interaction.
• Poor Internet: Consider how your app performs in poor internet connections.